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

2019/09/05

HTML ブログ ブログカスタマイズ

t f B! P L

こんにちは HARU( @HARU )です。

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

ブログのデザイン変更も基本的な HTML を知るところから始めたほうが、応用も効くし自分である程度模索してデザインを変更していくことができるようになるというメリットがある。

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

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

慣れてしまえば簡単なので是非ここで覚えてもらいたい。

CSS を書く場所

CSS を書く場所は3つあるが、自分でブログのデザイン変更をするというときは1つ目と2つ目を多用していくことになると思う。

CSS の書き方
  1. CSS ファイル
  2. HTML タグの中
  3. HTML に Style タグを使う

CSS ファイルに書く

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

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

CSS ファイルで書く場合セレクタ、プロパティ、値の3つを記述する。

  
    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 タグで囲んで設置する形になる。

  
    <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 の使い分け例

3種類の 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;
    }
    <p style="color:blue">文章は青になる</p>
  

CSS で p タグの色を赤に指定、Style で p タグの色を黒に指定、タグの中で青を指定する。

CSS が適用される優先順位的に p タグの色は青色になる。

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

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

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

例では同じ Style タグを使って違う色を指定している。

HTML 上にて下に書かれている Style が優先されるため p タグ内は青色になる。

class を使って CSS を指定する

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

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

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

  
    p{
      font-size:1.8rem ;
      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 を変更することは、今までの説明を読んできた人ならとんでもない時間がかかることがわかると思う。

CSS ファイル上に書かれているものの修正ならば時間はかからないだろう。

まとめ

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

いろいろな CSS の記載方法はあるがデザインの調整等のことを考えると CSS ファイル上に書いていくことが推奨される。

使い方次第で個別にも調整することができるので、ある程度マスターしておくとデザイン調整がサクサク進むと思う。また CSS を書く上での注意点も一緒に覚えておくと、うまくデザインが反映されないときの対処などができる。

QooQ