BloggerでオリジナルHTML5テンプレート作りに挑戦する（02）

BloggerのHTML5テンプレート作りに挑戦するこの企画。第2弾となる今回は、ヘッダーとメニュー周りのデザイン調整を行ないます。テンプレートの完成には程遠いのですが、とりあえずは必要な部分なのでコツコツと作ります。

CSSリセットを組み込む

Bloggerではサーバにファイルをアップロードできないので、CSSファイルを参照することができません。別のサーバにアップロードしたファイルを参照することもできますが、それでは面倒（になると思う）ので、HTMLのheadブロックに直接書き込むことにします。

まず不要な余白などを無効にするために、CSSをリセットします。今回は「html5doctor」の「HTML5 Reset Stylesheet」を利用しました。HTML5向けの「nav」や「article」などもリセットされるので便利です。

/*
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

ヘッダをデザインする

まずはヘッダ部分から手を入れます。CSSとHTMLは以下のような感じです。

CSS

/* ----------------------- Header ----------------------- */
#header-bar{
background: #222;
height:90px;
}
#header-bar h1{
font-size:24px;
line-height:1.5;
color:white;
}
#header-bar h1 a{
color:white;
text-decoration: none;
}
#header-bar h2{
color:gray;
}
#header-center{
position: relative;
width: 980px;
margin: 0 auto;
}
#hg-header{
padding-top:25px;
}

HTML

<header id="header-bar">
<div id="header-center">
<hgroup id="hg-header" role="banner">
<h1><a href="/" title="ブログタイトル">ブログタイトル</a></h1>
<h2>ブログの説明文</h2>
</hgroup>
</div>
</header>

横幅全体に広がるheaderのなかに、幅980pxのdivによるボックスをセンタリングで配置しています。シンプル系デザインのサイトでよく使われていたので、手法を~~パクリ~~参考にしました。

hgroupはhタグを複数まとめるためのものです。メリットをいまひとつ理解していないのですが、なんとなく使ったほうがよさそうだということで利用しています。HTML5的な箇所はそのあたりだけですね。

メニューバーを加える

ul & liによる横並びメニューは従来タイプのものです。HTML5ならではのメニューってあるのでしょうか？　アニメやグラデは必要ないので、シンプルだけど役に立つ的な機能があればいいのですが。

というわけで、CSSとHTMLは以下のような感じ。

CSS

/* ----------------------- Nav Bar ----------------------- */
#nav-bar{
background: #ddd;
width:100%;
}
#nav-center{
position: relative;
width: 980px;
margin: 0 auto;
}
#nav-center ul{
list-style-type: none;
}
#nav-center li{
float: left;
margin-right:5px;
padding:5px;
font-size:13px;
}
#nav-center li a{
text-align: center;
display:block;
width: 100%;
text-decoration:none;
color:#666;
}
#nav-center a:hover{
text-decoration:underline;
color:#ff6600;
}

/* ----------------------- ClearFix ----------------------- */
.clearfix:after {
content: "";
display: block;
clear: both;
}

HTML

float: left;による回り込みの解除には、ごくシンプルなclearfixを使っています。これまでは<div style="clear:both;"></div>的な解除用の要素を使っていましたが、CSSだけでfloatを解除できるので便利ですね。ただし、content:"";のダブルクォーテーションでなにも文字を指定しないとほかのブラウザで正しく動作しないとか、なんとか。とりあえず前に進めて、互換性はあとで検証することにします（ドツボにはまりそうですが）

メニューの位置はヘッダのときと同様、ラッパーを使って調整します。メニューのデザインについてはいろいろ参照しましたが、hoverの際に色が変わってアンダーラインが出てくる程度にとどめました。あくまでもシンプルで。

ここまで書いていて気がついたのですが、ほかに使う予定がなければわざわざnavにidを設定する必要ないですね。前述のheaderも同様かも。とりあえずはそのまま進めます。

フッタを作りこむ

作りこむといっても、ほとんど手を加えていません。センタリングして文字の書式を変えている程度。フッタに要素を盛り込むかどうかは検討中なので、とりあえずこの程度にしておきます。

CSS

#footer-bar{
text-align: center;
color: #666;
font-size:6px;
}

HTML

以上の調整を加えた結果、とりあえずはこんなデザインになりました。

この調子だと、まだまだ先は長いですね。

スポンサードリンク

デジタル小噺

ページ

2012年10月21日日曜日