カテゴリー
HTML

HTML(Step3-2)

レイアウトを決めるCSSのルール

最近のホームページでは、基本の構成をHTMLで作成し、見た目や色などのデザイン部分を設定する方法が一般的になっています。

CSSが必要な理由

Cascading Style Sheets(CSS)は、ホームページのデザイン的な設定を記述するためにあります。例えば、背景の色、画像と文字の間隔、見出しと本文の間隔、文字の色や大きさなどのホームページの見え方「スタイル」を定義しています。

複数のスタイルなどを一括管理

現在作っているページはトップページ、メニューページ、アクセスページと3つのHTMLファイルがありますが、CSSファイルは「style.css」の1つだけで大丈夫です。このファイル1つで、全てのページの変更を行うことができ、非常に便利です。

細かなデザイン、レイアウトが可能

CSSを使うと、文字の間隔や画像の配置などをピクセル単位で決めることができます。HTMLでは不可能だったものも可能になります。

検索エンジン最適化(SEO)がやりやすい

レイアウト部分を全てCSSにすることで、HTMLファイル内の記述は簡潔になります。そのため、検索エンジンには文書の内容を理解させやすいので、SearchEngineOptimization(SEO)への効果が見込めます。

CSSとHTMLの関係性

HTMLとCSSの内容を見ながら、CSSで可能な設定を確認してみましょう。

サンプルページのHTMLとCSSを見比べ

「index.html」を開いて以下の各コードを確認してみましょう。

<div id=”wrapper”>タグとCSSの関係

このタグ内のコンテンツは960ピクセルの幅に設定しようと記述しました。

<body>
     <div id="wrapper">
     <!--全てのコンテンツを記述-->
     </div>
</body>

CSSのソースコードでは以下のように記述します。「”wrapper”」と定義されたものの横幅を960ピクセルに、上下のマージンを0にして、左右のマージンは自動になるように書かれています。

#wrapper{
    width: 960px;
    margin: 0 auto;
	}
<h1>おすすめ情報</h1>タグとCSSの関係

文頭に赤いラインのアクセントが入る「おすすめ情報」という見出しも、CSSで定義します。

<div id="global_info">
            <h1>おすすめ情報</h1>

CSSのソースコードでは以下のように記述します。

  1. 「global_info」内の「h1」は
  2. フォントのサイズを125％にし、
  3. 左側に10ピクセルのべた塗りの赤い境界線を入れ、
  4. 文字から10ピクセル離す
  5. 次の行とは15ピクセル離す
#global_info h1{
    font-size: 125%;
    border-left: 10px #d95483 solid;
    padding-left: 10px;
    margin-bottom: 15px;
　　　　}
<img src=””>タグとCSSの関係

「おすすめ情報」内に配置している2枚の写真のフレームは白い枠になっています。これはCSSで付けています。

<div id="global_info">
            <h1>おすすめ情報</h1>
            <div class="info_photo01">
                <img src="images/thumbnail01.png" alt="Hair of the Dog Brewing Company" width="300" height="224">
            </div>

CSSのソースコードでは以下のように記述します。「global_info」内に「img」で配置した画像には幅が5ピクセルの白い境界線を付けるという意味になります。

#global_info img{
	border: 5px #fff solid;
	}

CSSの基本記述

CSS記述のルール

CSSを記述する場合の基本は、HTMLで記述した要素に対して、スタイルをルールに基づいて指定します。基本的には「セレクタ」「プロパティ」「値」の3つを組み合わせます。その際には、「#」「{}」「:」「;」などで区切るというルールがあります。

セレクタ{プロパティ:値;}

HTMLファイル内の<h1>要素に色を付けたい場合は、以下のように記述します。

  • HTMLソース
<h1>青い見出しの文字</h1>
  • CSSソース
h1{color:blue;}

この場合、h1=セレクタ、color＝プロパティ、blue=値となり、HTMLファイル内の<h1>要素がすべて青色になります。

また、複数のプロパティを定義することもあります。

セレクタ{プロパティ:値; プロパティ:値; …}

先ほどの「#wrapper」がそれにあたります。

#wrapper{width:960px; margin:0 auto;}

1つのセレクタに「width」と「margin」というプロパティを記述しています。

