モダンなHTMLとCSSマークアップ方法

今回はここ数年で実装されたHTMLとCSSの新しい記述方法について載せていきたいと思います。

1 HTML編
2 CSS編

HTML編

アコーディオンメニューをHTMLだけで実装

今まではJSが必須だったアコーディオンメニューの実装もHTMLだけで作ることができるようになりました。
detailsタグとsummaryタグを使います。
実際に作ってみたのでコードを紹介します。

<details>
    <summary>
        <span class="summary_inner">summary<span class="icon"></span></span>
    </summary>
    <div class="content">折りたたまれている部分です。折りたたまれている部分です。</div>
</details>

下記が実際に作ったアコーディオンメニューです。
summaryとなっている部分をクリックしてみてください。↓

summary

折りたたまれている部分です。折りたたまれている部分です。折りたたまれている部分です。

簡易的なアコーディオンメニューならこれで十分ですね。

リンク先を任意のテキスト位置に設定

リンク先URLの末尾に
#:~:text=任意のテキストを入力します。

<a href="https://tiger-rack.co.jp/company/#:~:text=私たちは、企業の永続的な成長が">会社概要「私たちは、企業の永続的な成長が」</a>

実際に下記のリンクから飛んでみてください。

会社概要「私たちは、企業の永続的な成長が」

セレクトメニューのグループ化

optionタグをwrapするoptiongroupタグを使うとセレクトメニュー内でグループ分けすることができ、見やすく選びやすくなります。

<select style="margin-bottom: 20px;">
    <option>商品を選択</option>
    <optgroup label="ラック">
        <option>スチールラック</option>
        <option>パレットラック</option>
        <option>ネスラック</option>
    </optgroup>
    <optgroup label="収納容器">
        <option>パレット</option>
        <option>オリコン</option>
        <option>プラダン</option>
    </optgroup>
</select>

CSS編

ネスト

SCSSで使っていたネストですが、CSSでも利用できるようになりました。

.hoge{
	&__item{}
}

のような親のクラス名を引き継ぐネストはできません。
上記の記法、私はSCSSでよく使っているのですが、コード検索が手間、構造修正がし辛いという理由で最近は使わないようにしてる人も多いみたいです。

.hoge{
	.hoge__item{}
}

この記法はOKです。

変数

変数も使用できるようになりました。
:rootで変数を指定することで、SCSSと同様に使用できます。

:root {
    --main-color: #2E4374;
    --font-color: #E5C3A6;
}

.hoge{
    padding: 12px;
    max-width: 200px;
    margin: 0 auto;
    background-color: var(--main-color);
    .hoge__txt{
        color: var(--font-color);
    }
}