WordPress テーマ自作への道のり vol.3—style.css 編

photo credit: Arkonova via photopin cc
photo credit: Arkonova via photopin cc

前回は Web ページとして表示させたい内容を、HTML5 を使って index.html ファイルに書きました。今回はスタイルシートと呼ばれる style.css ファイルを新たに用意し、index.html に書いた HTML の骨組みをスタイリングしていきます。

WordPress テーマ自作への道のり

今回の目次

  1. 作成するファイル
  2. HTML ファイルへの読み込み
  3. 文字コードの指定
  4. スタイルのリセットまたはノーマライズ
  5. フロートで2カラムに
  6. 基本要素のスタイリング
    1. 文字色と背景色
    2. フォント関係
    3. リンク
    4. その他もろもろ
  7. 繰り返し使うパターンの設定
  8. スタイル後のイメージ

作成するファイル

前回 index.html ファイルを作成したのと同じ場所(フォルダ)に、style.css の名前で新規ファイルを作ります。ここでも文字コードは UTF-8 にしています。

style.css はファイルの拡張子が示す通り、CSS という言語で記述していきます。HTML が文書の構造(特に HTML5 は文書のアウトライン)を記述するのに対し、CSS は見た目の装飾を担います。

HTML ファイルへの読み込み

style.css ファイルを作ったら、これを読み込むための記述を index.html ファイルに書きます。この記述をしないと、index.html を表示しても、スタイルシートに書いてある内容が反映されません。

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

<link> はファイルを関連付けるための要素で、rel 属性にファイルの種類を、href 属性にファイルのパスを記述します。今回は index.htmlstyle.css が同じ階層(フォルダ)にあるので、ファイル名だけを書いています。

<link rel="stylesheet" href="style.css" type="text/css">type 属性まで指定することもできますが、HTML5 では type="text/css" の場合は省略可能です。

コードを挿入する場所は、index.html<head>・・・</head> 部。前回の記事に出てきましたが、ページそのものの情報を書く場所ですねー。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>タイトル</title>
  <link rel="stylesheet" href="style.css">
</head>

文字コードの指定

index.html には前回、文字コードが UTF-8 であることを示すための記述をしました(<meta charset="utf-8">)。今回の style.css も文字コードは揃えてあります。もし違う場合は、style.css の1行目で文字コードを指定します。

@charset "文字コード";

スタイルのリセットまたはノーマライズ

ブラウザはそれぞれデフォルトスタイルシートというものを持っていて、見出しの大きさやブロック要素のマージン、リストの表示方法などを定めています。

これをいったんすべて無しにして、ゼロから自分で定義し直すのが「リセット」、ブラウザごとの差異やバグに対して必要最低限の修正を施すのが 「ノーマライズ」です。

個人的には「ノーマライズ」の方が扱いやすく感じます。もともとあるもの(デフォルトスタイルシート)を利用しながら、自分が変えたいところだけ、スタイルを付け加えていく感覚です。

ノーマライズ用のコードは次のページで公開されています。コードの全文、あるいは必要なところだけをコピーして、自分の style.css に貼り付けます。英語ではありますがコード内にコメントが書かれているので、それぞれのコードがどんな意味を持っているのかが理解しやすいです。

参考記事:

フロートで2カラムに

続いてスタイルシートを書いていきます。ここでも細部のデザインは後にして、まずはページ全体の構成を作ります。

index.html に書いた HTML は次のような骨組みになっていました。

<body>
  <div id="container">
    <header>
    ・・・ヘッダー・・・
    </header>

    <div id="main">
    ・・・メインコンテンツ・・・
    </div><!-- #main -->

    <div id="sidebar">
    ・・・サイドバー・・・
    </div><!-- #sidebar -->

    <footer>
    ・・・フッター・・・
    </footer>
  </div><!-- #container -->
</body>

これに対して、style.css にはたとえばこんな風に書きます。

#container {
  margin: 0 auto;
  width: 940px;
}

#main {
  float: left;
  width: 640px;
}

#sidebar {
  float: right;
  width: 260px;
}

footer {
  clear: both;
}

初めに #container にページ全体の横幅を指定します(width: 940px;)。margin: 0 auto; の記述で、マージン(外側の余白)を上下はゼロに、左右は自動にして、ページをセンタリングします。

次に、メインコンテンツが入る #main と、サイドバーになる #sidebar にそれぞれ横幅を指定。フロートで横並びにします。

そして footerclear: both; を指定し、フッターでフロートを解除します。

基本要素のスタイリング

簡単にページ組みを済ませた後は、基本的な HTML 要素のスタイルを決めていきます。

文字色と背景色