それ以外にも複数のセレクタに同じスタイルを定義することもできます。

セレクタを「,」で区切って、複数個記述できます。

  • HTMLソース
<h1>青い見出しの文字</h1>
<h2>青い見出しの小文字</h2>
  • CSSソース
h1,h2{color:blue;}

このように記述することで、<h1><h2>に対して同じスタイルを設定できます。

「セレクタ」の種類

「セレクタ」にはいくつか種類があるので、使い分けて記述する必要があります。「基本的なセレクタ」「クラスセレクタ」「IDセレクタ」などについて説明します。

基本的なセレクタ

セレクタの前に「#」「.」などがついていないセレクタのことをいいます。HTML内に記述された複数ある指定要素に対し同じスタイルを使う場合に使用します。

  • HTMLソース
<h1>青い見出し</h1>
<h1>赤い見出しにしたい</h1>
  • CSSソース
h1{
   color:blue;
   }

この場合は、HTMLファイルのすべての<h1>要素が青になるように記述されています。

クラスセレクタ

同じセレクタに対し、複数の異なるスタイルを適用したい場合は、先頭に「.」（半角ピリオド）を付けた「クラスセレクタ」を記述します。「クラスセレクタ」に対応したタグをHTMLに記述する場合、タグの後に「class=””」を記述し、「””」内に「クラスセレクタ名」を記述しましょう。

  • HTMLソース
<h1 class="blue">青い見出し</h1>
<h1 class="red">赤い見出しにしたい</h1>
  • CSSソース
.blue{
      color:blue;
      }
.red{
      color:red;
     }

このように同じ<h1>タグでくくられていてもクラスセレクタを使って個別にデザインを変更することができます。

IDセレクタ

先頭に「#」がついたセレクタは、「IDセレクタ」と言われます。これは、ページ内の同名のセレクタを1か所だけ使えるセレクタになります。「index.html」内では、「wrapper」や「global_info」などがこれにあたります。

  • HTMLソース
<h1 class="blue">青い見出し１</h1>
<h1 id="red">赤い見出しにしたい</h1>
<h1 class="blue">青い見出し２</h1>
  • CSSソース
.blue{
      color:blue;
      }
#red{
     color:red;
     }

このように一回のみ使うとき「IDクラスタ」を使っていきましょう。そのために、しっかりとホームページの構造を先に練っておくことが重要です。

疑似セレクタ

「疑似クラス」というのは、HTMLで記述された「要素」が特定の状態になったら、別途定義したスタイルを適用するためのクラスになります。

例えば、ホームページに文字にリンク先を設定する場合です。リンク文字が薄い青色になっており、マウスが文字上に重なると濃い青色になるといった時です。

このような場合は以下のように記述します。

  • HTMLソース
<a href="index.html">Portlander</a>
  • CSSソース
a{
    color:blue
  }
a:hover{
          color:red
        }

<a href=~></a>タグで囲んだリンク文字（a要素）に対して定義しています。「a」は「基本的なセレクタ」になるので、a要素はすべて同じように適用されます。また、「a:hover」はマウスカーソルを重ねた状態を示す「疑似クラス名」になります。

要素名:疑似クラス名{プロパティ:値;}

a要素に追記できる疑似クラスは他に以下のようなものがあります。

  • a:link…リンク先のサイトが未訪問の場合の状況を示します。
  • a:visited…リンク先のサイトに過去にアクセスしたことがある場合の状況を示します。
  • a:active…クリック中の状況を示します。

子孫セレクタ

特定の要素に内包される子や孫の要素に対して、指定したスタイルを適用させます。

要素名 子要素名{プロパティ:値;}

例えば、<header>タグ内にあるp要素のスタイルを変えたい場合です。これを行うと<header>タグ外のp要素には適用されません。

  • HTMLソース
<header>
        <p>ポートランドのお洒落なレストラン</p>
</header>
  • CSSソース
header p{
            font: size 125%;
            font-weight: bold;
            color:blue;
            text-align: center;
        }

上記の場合、ヘッダー内のp要素に対し、文字の大きさを125％に拡大、太文字に色を青、文字はセンターに配置すると指定しています。

以上が各セレクタの簡単なルールになります。次からは、実際にCSSファイルを構築しながら進めていきましょう。