CSS の使い方は大丈夫？ブログデザイン変更の一歩

こんにちは HARU（ @HARU ）です。

前回はブログなどの Web ページについて HTML や CSS の基本を説明しました。

ブログのデザイン変更は基本的な HTML を知るところから始めたほうがいいでしょう。

応用も効くし、自分である程度模索してデザインを変更していくことができるようになります。

ということで今回は HTML の基本的なことを理解した上で、ブログのデザインを変えていくために最も必要な知識である CSS について説明したいと思います。

CSS の使い方さえマスターできれば、色を変えたり、大きさを変えたりとブログデザイン変更の大体ができるようになります。

慣れてしまえば簡単なことなので、是非ここで覚えていってください。

CSS を書く場所

CSS を書く場所は３種類ありますが、自分でブログのデザイン変更をするというときは以下の ① と ② を多用していくことになるでしょう。

CSS ファイルに書く

最も基本的な CSS の書く場所は CSS ファイルになります。

Blogger ブログのテンプレートであれば <b:skin> から始まるところです。基本的な CSS はそこに記載されます。

CSS ファイルに書く場合セレクタ、プロパティ、値の３つを記述する必要があります。

  p {
    color: red;
  }

  <p>p タグで囲まれているすべてが赤になる</p>

上記の例ではセレクタで p タグを選択し、プロパティで色について、値で色を指定するといった形で CSS を書いています。

何の、何を、どのようにのイメージだとわかりやすいかもしれませんね。

セレクタ	p	何の
プロパティ	color	何を
値	red	どのように

CSS ファイル上に書くメリット

CSS ファイル上に CSS を書くメリットはすべてのページに CSS を反映させることができる点です。

これ以外の方法はページ毎に CSS を書く必要があります。

Web ページ全体に反映させたい CSS は CSS ファイル上に書くことをオススメします。

HTML タグの中に書く

直接 HTML のタグの中に CSS を記述する方法もあります。

この場合タグ内に style=" " と記述し、中にプロパティ、値を記述します。

  <p style="color: red;">タグ内の文字は赤色になる</p>

p タグ内に style=" " の記述、プロパティで色について、値で色を指定するといった形で CSS が書いてある。

HTML のタグの中に書くメリット

HTML のタグ内に直接 CSS を書くメリットは個別に調整したいことがあったときに対応できることです。

  p {
    color: gray;
  }

  <p>文章</p>
  <p style="color: red;">この文章だけ赤くしたい</p>
  <p>文章</p>

上記の例では p タグの基本色を CSS ファイルにてグレー色で指定、ある p タグ内のみ赤色にするため、HTML のタグ内に直接 CSS を書いています。

その他に CSS ファイル上に CSS が増えてしまうと、Web ページ全体のページ速度の減少に繋がってしまう恐れがあります。

そこでタグ内に CSS を書くことによってそのページ以外に影響を及ばないようにするメリットもあります。

HTML に Style タグを使う

あまり使うことは無いと思いますが、HTML に Style タグを使って CSS を記述する方法もあります。

書き方としては CSS ファイル上に書く方法と同じですが、Style タグで囲んで HTML 上に設置する形になる。

  <style>
  p {
    color: red;
  }
  </style>

HTML に Style タグを使うメリット

CSS ファイル上に書くメリットと HTML タグ内に書くメリットを合わせた感じになります。

言葉で言うと Web ページ毎に調整することができ、表示しているページの要素すべてに反映させることができるってイメージですが、ちょっと難しいので以下に例を示します。

  <style>
  p {
    color: red;
  }
  </style>
  <p>このページの p タグで囲まれているものは全て赤になる</p>

つまりこの Style タグがあるページだけ、タグの調整を一括で行うってことですね。

CSS を書くときの注意点

複数の要素を調整する場合

同じタグで複数の要素を調整したい場合 ;（ セミコロン ）で区切る必要があります。

CSS の場合

  p {
    color: red ;
    font-size: 16px ;
  }

タグ内や style の場合

  <style>
  p {
    color: red ;
    font-size: 16px ;
  }
  </style>

  <p style="color: red ; font-size: 16px ;">文章</p>

複数の要素を調整しない場合でも ;（ セミコロン ）を要素の最後に記載しても問題ありません。

基本的には要素の最後に ; を記載と統一してしまった方が、忘れることもなくいいかもしれません。

