このページの本文へ

CSSでスマートフォンでも見やすくスタイリング (4/4)

2012年07月02日 11時00分更新

文●菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

フッターの指定

 最後に、フッター部分を指定します。フッターは画面の横幅いっぱいに表示したいので幅の指定はせず、背景画像と文字色を設定して見栄えを整えます。

サンプル4[CSS:style.css]


footer {
color : white;
text-align : center;
padding : 24px 0;
background : url(../images/footer_bg.png)}

 サンプル4の指定を反映した画面が下の図です。

2-4-zu08.png

指定したフッター

 以上で、スマートフォンなどの小さなスクリーン向けである、幅320px用のCSSが完成しました。

 最後に、ここまでのCSSをまとめて示します。

サンプル4[CSS:style.css]


@charset "utf-8";
/* @group Reset */
*{ margin: 0;padding: 0}
a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : top}
/* @end */
/* @group Fluid-img */
img { max-width : 100%}
/* @end */
/* @group HTML */
html {
font-family : verdana, sans-serif;
font-size : 100%;
line-height : 1.5;
background :
}
/* @end */
/* @group Heading */
h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
h1 {
font-size : 48px; 
line-height : 1} /* 48px */
h2 {
font-size : 36px;
line-height : 1.3333} /* 48px */
h3 {
font-size : 24px;
line-height : 1} /* 24px */
hgroup h2,h4,h5,h6 {
font-size : 16px; /* 16px */
line-height : 1.5} /* 24px */
/* @end */
/* @group Header */
header { text-align : center; padding-top : 24px}
header h1 { margin-bottom : 24px}
header h2 { color : #62240b}
/* @end */
/* @group Nav */
nav {
margin-bottom : 24px;
background-color: #7D4934;
background: -moz-linear-gradient(top, rgba(81,24,8,0.71) 0%, rgba(91,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,24,8,0.71)), color-stop(100%,rgba(91,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* W3C */
}
nav ul { overflow : hidden}
nav ul li { width : 25%; float : left}
nav ul li a {
display : block;
color : #d8c2a4;
padding : 12px 0}
nav ul li a:hover {
color : white;
background-color : #7d4934}
/* @end */
/* @group Contents */
#contents {
width : 90%;
margin : 0 auto;
text-align : center}
#contents p { 
margin-bottom : 24px;
text-align : left}
#contents img { 
margin-bottom : 24px; 
box-shadow : 0 0 12px #000;}
/* @end */
/* @group Footer */
footer {
padding : 24px 0;
color : white;
text-align : center;
background : url(../images/footer_bg.png)}
/* @end */

 サンプル5を反映した「枝豆隊」を幅320pxのブラウザーで表示すると、次のようになります。

2-4-zu09.png

幅320pxの「枝豆隊」完成画面

 次回は、このページを他のスクリーンサイズでも見やすく表示されるように、メディアクエリーでCSSを追加していきます。

著者:菊池 崇(きくち・たかし)

著者近影

Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。

前へ 1 2 3 4 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています