基本のテンプレート

基本構造

echo.cssが想定しているHTML構造は、以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>基本のテンプレート | echo.css</title>

    <link rel="stylesheet" href="/css/echo.min.css">
</head>
<body>
<div class="l-document" id="document">

    <header class="p-header" role="banner">
        <div class="l-container">

            ここはサイトのヘッダです

        </div><!-- /.l-container -->
    </header><!-- /.p-header -->

    <main class="p-main" role="main">
        <div class="l-container">

            こんにちは世界!

        </div><!-- /.l-container -->
    </main><!-- /.p-main -->

    <footer class="p-footer" role="contentinfo">
        <div class="l-container">

            ここはサイトのフッタです

        </div><!-- /.l-container -->
    </footer><!-- /.p-footer -->

</div><!-- /.l-document -->
</body>
</html>

.l-documentの役割

コンテンツ全体を包括している .l-document #document は、最近の特殊なウェブサイトの演出に必要な、ページ全体の幅の制限を行うと同時に、文字サイズ変更などのユーティリティクラスの優先度を上げる役割を持っています。

.l-containerの役割

.l-containerは名前の通り、コンテンツを適切に画面中央に配置するコンテナタグです。より良いウェブサイトの制作には必須となります。
echo.cssは、コンテナタグの幅は一種類ではありません。ヘッダとフッタは通常の幅のコンテナタグ、本文はスリムなコンテナタグ、といった、変化のあるページを作成できます。

<main class="p-main" role="main">
        <div class="l-container l-container-sm">

            本文の最大幅がスリムになります

        </div><!-- /.l-container -->
    </main><!-- /.p-main -->