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