検索
連載

ちょっとサイトをステキにするCSSの基本いまさら聞けないCSS/スタイルシート入門(1)(3/3 ページ)

Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか?(編集部)

PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ |       

CSSの主な「プロパティ」

 CSSにはたくさんのプロパティがあります。本連載ではすべてのプロパティを紹介できませんが、使用頻度が高いものを選んで紹介していきたいと思います。

 CSSによるデザインワークフローは基本的にプロパティに値を設定していくだけです。

 プロパティの値を設定する構文は、以下のようになります。

プロパティ名+:(コロン記号)+値+;(セミコロン記号)
リスト15 プロパティの値を設定する構文

 実際のコードは下記のようになります。

width : 100px ;
リスト16 プロパティの値を設定する例

 こういう感じで各プロパティの値を変更していながら自分の目的とするデザインにまでトライ&エラーを繰り返し近づけていきましょう。

 それでは、すべての膨大なプロパティを解説することはスペース上難しいですが、よく使われるプロパティのいくつかをピックアップして簡単に説明したいと思います。

display

 画面上に表示される場合のスタイルが設定できるプロパティです。

display : none ;
リスト17 displayのコード例(画面上の指定した要素を消すことができる)

margin

 要素の外側のスペーシングを設定するプロパティです。

margin : 10px 5px 2px 8px ;
リスト18 marginのコード例(上に10px、右に5px、下に2px、左に8pxのマージンを設定)

padding

 要素の内側の部分のスペーシングを設定するプロパティです。

padding : 10px ;
リスト19 paddingのコード例 (上、右、下、左のパディングを10pxにする)

background

 画面の背景に色を付けたり、指定した画像を表示させたりするプロパティです。

background-color : #ffff00 ;
リスト20 backgroundのコード例(背景色を黄色に設定する)

color

 文字の色を設定するプロパティです。値にはRGBカラーを16進数で表すで「16進数のRGBカラー」と呼ばれる「#●●●●●●」といった値が主に使われます。そのほかに直接色の名前を指定する「名前付きの色」「機能的なRGBカラー」といった指定方法もあります。

color : #ff0000 ;
リスト21 colorのコード例(文字を赤色に設定する)

width

 HTML要素は「ボックスモデル」という概念の下、Webブラウザに表示されるのですが、そのボックス幅の長さを設定するプロパティです。

width : 100px ;
リスト22 widthのコード例(ボックスの幅を100pxに設定する)

height

 「width」プロパティで説明したボックスの高さを設定するプロパティです。

height : 200px ;
リスト23 heightのコード例(ボックス高さを200pxに設定する)

float

 CSSでレイアウトするうえで非常に重要なプロパティです。このプロパティを使って2段カラムのレイアウトを作ったりします。ボックスを右や左へ浮遊させることができます。

float : right ;
リスト24 floatのコード例(ボックスを右にフロートさせる)

プロパティもたくさんある

 そのほかにも、たくさんのCSSプロパティが存在するのですが、今回はスペースの都合上割愛いたします。

実際にCSSを書いてみよう

 それでは、実際にCSSを書いてみましょう。以下の3つの記述方法があります。

  1. CSSコードの記述場所は外部スタイルシートファイルを用いた「外部参照」による方法
  2. <style>要素内に記述していく「ドキュメントスタイルシート」と呼ばれる内部参照による方法
  3. HTML要素のstyle属性に直接記述していく「インラインスタイル」と呼ばれる方法

 「外部参照」は文字通り「○○○.css」といった拡張子が.cssのファイルを作り、その中にガリガリと書いていく方法です。HTMLファイルとCSSファイルを分けて管理できるので、メンテナンス性に優れます。しかし、ちょこっとしたページを作る場合はCSSを外部ファイル化せず、HTMLファイルのソース内に直接記述していく内部参照による方法が手軽ですし、高速にロードされます。

 ということから今回のサンプルコードに関しては、先で説明した「ドキュメントスタイルシート」を使い、スタイルを内部参照する記述方法で作成していきたいと思います。

