基本構造
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を使用しない場合は読み込む必要はありません。