ボトムナビゲーション

コード

<nav class="bottomdock">
    <button class="bottomdock-item">
        <div class="bottomdock-icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm280-80h280v-560H480v560Z"/>
            </svg>
        </div>
        <div class="bottomdock-label">要素一覧</div>
    </button>
    <button class="bottomdock-item">
        <div class="bottomdock-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
                <path d="M120-280v-80h560v80H120Zm0-160v-80h560v80H120Zm0-160v-80h560v80H120Zm680 320q-17 0-28.5-11.5T760-320q0-17 11.5-28.5T800-360q17 0 28.5 11.5T840-320q0 17-11.5 28.5T800-280Zm0-160q-17 0-28.5-11.5T760-480q0-17 11.5-28.5T800-520q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440Zm0-160q-17 0-28.5-11.5T760-640q0-17 11.5-28.5T800-680q17 0 28.5 11.5T840-640q0 17-11.5 28.5T800-600Z"/>
            </svg>
        </div>
        <div class="bottomdock-label">目次</div>
    </button>
    <button class="bottomdock-item">
        <div class="bottomdock-icon">
            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <mask id="mask0_373_9673" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25"
                      height="24">
                    <rect x="0.625" width="24" height="24" fill="#D9D9D9"/>
                </mask>
                <g mask="url(#mask0_373_9673)">
                    <path d="M20.175 20.575L13.875 14.3C13.375 14.7167 12.8 15.0417 12.15 15.275C11.5 15.5083 10.8334 15.625 10.15 15.625C8.43336 15.625 6.98336 15.0333 5.80002 13.85C4.61669 12.6667 4.02502 11.2167 4.02502 9.5C4.02502 7.8 4.61669 6.354 5.80002 5.162C6.98336 3.97067 8.43336 3.375 10.15 3.375C11.85 3.375 13.2917 3.96667 14.475 5.15C15.6584 6.33333 16.25 7.78333 16.25 9.5C16.25 10.2167 16.1334 10.9 15.9 11.55C15.6667 12.2 15.35 12.7667 14.95 13.25L21.225 19.525L20.175 20.575ZM10.15 14.125C11.4334 14.125 12.521 13.675 13.413 12.775C14.3044 11.875 14.75 10.7833 14.75 9.5C14.75 8.21667 14.3044 7.125 13.413 6.225C12.521 5.325 11.4334 4.875 10.15 4.875C8.85002 4.875 7.75436 5.325 6.86302 6.225C5.97102 7.125 5.52502 8.21667 5.52502 9.5C5.52502 10.7833 5.97102 11.875 6.86302 12.775C7.75436 13.675 8.85002 14.125 10.15 14.125Z"
                          fill="#1A1A1A"/>
                </g>
            </svg>
        </div>
        <div class="bottomdock-label">検索</div>
    </button>
    <button class="bottomdock-item">
        <div class="bottomdock-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
                <g clip-path="url(#clip0_115_5315)">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M21.5117 5.64648H3.51172V7.14648H21.5117V5.64648ZM21.5117 11.4463H3.51172V12.9463H21.5117V11.4463ZM3.51172 17.1465H21.5117V18.6465H3.51172V17.1465Z"
                          fill="#1A1A1C"/>
                </g>
                <defs>
                    <clipPath id="clip0_115_5315">
                        <rect width="24" height="24" fill="white" transform="translate(0.511719 0.146484)"/>
                    </clipPath>
                </defs>
            </svg>
        </div>
        <div class="bottomdock-label">メニュー</div>
    </button>
</nav>

目次