独学で極める “Webデザイン”の技と心

第7回 (X)HTML+CSS入門

この記事を読むのに必要な時間:およそ 3 分

CSSの中身

ここで,読み込まれているサンプル用のCSSで何が書かれているのかを見ていきましょう。

詳しくはサンプルCSSファイルをテキストエディタで開き, /* ~ */で囲まれているコメントを参照しながら,sample2.htmlをブラウザで開き,一つ一つのコードがどんな動きをしているか見ていきましょう。

CSSで「見た目」の視覚デザインをどのようにみせるかを定義すると先に書いたとおり,具体的にh1,h2...などの要素に対して,大きさ,色,幅や高さなどを定義していきます。

書き方のルールもとてもシンプルで,どちらかというとCSSは,人間が普通に読んで理解しやすい言語とも言えます。

書き方のルール

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

一つのセレクタに複数のプロパティを与える場合はセミコロンで区切ります。

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

具体例だと,次のようになります。

body {
    padding: 20px;
    font-size: 100%;
}

人間の言葉に置き換えると,次のようになります。

body の
    詰めは 20px で,
    font-size は 100%
です

このように,
セレクタの部分で,どの要素に対してスタイルをあてたいのかを指定し,
プロパティの部分で,どんなスタイルのグループなのかを指定し,
の部分で,スタイルの具体的な値や挙動を指定します。

これらを,(X)HTML文書に出現するあらゆる要素に対して指定することで,指定したとおりに見えるようになります。

これは実際にCSSを書き換えてみるのが一番実感できるので,早速テキストエディタなどを開いて値を書き換えてみてください。サンプルではbodyにwidth(幅)を70%と指定していますが,ここの値を100%に変更してsample2.htmlをもう一度ブラウザで開き,リロードしてみるとbodyの表示幅が変更されていることがひと目でわかります。

もっと読みやすい文章にする

line-heightの値を調節

sample2.htmlそのままでは,行間が詰まっていてとても読みにくい状態です。これはbodyに対してline-height: 1; の指定をしてしまっているためです。すなわち行の高さが文字1つの大きさ分となってしまうので,行間が詰まっている状態です。

本文を読みやすくするため,p要素に対して適切なline-heightの値を設定しましょう。

サンプルファイルではすでにコメントで書いてありますが,仮にp { line-height: 1.6; }と設定して保存し,もう一度sample2.htmlをブラウザで開いてリロードしてみてください。

line-heightに関する参考

見出しをより見出しらしくデザイン

このXHTMLにはh1,h2という2種類の見出しが出現していますが,そのままのスタイルだと文字の大きさにもメリハリがなくて見出しがあまり見出しのように目立ちません。

そこで2種類の見出しを以下のように指定してみます。

/* 見出しレベル1 */
h1 {
    margin-bottom: 0.9em;  /* 下に続く要素(ここでは段落p要素)との距離を指定 */
    padding: 0.2em;  /* 青色の背景に対して詰めがないと,文字と四角い枠がくっついてみづらくなるため,ここで詰めを指定 */
    color: #fff;  /* 文字色を白く */
    background-color: #0261a6;  /* 背景色を青系統に */
    font-size: 140%;  /* 本文と区別をつけるために大きく指定 */
}

/* 見出しレベル2 */
h2 {
    margin-bottom: 0.6em;  /* 下に続く要素(ここでは段落p要素)との距離を指定 */
    padding: 0.3em;  /* ここで詰めを設定していないと,次に指定する下線と文字がくっついてみづらいので適度な値を指定 */
    border-bottom: 1px solid #0261a6;  /* 下線を青系統に */
    font-size: 120%;  /* h1ほど大きすぎず,pよりは大きく */
}

このように指定してCSSを保存し,もう一度sample2.htmlをブラウザで開き,リロードしてください。見た目の変化をすぐに確認できます。

値には正解はありませんが,読みやすい間隔や色などは試行錯誤していく中で自然と身についていきます。今回のサンプルは出現要素がbody,h1,h2,p,aと少ないですが,どんなに高度なWebページであっても多少要素の種類が増えるだけで基本は変わりません。まずは基本の(X)HTML要素を学びながら,CSSを使ってよりよく仕上げる楽しさを実感すると,きっと今後の学習も楽しくなると思います。

仕様書関連リンク

著者プロフィール

山田あかね(やまだあかね;purprin)

エスカフラーチェLLC,デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら,Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス(POOKMARK Airlines)等の Webサービス開発に携わる。2007年1月,エスカフラーチェLLC の設立に参画し,デザイナーとして幅広く活躍中。

URLhttp://purpr.in/blog/