ページ全体の文字色と背景色を body 要素に設定します。文字色は color プロパティで、背景色は background プロパティや background-color プロパティで指定します。

body {
  background: #f7f7f7;
  color: #333;
}

これは背景色を白(#fff)から若干グレー寄りに、文字色も黒(#000)から少しグレー寄りにした例です。完全な白と黒の組み合わせだとコントラスト比が高すぎて、目が疲れます。画像で比較すると違いが分かると思います。

色を指定するためのカラーコードについて調べるには、次のサイトが便利です。

  • Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!

    背景色と文字色のカラーコードを入力するとリアルタイルでプレビューできるサイト。コントラスト比も確認できます。

  • Color Hex – ColorHexa.com

    カラーコードを入力してその色に関するさまざまな情報を調べられるサイト。類似色や補色、明度違いのカラーも表示してくれます。グラデーションのコードを生成する機能もあります。

  • Flat UI Colors

    こちらはフラットデザインに合ったカラーの見本が紹介されているサイトです。PC からの閲覧なら、クリック1つでカラーコードも取得できます。

他には次の記事もすごく勉強になりました。

フォント関係

フォントサイズはある程度大きい方が見やすいので、自分は 16px をベースにしようかなーと思っています。

ブラウザのデフォルトフォントサイズが大抵 16px なので、これをそのまま利用し、文字の大きさを変化させたい要素には em(親要素のフォントサイズの何倍、と指定する単位)を使うやり方を考えています。

body {
  font-size: 100%; /* 16px x 100% = 16px */
}

h1 {
  font-size: 2em; /* 16px x 2 = 32px */
}

フォントサイズを指定する方法は他にも px、%、rem といろいろあります。

参考記事:

フォントの書体は <body> 要素に font-family プロパティで指定します。

body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

Mac や iOS 用の英文フォントとして、読みやすく洗練された書体の Avenir Next を指定し、日本語はヒラギノ角ゴシックに。Windows 用にメイリオを追加しました。最後に書いてある sans-serif は、それらのフォントが OS に入っていなかった場合に OS デフォルトのゴシック体を使う、という指定です。

font プロパティを使うとフォントサイズやフォントファミリー、行の高さ(line-height)を合わせて1行で書くことができます(この例では line-height を 1.6 に設定)。

body {
  font: 100%/1.6 "Avenir Next", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

他には、URL などの長い英単語が改行なしで表示されてしまうのを防ぐため、次の指定をしておくといいです。

body {
  word-wrap: break-word;
}

ここまで書いてきた内容を、すべてまとめると次のようになりますね。

body {
  background: #f7f7f7;
  color: #333;
  font: 100%/1.6 "Avenir Next", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  word-wrap: break-word;
}

リンク

リンクに関するスタイルは <a> 要素に指定します。デフォルトの下線を非表示にして、その代わりにボーダーで下に 1px の破線を付けるケースだとこんな感じです。

a {
  border-bottom: 1px dashed;
  color: #36c;
  text-decoration: none;
}

<a> 要素に対して一括で指定したスタイルを、リンクのホバー時やクリック時のみ上書きすることもできます。

a {
  border-bottom: 1px dashed;
  color: #36c;
  text-decoration: none;
}

/* ホバー時 */
a:hover {
  border-bottom-style: solid;
  color: #c36;
}

/* クリック時 */
a:active {
  left: 1px;
  position: relative;
  top: 1px;
}

こうするとホバー時にリンクの色が変化し、下線のスタイルも破線から通常の実線に変わります。クリック時にはリンク部分が右下に縦横 1px ずつ動いて、ユーザに「押した感」が伝わります。

その他もろもろ

他にも自分が使う可能性があって、ブラウザのデフォルトスタイルから変更したい要素については最初にある程度指定しておくといいと思います。

  • <img>・・・画像のボーダーなど
  • <ul>・・・リストを入れ子にした時のスタイル
  • <li>・・・リスト項目の間のマージン
  • <p>・・・段落の間のマージン

繰り返し使うパターンの設定

場所を問わずあちこちで繰り返し使われるパターンについても、最初にスタイルを登録しておくと楽です。

たとえば、画像を挿入した時に位置を指定するために WordPress が出力するクラス。

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

ブロック要素をフロートさせ、周りのレイアウトが崩れた際に対処する Clearfix もあると便利です。

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

スタイル後のイメージ

index.html に、今回作ったスタイルシートの内容を適用したイメージです。

細かいデザインがまだまだですが、ちょっとずつそれらしい見た目になってきました。今後はヘッダー、メインコンテンツ、サイドバーと、パーツごとに作り込んでいきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です