[toc]
実際にCSSでスタイリングしてみよう
今回はただコードを書いてみて、それがどんな風に表示されるのか、これを書いた事でこんな風にWEBページに表示される。ということを意識してただひたすら書いてみて頂きたいと思います。
HTMLファイル（サンプル）
<!DOCTYPE html>
<html>
<head>
<meta charase="utf-8">
<body>
<header id="header">
<h1>Web開発ブログ</h1>
<nav>
<ul>
<li>最新の投稿</li>
<li>アーカイブ</li>
<li>開発者向け</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
<section id="main_section">
<article class="contents">
<header>
<h2>なぜHTML5が次のWEB開発スタンダードであるか
<p>開発プロジェクトまとめチームリーダー Yukyco</p>
</header>
<p>HTML4.01が世の中にはっぴょうされてから、HTML企画の外側で様々なアイデアやシステムが試行錯誤されてきました。結果、複数の団体が「WEBの標準」を目指してアイデアやシステムの営業に躍起になってきました。つまり、HTMLは、基本的な部分では「業界標準」でしたが、求められる装飾や細やかな部分については、機能不足だったといえます。
</p>
<aside>
<p>
スマートフォンのブラウザはパソコンのブラウザよりも意欲的にHTML5の仕様に対応しています。
</p>
</aside>
<p> 機能不足が指摘されていた「装飾」の部分について、HTML5は大きな一歩を踏み出しました。オーディをやムービーをHTMl5の機能だけで実現出来る様拡張し、本来の利用方法とは違った使われ方をしていた様々な要素に対する解決策を打ち出しました。
</p>
<footer>
<p><a href="#"><i>25コメント</i></a>..</p>
</footer>
</article>
</section>
<section id="sidebar">
<nav>
<h3>アーカイブ</h3>
<ul>
<li><a href="">June 2016</a></li>
<li><a href="">May 2016</a></li>
<li><a href="">April 2016</a></li>
<li><a href="">March 2016</a></li>
<li><a href="">February 2016</a></li>
<li><a href="">January 2016</a></li>
</ul>
</nav>
</section>
<footer id="footer">
<p>あなたのWEB講座レッスンワーク＠開発チームリーダー</p>
<nav>
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">About</a></li>
<li><a href="">サービスについて</a></li>
<li><a href="">プライバシーポリシーについて</a></li>
</ul>
</nav>
</footer>
</body>
</html>
CSSファイル（サンプル）
body {
width: 960px;
margin: 15px auto;
font-family: Arial, "MS Trebuchet", sans-serif;
}
.content {
width: 80% !important;
height: 740px;
margin: 20px 20px 0 0;
padding-left: 100px;
padding-top: 30px;
}
p {
margin:0 0 20px 0;
}
p, li {
line-height: 20px;
}
header#header {
width: 100%;
}
/*ヘッダーの幅を定義*/
/*ulリンクのナビゲーション設定*/
header#header nav ul, #footer nav li {
list-style: none;
margin: 0;
padding: 0;
}
#header nav ul li, footer#footer nav ul li {
padding: 0;
margin: 0 20px 0 0;
display: inline;
}
/* メインセクションを左寄せする＋幅を調整 */
section#main_section {
float: left;
width: 74%;
}
section#main_section aside {
float: right;
width: 35%;
margin-left: 5%;
font-size: 20px;
line-height: 40px;
}
/* aside 要素の吹き出し部分を調整*/
/* サイドバーを整列、幅も調整 */
section#sidebar {
float: left;
width: 25%;
}
/*フッターをページ下部に配置させる */
footer#footer {
clear: both;
width: 100%;
display: block;
text-align: center;
}
表示を確認しよう！
CSSは今の状態では、まだ反映されません。 なぜなら、HTMLファイルにリンクさせていないからです。
リンクさせる場合は、<head>タグの中に以下のソースを追記しましょう。
<link rel="stylesheet" href="blogstyle.css" type="text/css" media="screen">
次回、ここで使っているCSSをひとつずつ解説していきます。
続きは次回とさせて頂きます。
ありがとうございました。
