echo-p-header
ドキュメント内で、ロゴ等が含まれる、サイトヘッダとして扱うべきコンテンツ群を包括する。
プロジェクトごとにスタイルが上書きされることを前提としているため、echo.cssでは最低限の要素とスタイルにとどめている。
breakpoint
が lg
以上でスマートフォン用メニューボタンが非表示となり、ナビゲーションが表示される。
<header class="echo-p-header" role="banner">
<div class="echo-container">
<div class="echo-p-header-contents">
<h1 class="echo-p-header-title"><a href="#"><img src="../images/_dummy/logo.svg" width="182" height="36" alt="サイトロゴ"></a></h1>
<div class="echo-p-header-nav" role="navigation">
<nav class="echo-nav">
<ul class="echo-nav-list">
<li class="echo-nav-item">
<a href="#" class="echo-nav-label is-current">ホーム</a>
</li>
<li class="echo-nav-item">
<a href="#" class="echo-nav-label">サービス紹介</a>
</li>
<li class="echo-nav-item">
<a href="#" class="echo-nav-label">品質へのこだわり</a>
</li>
<li class="echo-nav-item">
<a href="#" class="echo-nav-label">私たちについて</a>
</li>
<li class="echo-nav-item">
<a href="#" class="echo-nav-label">ブログ</a>
</li>
</ul><!-- /.echo-nav-list -->
</nav><!-- /.echo-nav -->
</div><!-- /.echo-p-header-nav -->
<div class="echo-p-header-button">
<ul class="echo-list echo-list-horizontal">
<li class="echo-list-item">
<a href="#" class="echo-button echo-button-style-a echo-button-circle">
<i class="fas fa-envelope"></i><span class="echo-sr">お問い合わせ</span>
</a><!-- /.echo-button -->
</li><!-- /.echo-list-item -->
<li class="echo-list-item">
<a href="#" class="echo-button echo-button-style-a echo-button-circle">
<i class="fas fa-phone"></i><span class="echo-sr">電話をかける</span>
</a><!-- /.echo-button -->
</li><!-- /.echo-list-item -->
</ul><!-- /.echo-list -->
</div><!-- /.echo-p-header-button -->
<div class="echo-p-header-menu">
<button class="echo-toggle" aria-expanded="false" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>
</div><!-- /.echo-p-header-menu -->
</div><!-- /.echo-p-header-contents -->
</div><!-- /.echo-container -->
</header><!-- /.echo-p-header -->