project-header

p-header

ドキュメント内で、ロゴ等が含まれる、サイトヘッダとして扱うべきコンテンツ群を包括する。
プロジェクトごとにスタイルが上書きされることを前提としているため、このフレームワークでは一般に考えられる最低限の要素のみ定義する。
breakpoint が lg 以上でスマートフォン用メニューボタンが非表示となり、ナビゲーションが表示される。

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

            <h1 class="p-header-title"><a href="#"><img src="../images/_dummy/logo.svg" width="182" height="36" alt="サイトロゴ"></a></h1>

            <div class="p-header-nav" role="navigation">
                <nav class="m-nav">
                    <ul class="m-nav-list">
                        <li class="m-nav-item">
                            <a href="#" class="m-nav-label is-current">ホーム</a>
                        </li>
                        <li class="m-nav-item">
                            <a href="#" class="m-nav-label">サービス紹介</a>
                        </li>
                        <li class="m-nav-item">
                            <a href="#" class="m-nav-label">品質へのこだわり</a>
                        </li>
                        <li class="m-nav-item">
                            <a href="#" class="m-nav-label">私たちについて</a>
                        </li>
                        <li class="m-nav-item">
                            <a href="#" class="m-nav-label">ブログ</a>
                        </li>
                    </ul><!-- /.m-nav-list -->
                </nav><!-- /.m-nav -->
            </div><!-- /.p-header-nav -->

            <div class="p-header-btn">
                <ul class="m-list m-list-horizontal">
                    <li class="m-list-item">
                        <a href="#" class="m-btn m-btn-gray m-btn-round">
                            <i class="fas fa-envelope u-text-lg"></i><span class="u-sr">お問い合わせ</span>
                        </a><!-- /.m-btn -->
                    </li><!-- /.m-list-item -->
                    <li class="m-list-item">
                        <a href="#" class="m-btn m-btn-gray m-btn-round">
                            <span class="m-text">
                                <i class="fas fa-phone"></i><span class="u-sr">電話をかける</span>
                            </span>
                        </a><!-- /.m-btn -->
                    </li><!-- /.m-list-item -->
                </ul><!-- /.m-list -->
            </div><!-- /.p-header-btn -->

            <div class="p-header-menu">
                <button class="m-toggle" aria-expanded="false" aria-label="Menu"><span class="m-toggle-line"></span><span class="u-sr">メニュー</span></button>
            </div><!-- /.p-header-menu -->

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