HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ）

Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。

» 2013年02月26日 18時00分公開

[内田　順一，Chime of Shigan]

　Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。

　であるならば……、CSS自体を覚えてしまうというのも1つの手ではないしょうか。実は、限られたCSSのテクニックだけで、数多くのレイアウトを組めます。中でも、ヘッダなどのメニューには、さまざまな配列でボタンを並べられ、レイアウトのエッセンスがたくさん詰まっています。ここを自在に作れるようになるだけで、ページ全体のレイアウトまで作れるようになります。

　また、レイアウト後に加えていく、色指定などの装飾部分については、現在はCSSジェネレータが充実していますから、そこからデザインやコードを拝借することで、見栄えのするビジュアルを手軽に作成できるでしょう。

　ご存じのとおり、CSSもレベル3（CSS3）になってからグラデーションや角丸、ドロップシャドウなどがテキストによる指定で実現可能になりました。これにより、Photoshopなどの画像処理ソフトを使わなくても、表現できる幅が広がっています。本連載では、デザイナーである筆者の視点から、あまり手数を掛けずに誰でも“にわかデザイナー”になれる簡単TIPSをお伝えしていきます。

HTML5でベースを用意する

　さて、まずはHTML5とCSS3の基本から始めます。初めにHTMLファイルを用意します。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ページタイトル名</title>
<!-- IE8以下のための要素認識JS -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 新要素のブロック要素への変換 -->
<link rel="stylesheet" href="css/html5.css">
<!-- スタイル設定 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

　これがベースとなります。しかし、HTML5はInternet Explorer 8以下には対応していないので、これらのブラウザでも問題なく表示されるよう対処しておく必要があります。それが<head>内の「html5shiv.js」と「html5.css」になります。

　html5shiv.jsは、<header>や<section>などのHTML5の新しい要素を認識させるポリフィルなライブラリで、こちらから入手できます。

　また、html5.cssは新しい要素をブロック要素化するもので、以下のように記述してCSSファイルとして自分で用意しておきます。

@charset "UTF-8";
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display:block;
	}

　ちなみに、ブロック要素とは、簡単に言うと、ブラウザでの表示上、ボックスのような振る舞いをするタグです。例えば、リンクを指定する<a>タグなどの場合は、

<a href="#">リンク名1</a><a href="#">リンク名2</a>

　と続けて記述すると、ブラウザでの表示もそのまま「リンク名1リンク名2」と連続する形になります。こうしたタグは1行の中に続けて表示されるので「インライン要素」と呼ばれます。

　一方、見出しを指定する<h1>タグなどの場合は、

<h1>見出し1</h1><h1>見出し2</h1>

　と続けて記述すると、ブラウザでは「見出し1」と「見出し2」は改行されて表示されます。これは<h1>タグが横一段をボックスのように専有するためで、こうしたタグは「ブロック要素」と呼ばれます。

　HTML5ではブロック要素／インライン要素という分類はなくなったのですが、例えば新要素の<header>タグは、ブラウザによってブロック要素として扱われたり、インライン要素として扱われたり、その対応はまちまちとなっています。つまり、「html5.css」はブラウザ間で異なる「新しい要素の扱い」を統一するためにあるわけです。

　そして<head>内の最後の「style.css」で、レイアウトや装飾を施していきます。取りあえず、この時点では空のファイルを用意しておきます。

　　　　　　 1|2|3 次のページへ