2020年 なまら北海道だべさチャンネル大幅リニューアル公開中 YouTube

CSSやウェブフォントで美しく

  • URLをコピーしました!

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

目次

CSSを使う

やりたいを実現するCSS

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

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

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


これはCSSのボタン例です。

CSSは勉強しないとダメ?

 CSSを知っていると自分の思いのままにサイトを編集することができ、見た目にも美しいサイトに仕上げることができます。

 「いや、でも難しそうだな。」と思われた方。大丈夫です!

 ElementorならCSSの知識がなくてもやりたいことがほとんどできます。本当にすごいです。

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

▶ スポンサードリンク

フォントって何?

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

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

 では、ホームページ作成で起こるフォントの問題って何でしょうか。それは、パソコンによって登録されているフォントが異なるので、自分がイメージした字体で表示されない可能性があるということです。私のパソコンではおしゃれな文字に見えていても、みなさんのパソコンではただのゴシック体になっているということが起こるのです。画像にしてしまうという手もありますが、画像の文字は検索にヒットしないのでアクセス数アップにはつながりません。

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

 もし、ウェブ上でフォントのデータが共有できたとしたらこの問題は解決しますよね。どの端末からアクセスしても、同じ字体を表示できます。それが「ウェブフォント」です。最近はようやく日本語対応のウェブフォントが出始めています。

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

日本語ウェブフォント

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

簡単に使えるの?

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

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

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

まとめ

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

よかったらシェアしてね!
  • URLをコピーしました!
目次