ネイティブのHTMLやCSSのやったことがない技術を触ってみたシリーズをここにまとめます。随時更新中です！

HTML、CSSの基本書式についてはこちら
※参考：【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！

HTML

figure要素

HTML5で追加されたfigureタグは「画像」専用のタグではなく「注釈」という意味なので、画像だけでなくvideoタグなども囲おう。セマンティックなサイトになる。しかもfigureタグはCSSのdisplay: blockなのでスタイル的にも使いやすい。

※参考：video要素はfigure要素で囲った方がセマンティック的にもスタイル的にもいいよ、というお話

カスタムデータ属性

HTML5で追加された「カスタムデータ属性」にテキストを入れることで、CSSやJSの中に固有のテキストを書かずに済む方法。

※参考：カスタムデータ属性をCSSやJSで読み込む（テキストをHTMLに集中させる）

CSS

擬似クラス

擬似クラス:target

ハンバーガーメニューをJSを使わずにCSSだけで作る。擬似クラス:targetを使う方法。

※参考：【擬似クラス:target】CSSのみでハンバーガーメニューを作る

擬似クラス:not()

擬似クラス:not()を使うと、「○番目以外は」という指定ができるようになり、これまで「一番最初だけ」「一番最後だけ」という二重の擬似クラスで指定したいたスタイルが一つで完結できる！

※参考：【CSS】擬似クラス:not()があまりにも素敵すぎでしょう、君ぃ！

擬似要素

pointer-events

inputタグに擬似要素を加えると、その擬似要素の上だけホバーアクションが効かなくなる。それを効かせるためにCSSのpointer-eventsプロパティを使う必要があった。

※参考：【pointer-events】フォームの送信ボタンに擬似要素を重ねてもイベントを発火させる

display

display:list-item

リストのlist-styleがどうやっても表示されなくなり、あれこれと調べたり試したところ、6年前の記事によってリストにはdisplay:list-itemが設定されていることを知る！

※参考：list-styleが表示されない！原因はdisplayにあった！6年前の知恵袋に救われた話

display: flexのflex-basis

横並びに便利なflexbox。サイドメニューは固定で残りのブロックは成り行き、みたいな設定をしたいと思い、いろいろ試したらflex-basisが便利だった！（calc()との比較も）

※参考：固定幅と可変幅の組み合わせにはflex-basisがまったくカン・タン・だ！

CSS Grid

CSS Gridを使うと2分割のグリッドシステムが簡単に作れた！

※参考：CSS Gridで12分割グリッドシステムが簡単に作れた（grid-template-areas推し！！）

テキスト

columns

CSSのcolumns機能を使うと印刷物でよくあるような2段組を表現できる。これによってPCは2段組、スマホは1段組と切り替えれば、意図通りの行長での文字の折り返しが実現できる！

※参考：CSSのcolumns（段組）でPCとスマホの読みやすさを統一

CSSの文字詰め

印刷物のように約物（句読点、カギカッコなど）を詰めることができるのか！？Yaku Han JP、letter-spacing、font-feature-settingsの方法を比較

※参考：【CSSの文字詰め】Yaku Han JPとletter-spacingとfont-feature-settingsの比較

印刷物のように左右幅いっぱいに両端揃えすることができるのか！？text-align: justifyを使う

※参考：【続・CSSの文字詰め】letter-spacingとfont-feature-settingsとYaku Han JPに両端揃えのtext-align: justifyは効くのか

縦書きCSS

和風表現に使えそうな縦書きCSS（writing-mode、text-orientation、text-combine-upright）がどんなものか試してみた。

※参考：縦書きCSSやってみた（writing-mode、text-orientation、text-combine-upright）

formのリセット設定

formのCSS設定はブラウザごとに固有のスタイルが予めて入っており、なかなか変えにくい。そのスタイルを解除して一からスタイルを当てるリセット設定をいくつか試して比較してみた。

※参考：【CSS】form用のリセット設定（ノーマライズCSS、リセットCSSとの比較）

画像

object-fit

私が愛してやまない画像の外接リサイズobject-fitの魅力！タテヨコ比を保ったまま画像枠いっぱいにトリミングしてくれる。IEでも使えるようになる方法も！

※参考：私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ！！

サイズ

vw、vh、vmin、vmax

vw、vhを使うとレスポンシブ設定をせずに1つの設定だけでPCとスマホのレウアウト設定ができるのではないか、という実験。当ブログで一番読まれている記事！

※参考：もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの？（オマケにvmin、vmaxも）

background

background-clip: text

Apple WebサイトのiPhone Xsページで見かけた文字の形で背景画像を切り抜く表現。調べたらbackground-clip: textという技術を使っていたのでやってみた。

※参考：【CSS】background-clip: textで背景を文字形に切り抜いてさらにグラデのアニメにする

カラー

CSSの色設定（真っ白、真っ黒からの細かい階調）

真っ白の次（#fff〜#eee）、真っ黒の次（#111〜#000）の色指定を安易に3桁で書いていたが、6桁でもっと細かく刻むとどのくらいの階調の違いがあるのか確認。真っ白の方は見た目にも違いがわかりやすい。

※参考：【CSS】#fffと#eee、#111と#000 の間はどのくらいグラデーションになるか

グラデーション

linear-gradientで斜線

CSSのグラデ設定linear-gradientだが、設定値によってはストリプのようなクッキリした表現もできる。さらに実験で白背景に斜線のような太さの異なる繰り返しをやってみた。

※参考：linear-gradientでストライプじゃなくて斜線を作る方法【CSS de 幾何学模様】

conic-gradient（放射状）

以前は画像で表現していた放射状の光線がCSSのみで表現できるようになった！conic-gradientを試してみる。

※参考：【CSS】conic-gradientで放射状の光線を放つ太陽を作る

transform

transformのrotate()

擬似クラス:afterをtransformのrotate()で回転させて、画像なしにリンクの「＞」アイコンを作る。

※参考：リンクでよくある「＞」アイコンを画像じゃなくてCSSだけで作る

CSSアニメ

transition

CSSとjQueryの合わせ技。アニメ設定はCSSのtransitionで設定して、jQueryはスクロールの感知とclassの追加、削除をするという分担

※参考：スクロールするとフワッと現れたり動いたりするアニメーション【jquery.inview.js & transition】

スクロール

scroll-snap

スナップ（引っかかり）のあるスクロールscroll-snapを試す。簡単な記述で作れた！

※参考：【CSS】scroll-snapでスナップ（引っかかり）のあるスクロールがまったくカン・タン・だ！