SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CSSで作るWeb用パーツ

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 本記事では、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)

次のページ
backgroundプロパティを使った見出しのCSSデザイン

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
CSSで作るWeb用パーツ連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7681 2014/04/03 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング