ページ構造のサンプル
header
、nav
、footer
要素を特定の方法で記述することで、このページのようにスタイルされます。たとえば、以下のサンプルコードのようにHTMLを組むことでロゴやナビゲーション、フッターを設置できます。
サンプルコード
<body>
<header>
<a href="index.html"><img src="img/kawacss-logo.svg" width="240" height="72" alt="kawa.css" class="logo"></a>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
...
</ul>
</nav>
<main>
ボディコンテンツ
</main>
<footer>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
...
</ul>
</nav>
<p>Created by <a href="https://rriver.dev/">Ryo Watanabe</a></p>
</footer>
</body>