僕が初めてブログをカスタマイズしようとしたとき、まず戸惑ったのが、
CSSファイルがどこにもない!
ということ。
HTMLとCSSファイルは必ず別のファイルだと思っていたんですよね。
ブログのテーマ(テンプレート)を編集しようとしたら、画面に「HTMLの編集」というボタンしかなくて焦りました。
後に勉強してわかったことですが、CSSはHTMLの中に直接書き込むことができます。
CSSの書き方は次の3通り。
① リンク :HTMLとは別にCSSファイルを作り、後から関連付ける
② エンベッド :HTMLのhead要素にCSSを書き込む
③ インライン :一つ一つの要素ごとにCSSを指定する
今回はこの3つの特徴やメリットついて解説します。(詳しいコードの記述法は省略しました)
関連記事:【脱無職への道】ドットインストールでプログラミングの独学を開始。無料なのにサービスの質が高くて感動!
リンク
「リンク」はCSSをHTMLと別のファイルに記述して、後から関連付ける方法です。
CSSを独立したファイルにすることで、複数のWebページやサイトに同じスタイルを指定して、簡単に見た目をそろえることができます。
CSSをHTMLと別々に管理できるのもいいところ。
HTMLをいじることなく、CSSだけを変えられるので、ページの構造を壊してしまう心配がありません。
コードが見やすくなるのもメリットですね。
エンベッド
「エンベッド」では、HTMLのhead要素の中に直接CSSを書き込みます。
ブログではどのページでも、ヘッダーなど大部分の構造が共通なので、この方法と相性がいいです。
このブログ(Blogger)の場合もそうなっていますね。
CSSをHTMLの中に書き込むメリットは、外部ファイルを読み込む必要がないこと。
HTMLとCSSを1つの画面でまとめて管理できます。
インライン
「インライン」は1つ1つの要素ごとに、それぞれCSSを指定する方法です。
インラインで書き込んだスタイルは「リンク」や「エンベッド」よりも優先して適用されます。
コードは複雑になりますが、特定の部分の見た目をピンポイントで変えることが可能。
ブログでよくある、1行だけアンダーラインの色を変えたり、画像の位置を調節したりするのに便利ですね。
コードをミスしても、ブログ全体への影響が少ないので、実験的にどんな見た目になるか試す場合にも安心です。
さいごに
一般的なウェブサイトでは、HTMLとCSSを別のファイルにするのが主流ですが、ブログはちょっと違います。
普段ブログを書いていると、「ウェブサイト=ブログ」と思い込みやすいので注意が必要ですね。
また、本やプログラミング学習サイトでも、CSSはHTMLと分けて解説される場合がほとんど。
実際にブログをカスタマイズするときとは、かなり雰囲気が異なります。
いろいろな記述法があることを知って、以前の僕のように焦らないようにしましょう!