CSSの基本・CSSの構造を簡単に説明

CSSの基本・CSSの構造

下の画像は、デロッパーツール（開発者ツール）の画面です。

左がウェブページで、右がそのページのhtmlです。

Google Chromeは、ブラウザでページを開き、F12（または三点メニュー→その他のツール→デロッパーツール）でデロッパーツールが表示されます。

Safariは、メニューバー→開発メニューのデロッパーツールで表示されます。（メニューバーに開発メニューバーが無い場合は設定→詳細→「メニューバーに“開発”メニューを表示」を選択）

要素とプロパティとプロパティ値

上の画像より

h2 {
    font-size: 25.6px;
    line-height: 25.6px;
}

上のコードの要素

サイズの定義

文字や行間などのサイズは、px、em、%などあります。

x-small、small、medium、largeなどで定義する場合もあります。

CSSを変更する

デロッパーツール（開発者ツール）を使うとページを確認しながら、プロパティやプロパティ値を変更できます。

html 変更前

h2（見出し）のフォントのサイズを42pxに変更

セレクター

要素 { プロパティ : プロパティ値 } をセレクターと言います。

• h2のセレクター
• pのセレクター

h2 {
    font-size: 25.6px;
    line-height: 25.6px;
}
p {
    font-size: 16px;
    line-height: 1.6px;
}

見出し（h2）のフォントサイズが25.6px、行間が25.6pxで、段落（p）のフォントサイズが16px、行間が1.6pxです。

ブログの書き方・見出しの順番

SEO対策のためにも、次の順番でｈタグを使った方がいいようです。

• h1はページのタイトルに使われる（ページに１つだけ）
• h2～h6までを見出しに使う（実際はh5、h6を使うことは殆どない）
• h2の小見出しはh3、h4・・と順番通りに使う（h2の下にh3を飛ばして、h4にしない）