入門CSS 第1話

2015/09/20 テクノロジー

前回の記事にて、HTMLの基本を抑えました。文書としてHTMLを書けるようになりました。

今回はその文書を美しくする、CSSの基本を紹介します。CSSからはさすがに1つの記事だけで書ききれないため、何回かに分けて解説します。

id と class

まずHTMLに戻ります。先日のHTMLサンプルで<a>タグを見ていただくと、<a href="http://..."> のように、<a>の中にリンク先を指定していました。これはHTMLの表面には出てこないけど、そのタグにより意味を持たせる属性と呼ばれるものです。

このhref属性以外にも重要な属性があります。それが、id属性とclass属性です。

id属性はその要素を一意なものとして表します。つまり、id属性はそのタグがそのHTML文書の中で一つだけであることを示す属性です。つまり、同じid属性はhtml文書の中で一回だけしか登場してはいけません。以下のように記述します。

<div id="contents">
</div>

以上の表記は、”contentsという領域がHTML文書の中に一つだけある” ということを表します。

続いて、classに関してですが、これは一意ではないものの、そのタグを分類するときに利用します。例えばリストの一つ一つなど、似たようなタグに対してclass属性を付与できます。つまり、HTML文書内でclass属性を持つHTML要素は複数あってよいことになります。

<ul>
  <li class="tag">タグ１</li>
  <li class="tag">タグ１</li>
  <li class="tag">タグ１</li>
</ul>

今回も前回記事のHTMLサンプルを利用していきます。

CSSを書くには、別途 style.cssと呼ばれるファイルを用意します。htmlファイルにあるフォルダ内に配置してください。その後、htmlファイルを以下のように記述し、headタグ内でそのstyle.cssを読み込むようにします。

<head>
    <link rel="stylesheet" href="style.css" />
</head>

これでようやくCSSを書くことができるようになります。

先ほど紹介した”id”や”class”をCSSファイル内で利用します。例えば、以下のようなHTMLがあった場合、


<div id="content">
  <p class="paragraph">文章です。</p>
  <p class="paragraph">文章です。</p>
</div>

以下のような指定ができます。#がid, .がクラスを表します。

#content {
  // ここにdivタグのスタイルを指定
}
#content .paragraph {
  // ここにpタグのスタイルを指定
}

このように、#content .paragraphとすると、”idがcontentのHTMLタグの中にある .paragraph要素” というような感じで指定できます。

以降、一気に基本的なCSS属性を挙げていきます。サンプルのhtmlファイルにid属性やclass属性を付けて実験してみてください。

.paragraph {
  color: white;
  font-size: 24px;
  background-color: blue;
  text-align: center;
  width: 200px;
  height: 60px;
}

スタイルサンプル

余白を設定します。borderより中がpaddingの領域、その外がmarginの領域です。

#content {
  padding: 12px;
  border: 1px solid black;
  margin: 12px 48px;
}

divのサンプル

padding: 12px は縦、横それぞれが12pxの余白を表し、 margin: 12px 8px は縦が12px横が8pxの余白を入れることを表します。

今回はひとまずこれまでです。

次回以降、より細かなcssの属性について解説していきます。