パソコンやスマートフォンなどのモバイル端末を使う人が多くなり、今まで以上にホームページを見る人が増えてきました。そうすると、内容をじっくり読んでくれる人もいますが、パッと見たサイトの印象だけで、すぐに他に移っていく方も多くいらっしゃいます。みなさんはいかがでしょうか。やはりデザインやレイアウトがしっかりしているサイトの方が、文字ばっかりでごちゃっとしたサイトよりも読みたくなりますよね。

CSSを使う

やりたいを実現するCSS

 CSS(スタイルシート)では、コンテンツをどのように表示するのかを細かく決めることができます。しかも、簡単に呼び出して使うことができるため、記述の量も大幅に削減され軽量化が図れます。例えばこのサイトではよく、”mi07a pa05”というものを使っています。

 mi07aには、見出し青い背景に白い文字。枠線に点線を使い、その周りには同じ青で影をつける。すると、縫い目が付いたように見えるという、そんな命令です。pa05は余白です。それぞれ、見出しではないところにも使うこともできます。

 ホームページ初心者の方にとっては、まだよく分からないという方も多いと思います。それで大丈夫ですが一言だけ。かっこよいサイトを作るためにはCSSは不可欠です。マウスを乗せて変化するボタン。そういうものも全部CSSです。サンプルを作ってみたのでマウスを乗せてみてください。なお、サンプルのため、リンクは貼っていません。

CSSは勉強しないとダメ?

 CSSを全く知らないよりは、少しでも知っておいた方が、より少ない手間で軽量化もしつつ、しかも、レスポンシブ対応までした美しいサイトを作っていくことができます。このように、CSSは知っていた方がいいということは言うまでもありません。でも、Elementorなら、ほんの少し毎回の作業が増えますが、CSSの知識がなくてもほとんどやりたいことをやってくれます。本当にすごいです。

そのあたりは、このサイトの実践編でも詳しく紹介していきます。ご安心ください。

▶ スポンサードリンク


フォントって何?

見てる字体はパソコンによりけり

 みなさんは、「フォント」という言葉はご存知でしょうか。明朝体とかゴシック体とか、丸字体とか見たことはありませんか。厳密には少し違うのですが、ホームページ作成でフォントと言えば「字体」のことを指すと思っていて大丈夫です。併せて、フォントサイズなんて言う言葉もありますね。これは字の大きさのことです。

 では、ホームページ作成で起こるフォントの問題って何でしょうか。身近なところの例を挙げると、家で気合を入れて作った文書が学校や職場では思ったように表示されていないということに似ています。

 「あれ?ここは筆文字っぽくしたのになぁ。」なんていうこともあります。それは、パソコンによって登録されているフォントが異なるためです。フォントはインストールもできますが、主に仕事や学習、調べ物などでパソコンを使っている人なら、あえて新しいフォントをたくさんインストールして使うということはありえません。私の場合、女子高生っぽい文字のJKゴシックをよく使っています。この字体は皆さんのパソコンには入っていませんよね?すると、私のパソコンではおしゃれな文字に見えていても、みなさんのパソコンではただのゴシック体になっているということが起こるのです。そこで、PDFにしてどのパソコンからでも同じようにみられるようにするのですが、ホームページとなるとそれも難しいですよね。なので、諦めます。

もし、フォントのデータが共有できたら

 もし、ウェブ上でフォントのデータが共有できたとしたらこの問題は解決しますよね。どの端末からアクセスしても、同じ字体を表示できます。アルファベットはずいぶん前から「ウェブフォント」というものがあったのですが、最近は日本語でも出始めています。

 それにしても、なぜ日本語のウェブフォントは進まないのか。アルファベットは26文字の組み合わせですからね。日本語はひらがなだけでも約50種類。カタカナ、漢字も使いこなす必要があります。その文字を全てデザインしていくことの難しさと、デザインしたとしてもデータ量の大きさを考えたら容易に想像はつきますよね。日本語は難しいのです。

日本語ウェブフォント

 それでも、やはり需要があれば実現する人がいるものです。近年は、日本語のウェブフォントも使われるようになってきました。モリサワ・Adobe・フォントワークスなどは有名です。

簡単に使えるの?

 実は、日本語のウェブフォントは基本的には「有料」です。趣味のサイトの「文字」にまでお金はかけたくないというのが本音ではないでしょうか。私もそう思います。

 ところが、時代は進むのです。今私が使っているwpXサーバーはモリサワのWebフォントが無料で使えるのです。しかも、30種類です。月間ビュー数が決まっていて、それを超えると普通の表示に戻ってしまいますが、翌月にはまた素敵なデザインになります。そもそも普通の表示が基本なのですから、無料でウェブフォントが使えるなんて贅沢な話です。

 ちなみに、25,000PV/月で1ドメインという制約がありますので、このページではお見せできません。実践編で改めて紹介いたします。

まとめ

 ホームページを美しく、おしゃれに見せるためには、CSSやウェブフォントなどの知識もあった方が良いということが伝わりましたでしょうか。CSSについては、Elementorを使えば詳しく知らなくても自在に扱えます。ウェブフォントは、興味があるのであればwpXサーバーを使用していれば使えますので試してみる価値はあります。改めて何かを準備したり、考えたりということではないですので、機会を見てやってみてください。実践編の中でも触れていきます。