手順【1】HTMLファイルを作成

 普段のお気に入りのテキストエディタで、下記のとおりにタイプしていきます。特にお気に入りエディタがない場合は、Windowsに付属している「メモ帳」やMacintoshに付属している「Text Edit」を使っていきましょう。下記コードを入力したら「css1.html」という名前でファイルを保存してください。

<html>
<head>
  <title>CSSの練習-1</title>
</head>
<body>
  <h1>コンテンツタイトル</h1>
  <p>リード文がここにきます。</p>
  <div id="col">
    <p>説明文がここにきます。</p>
  </div>
</body>
</html>
リスト25 サンプルHTMLコード

 そして、保存した「css1.html」という名前のHTMLファイルを選択し、右クリックし[プログラムから開く]から[Internet Explorer]を選びます(Windowsの場合)。そうすると、Internet Explorerが「css1.html」のHTMLファイルを表示するために起動するでしょう(※注意FirefoxSafariといったWeb標準に準拠したWebブラウザを使われている場合は、そちらで確認することをオススメします)。

図5 CSSが適用されていないサンプル
図5 CSSが適用されていないサンプル(画像をクリックすると実際にWebブラウザで表示します)

 ちなみにMacユーザーの場合は、基本的にInternet Explorerはインストールされていないものです。Macの標準WebブラウザであるSafariを使って確認しましょう。

手順【2】CSSコードを記述

 次に、手順【1】で作った「css1.html」ファイルの<head></head>のタグ内にCSSを記述していきます。まず、下記のように<style>タグを記述しましょう。

<style type="text/css">
</style>
リスト26 <head></head>のタグ内に<style>のタグ内にタグを記述

 これで準備完了です。それでは、このタグの中にCSSコードを記述していきましょう。

 <style>要素のtype属性の値を設定していきましょう。type属性の値は「MIMEタイプ」と呼ばれる概念で、Webブラウザとサーバ間でデータ形式を指定するために必要です。初心者の方は取りあえず「text/css」に設定するということを覚えておけば間違いなしです。MIMEタイプに関してもっと詳しく知りたい方は、IANAのサイトをご覧ください。

h1 {
  font-size: 30px;
  color: #ff0000;
}
p {
  color: #0000ff;
}
#col p {
  color: #ffffff;
}
#col {
  background-color: #333333;
}
リスト27 サンプルのCSSコード

手順【3】Webブラウザで表示を確認してみよう

 それでは、お使いのWebブラウザでCSSが適用されているかを確認してみましょう。下記3つのチェックポイントを満たしていれば、OKです。

  1. 「コンテンツタイトル」という文字が赤色(#ff0000)で文字がほかより大きめに表示されているか?
  2. 「リード文がここにきます。」という文字が青色(#0000ff)になっているか?
  3. 「説明文がここにきます。」という文字が白色(#ffffff)で、背景の色が濃い灰色(#333333)になっているか?
図6 CSSが適用されたサンプル
図6 CSSが適用されたサンプル(画像をクリックすると実際にWebブラウザで表示します)

実際に手を動かしコーディングして、確認しよう

 今回は連載第1回ということで、CSSの基礎の中でも特に押さえておきたいことを解説しましたが、いかがでしたでしょうか。最後に作成したサンプルの完成ファイルは下記からダウンロードできます。実際に手を動かし、コーディングしてみて実際の挙動を確認してみてください。

 次回は、XHTMLの基本として、HTMLとXHTMLは何が違うのかについて説明し、文書構造に応じタグを使い分けたり、ID・クラス名を追加したり、文法にエラーがないかチェックする方法などを解説する予定です。次回もお楽しみに!

筆者紹介

タグパンダ代表取締役

喜安 亮介

1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。



前のページへ |       

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る