基本のテンプレート

基本構造

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">
    <link rel="stylesheet" href="/plugins/toggle.css">

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="/plugins/toggle.min.js"></script>

</head>
<body>
<div id="echo-document">

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

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

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

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

            こんにちは世界!

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

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

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

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

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

#echo-documentの役割

コンテンツ全体を包括している #echo-document は、文字サイズや背景色を強制的に変更する「ユーティリティクラス」の優先度を上げる役割を持っています。

※body要素にid属性を付与することは推薦しません。
※CSSセレクタにid属性を使用したくない場合は、echo.css内の #echo-document を変更してください。

.echo-containerの役割

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

<div class="example">
    <div class="echo-container echo-container-sm">

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

    </div><!-- /.echo-container -->
</div><!-- /.example -->

接頭辞が echo-p- になっているクラス

.echo-p-header, .echo-p-footer, .echo-p-main の3つのクラスのみ、接頭辞に p- が含まれます。
echo.cssでは、ウェブサイトによって大きくデザインが異なるオブジェクトをprojectレイヤーとして扱っています。projectレイヤーは使用しないか、もしくはスタイルを上書きさせることを前提としているため、ウェブサイトが成立する最低限のスタイルのみ定義しています。

レイヤーについては「レイヤー構造」の解説を参照ください。

ブロックエディタとコンテナタグの干渉

WordPressのGutenbergなど、CMSの「ブロックエディタ」で編集可能にする場合は、本文エリアで .echo-container での幅制限を行わないよう注意してください。画像ブロック・グループブロック等に設定されている「幅広」「全幅」オプションを使用できなくなります。

プラグイン

/plugins/toggle.css/plugins/toggle.min.js は、オーバーレイメニューを開閉するためのプラグインです。jQueryに依存しています。
オーバーレイメニューを使用しない、またはjQueryを使用しない場合は読み込む必要はありません。