【ブログカスタマイズ】CSSはHTMLと別のファイルじゃなくていい!CSSの書き方は3パターンある。

CSSの書き方3パターン


僕が初めてブログをカスタマイズしようとしたとき、まず戸惑ったのが、

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と分けて解説される場合がほとんど。

実際にブログをカスタマイズするときとは、かなり雰囲気が異なります。

いろいろな記述法があることを知って、以前の僕のように焦らないようにしましょう!