自分でブログのデザインを変えたい！HTML と CSS の基本のき！

こんにちは！まだまだ HTML 初心者な HARU（ @HARU ）です。

今回は自分でブログのデザインを変えてみたいけど、難しくてわからないよ～って人向けに HTML と CSS の関係について説明したいと思う。

私がブログのデザイン変更に興味を持ち始めたときはいろいろ情報を見ては試してを繰り返していた。

しかし、そもそも Web ページの構造を理解していなかったため、ただ盲目にソースコードをコピー＆ペーストするだけで何も応用が利かず、知りたい情報がなかったら諦めるという状況だった。

そんな私もある程度は HTML の構造を理解してきた。

それに伴い自分がカスタマイズしたい内容の情報が、ピンポイントでなくてもある程度は自分で変更を模索できるくらいまで成長した。

これは Web ページの理解度が深まったからに間違いない。

これからブログのデザインを変えてみたいって人は、まず Web ページの構造を理解するとカスタマイズをスムーズにやることができると思う。

以下、ブログデザインの変更だけを目的とした理解レベルで説明していきます。

Web ページの全体的な構造

ブログなどの Web ページは HTML という言語を使って構築され CSS でデザインを調整することで人の目で見られる状態になっている。

ブログのデザインを変える上でここだけはまず覚えてもらいたい。

HTML とは

一般的なブログとかの Web ページの要素や構造に使われる言語でブログの核となるもの。

どんなブログもほとんどが HTML を使って構成されている。

Windows で Google Chrome を使っている人は F12 キーを押してみてほしい。

画面が分割されて英語でびっしり書いてある画面が表示されたかと思う。

この画面の文字こそ Web ページを作っている HTML となる。

このブログももちろん HTML を使って構築されており、見た目と PC が読み取るものとは大きな違いがある。

HTML タグとは

例えばある文章をタイトルとするとしよう。

そのとき PC に「 これはタイトルですよ～ 」って認識させるために使うのがタグである。

ただ文字が羅列されているだけでは PC 側もタイトルと認識することはできない。

これは文章を書いた人以外が読んだときに、タイトルなのか、本文なのか認識できないのと同じこと。

  
    〇 <title>タイトルと認識させたい場合 title タグで囲む</title>
    ✕ この文章はタイトルだとしてもタグが無い場合認識されない
  

HTML の基本としてそのものが何かタグで区別する必要がある。

ブログのデザインを変更していく場合、タグを使うことはかなり大事なルールである。

タグの種類について

HTML で使用するタグは無数に存在するが、すべてを覚える必要はまったくない。

最低でも以下のタグはブログを書く上で必要になるので、覚えておいたほうがいいだろう。

必須タグ
h タグ	見出し
p タグ	段落
ul,ol タグ	リスト
a タグ	リンク

とりあえずはブログを書くときは何等かのタグで囲むことは頭に入れておいてほしい。

  
    <title>タイトル</title>
    <h>見出し</h>
    <p>文章</p>
    <p>文章</p>
  

CSS とは

HTML だけの Web ページでは文字や画像が淡々と表示されるだけのものになってしまう。

そこで見た目を調整するために CSS を使うことになる。

要するに HTML に対して命令を出す役割を持っているものになる。

CSS で命令

CSS で文字の大きさや色などデザインの変更をする命令は、HTML タグで囲っているものに対してしかできない。

ということはタグで囲っていない文字に対して CSS を反映させることはできない。

HTML タグの説明でも少し触れたが、相手が何か認識させないと命令が下せないという感じだ。

  
    タイトルの CSS
    title {
      font-size: 2px;
    }

    段落の CSS
    p {
      font-size: 1.6px;
    }
  

  
    〇 <title>文字の大きさは 2 px になる</title>
    〇 <p>文字の大きさは 1.6 px になる</p>
    ✕ タグが無いから文字の大きさに変化はない
  

id と class

id や class は簡単に言えば名前のようなものである。

  
    <p>君は p タグ君だ</p>
    <p class="tokutei">君は p タグ君だけど tokutei 君でもある</p>
  

例えば段落タグ（ p タグ ）全部に反映させるための CSS だった場合 p タグに対しての CSS があればよいが、特定のものに限定した CSS を設定したい場合、id や class を追加することで対応することができる。

  
    段落の CSS
    p {
      font-size: 1.6px;
    }

    class 指定
    .tokutei {
      color: red;
    }
  

  
    <p>文字の大きさは 1.6 px になる</p>
    <p class="tokutei">文字の大きさは 1.6 px で色は 赤 になる</p>
  

id とは

Web ページ内に一つだけしか表示させてはいけないものに使うことができる。

個人的にはブログデザイン変更程度であれば管理が大変になるため、id を新規に設定する必要はないと思っている。

ページ内に絶対一つだけ表示と決まっているものであれば、id を使ったほうがいいのだろうが。

CSS使用例（ id の場合 ）

  
    #example {
      font-size: 1.6px;
    }
  

  
    <p id="example">文字の大きさは 1.6 px になる</p>
  

class とは

Web ページ内にいくつも表示させたいものに使うことができる。

新規でデザインを作りたい場合、今後そのデザインを重複して使いたくなることも考慮すると、class 指定で CSS を作ったほうがいいと思う。

CSS使用例（ class の場合 ）

  
    .example {
      font-size: 1.6px;
    }
  

  
    <p class="example">文字の大きさは 1.6 px になる</p>
  

まとめ

ブログなどの Web ページは、HTML という素体に対して CSS でデザインしていくことで成り立っている。

ブログのデザインを変えるというとボタンを設置したりなど、変化の大きいことをイメージしやすい。

しかしまずは文字の大きさを変えるなど、簡単なところから始めてブログをカスタマイズすることに慣れていこう。