Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

デザインサンプルで学ぶCSSによるスタイリング~「見出し」編

CSSで作るWeb用パーツ(1)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/04/03 14:00

 本連載では、Webページをデザインする際、具体的にどのようにコーディングすれば良いのか分からない人のために、見出しやリスト、フォームなど、Webページを構成する部品のデザインサンプルを紹介し、CSSによるスタイリング方法を解説します。

目次

はじめに

 本記事では、border関連プロパティやbackground関連プロパティ、擬似要素を使ってCSSで見出しをスタイリングする方法を紹介します。仕組みさえ分かってしまえば、意外と簡単に実装できてしまうので、ぜひ挑戦してみてください。

対象読者

  • (X)HTMLとCSSの基本を理解している方。
  • デザインのコツを学びたい方。

必要な環境

 本連載で動作確認を行ったブラウザは次のとおりです。

  • Windows 7 Internet Explorer 11
  • Windows 7 Firefox 26
  • Windows 7 Chrome 32

見出しのデフォルトスタイルをリセットする

 まずは、今回スタイリングの対象となる見出し要素(h1~h6)のデフォルトスタイルを確認しておきましょう。図1のように、一般的なブラウザでは、h1~h6の見出し要素のテキストは、見出しレベルにより文字サイズが異なり(h1が最も大きく、h6が最も小さい)、太字で表示されます。また、上下にマージンが入ります。

図1:見出しのデフォルトスタイル(default-style.html)
図1:見出しのデフォルトスタイル(default-style.html)

 今回のサンプルでは、h1要素をスタイリングしていきますが、デフォルトスタイルが効いていると毎回同じような記述が増えてしまうため、最初にh1のスタイルを統一します。ここでは、上マージを0、下マージンを30px、文字サイズを130%、文字色を濃いグレー(#333333)、上下パディングを5px、左右パディングを10pxに指定しました。

h1のデフォルトスタイルをリセットする(reset-style.html)
h1 {
  margin: 0 0 30px 0; /* 上マージン0、右マージン0、下マージン30px、左マージン0 */
  font-size: 130%; /* 文字サイズを130% */
  color: #333333; /* 文字色を#333333 */
  padding: 5px 10px; /* 上下パディング5ピクセル、左右パディング10px */
}
図2:h1のデフォルトスタイルをリセットする(sample01.html)
図2:h1のデフォルトスタイルをリセットする(sample01.html)

 さて、ここから、見出しレベルが分かるように、一般的なテキスト(p要素などでマークアップされたもの)よりも目立たせるスタイリングをしていきましょう。

borderプロパティを使った見出しのCSSデザイン

 まずは、図3を見てください。これらは、見出しをborder関連プロパティとbackground-colorプロパティでスタイリングしたもので、上から下にいくにつれて装飾が増え、下にいくほど目立つデザインになっています。

図3:border/background-colorプロパティによる見出しのデザインサンプル(sample01.html)
図3:border/background-colorプロパティによる見出しのデザインサンプル(sample01.html)

左側にアイコン的な四角形を引く

 サンプル1には、左側にアイコン的な四角形がありますが、これは見出しでよく利用されているスタイリングの一つです。左側の四角形は、border-leftプロパティで、左ボーダーの線幅を太めに指定して実装しています。ここでは10ピクセル幅の鮮やかなピンク(#CC3366)の実線を引いてみました。

サンプル1/HTML(sample01.html)
<h1 id="sample01">h1要素の見出しサンプル1</h1>
サンプル1/CSS(sample01.html)
#sample01{
  border-left: 10px solid #cc3366; /* 左ボーダーを、10px幅の実線、線色#CC3366に */
}

 図4のように、左ボーダーの四角形の高さは上下パディングで調整します。また左ボーダーとテキストの間隔は左パディングで調整します。この例では、先に指定したpadding: 5px 10pxが効いていて、上下パディング5px、左右パディング10pxになるよう調整しています。

図4:paddingプロパティでテキストとボーダーの間隔を調整する(sample01.html)
図4:paddingプロパティでテキストとボーダーの間隔を調整する(sample01.html)

見出しに線を引く

 続いてサンプル2、サンプル3のスタイリングを見てみましょう。見出しに下線を引くと、ページを視覚的に区切ることができます。特に、テキストの多いページにアクセントを付けたい時に有効なスタイルです。

 サンプル2のスタイリングでは下ボーダーに破線(dashed)を、サンプル3では左ボーダー以外の3辺に実線(solid)を引いています。

サンプル2、サンプル3/HTML(sample01.html)
<h1 id="sample02">h1要素の見出しサンプル2</h1>
<h1 id="sample03">h1要素の見出しサンプル3</h1>
サンプル2、サンプル3/CSS(sample01.html)
#sample02{
  border-left: 10px solid #CC3366;
  border-bottom: 1px dashed #CC3366; /* 下ボーダーを、1px幅の破線、線色#CC3366に */
}
#sample03{
  border: 1px solid #CC3366; /* 4辺のボーダーを、1px幅の実線、線色#CC3366に */
  border-left: 10px solid #CC3366;
}
図5:サンプル2、サンプル3(sample01.html)
図5:サンプル2、サンプル3(sample01.html)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:CSSで作るWeb用パーツ

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5