タイガーラック クリエイティブブログ
2024
September
05

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

今回はここ数年で実装されたHTMLと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);
    }
}

ダイナミックビューポート単位

スマホ表示時、100vhで指定するとデバイスによってはホームボタンやURLバーなどの関係でズレが生じ、今までとても面倒な思いをしてきたコーダーさんは多かったと思います。
そこで新たな単位が追加されました。
dvw,dvhこの単位を使うと動的なビューポートの高さ、幅を指定することができます。

clamp()関数

font-size: clamp( 18px 3vw 36px );
このように指定すると3vwで表示して最大で36px、最小で18pxで文字を表示することができます。
弊社で運営しているサイトの下記ページではタイトル文字はすべてclamp関数で指定しています。

https://www.tanasize.com/products/list_item

上記の他にも様々な新しいコードがリリースされているので
HTMLとCSSも定期的にトレンドを追うことで作業効率も上がっていくのではないでしょうか。

このカテゴリの最新記事

関連記事

SHOP LIST

タイガーラック株式会社

〒577-0056
大阪府東大阪市長堂1-3-14 TOKUYASU Bld.