全角文字を使わない

CSS を書くときは「 color□:□red□; 」のようにスペースを入れて自分なりに読みやすいように書くこともできます。（ □ で表しているのがスペース ）

ただし、スペースは半角スペースに限り全角スペースを使ってはいけません。

CSS が反映されないときは全角スペースを使っていないか確認しましょう。

こういった観点から基本的に HTML を扱う上では、ブログ本文以外では半角文字を使うようにしましょう。

CSS の使い分け例

３種類の CSS を書く場所を説明しましたが言葉だけでは難しいと思うので、例として以下に私なりの使い分けを示します。

  p {
    font-size: 16px;
  }

CSS ファイル上にはすべてのページに反映させるような内容を記載します。

（ 例では p タグのフォントサイズを 16 px としている ）

  <style>
  h {
    font-size: 20px;
  }
  </style>
  <h>見出しは 20 px になる</h>
  <p>文章</p>
  <p style="color: red;">この文章だけ赤くしう</p>
  <h>見出しは 20 px になる</h>
  <p>文章</p>

ブログ本文を書くときに個別で調整したい箇所は Style タグとタグの中に CSS を書きます。

CSS 適用の優先順位

CSS の書かれている場所で違う

同じ内容の CSS がある場合、CSS の適用される優先順位は書かれている場所に対して変わります。

（ CSS ファイル上、HTML タグ内、Style タグ内含む ）

優先度	CSS の場所
高	HTML タグの中
中	HTML に Style タグを使う
低	CSS ファイル

  p {
    color: red;
  }

  <style>
    p {
      color: black;
    }
  </style>
  <p style="color: blue">文章は青になる</p>

CSS ファイルで p タグの色を赤に指定、Style で p タグの色を黒に指定、タグの中で青を指定しました。

この場合 CSS が適用される優先順位的に p タグの色は青色になります。

下に書くほど優先的に適用される

HTML の基本としてHTML文の下にいくほど優先度が上がります。

  <style>
    p {
      color: red;
    }
  </style>
  <style>
    p {
      color: blue;
    }
  </style>
  <p>文章は青になる</p>
  

上記の例では同じ Style タグを使って違う色を指定してみました。

この場合、下に書かれている Style が優先されるため p タグ内は青色になります。

class を使って CSS を指定する

タグ内に CSS を直接記載することで、個別にデザインの調整をすることはできますが、デザインが複雑化してくると書く量が増えたり、毎回調整するのは大変な作業です。

そこで何度も使うような CSS は CSS ファイル上に class 指定で書いておくことで簡略化することができます。

id による CSS を指定することもできますが、何度も使う CSS の場合、管理が難しくなるので class による CSS を推奨しています。

  p{
    font-size: 1.8px ;
    line-height: 2 ;
    padding: 0 .5em ;
  }
  .dan{
    margin-top: 2em ;
  }

  <p>文章</p>

  （ この場所に 2 em 分の空白が作成される ）

  <p class="dan">段落を作りたいときに class 指定する</p>

上記の例では基本的な p タグの CSS には無い、上部の空白を入れる CSS（ .dan ）を作り、class 指定することで任意の場所に空白を追加しています。

class 指定することにより、タグ内にたくさんの CSS を書く必要がなくなります。

class 指定で CSS を作るメリット

ブログデザインの変更は定期的に行う可能性があります。

今、良いと思ったデザインが、次見たときに良いと思えるかわかりませんよね。

そこで class 指定で CSS ファイル上に書いておけば、CSS の変更をするだけで、すべての class 指定したタグにデザインを適用することができます。

タグ内で個別にデザイン調整を行っている場合の デザイン変更作業は、今までの説明を読んできた人なら「 とんでもない時間 」がかかることがわかると思います。

CSS ファイル上に書かれているものであれば、修正に時間はかかりません！

まとめ

ブログなどの Web ページのデザインの変更は CSS を使って変えていきます。

いろいろな CSS の記載方法はありますが、定期的なデザイン変更がある可能性を考えると CSS ファイル上に書いていくことを推奨します。

使い方次第で個別にも調整することができるので、ある程度マスターしておくとデザイン調整がサクサク進むと思います。

また CSS を書く上での注意点も一緒に覚えておくと、うまくデザインが反映されないときの対処などができます。