CSSCSS小技集シリーズの第3弾!「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場!特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。スムーズスクロールページ内リンクをクリックすると、リンク先へスルスルッと移動するスムーズスクロール。スクロールスナップスクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。することで画面領域いっぱいに広げて、フルスクリーンレイアウトとして表示できます。移動!CSSでスクロールスナップを実装しよう」をご覧ください!目次へ。スクロールすると要素を固定ページをスクロールすると、要素の位置まで到達した時点でその要素を固定表示にする方法。固定位置を指定するだけでOK。親要素の終了位置にくると固定がはずれます。画像をトリミング画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしも用意されている画像のサイズが同じとは限りません。トリミングすると楽です!画像のサイズは縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。CodePen.詳細は過去記事「1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー」をご覧ください!目次へ。CSSで計算式を書く幅の指定などに計算式を使いたい場面もあるでしょう。なんて記述していませんか?それでうまくいく場合もありますが、余白を含めるとその数値ではレイアウトが崩れてしまうこともあります。関数を使いましょう!カッコの中に計算式を書くだけ!異なる単位でも使えます。+(足し算)、-(引き算)、*(掛け算)、/(割り算)です。以下の例では左右に10pxずつマージンのついたボックスを横に3つ並べた時の幅です。CodePen.目次へ。テキストを円形に回り込ませるWebでのデザインはどうしても四角形のボックス型になりがち。Shapesを使えばテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃいます。ここでは画像の周りにテキストを回り込ませてみましょう。Webフォントを使った時の表示遅延を回避するWebフォントを使ってテキストを表示させると、フォントデータを読み込む時間がかかり、テキストの表示が若干遅延してしまいます。テキストがまったく表示されないのは使い勝手が悪いので、フォントデータを読み込むまではデフォルトのフォントを、フォントデータが読み込まれると指定したWebフォントを読み込むように設定できます。swap;}通常のWebフォント表示。テキストは何も表示されません。指定した場合、最初にデフォルトのフォントが表示されます。パラメターが使えます。text-decoration。これまでは直線のみでしたが、波線が新たに加わりましたよ!使い所によってはデザインに合わせられそうですね。指定で上線を表示することもできます。テキストの上に記号を表示テキストの上にドットなどのちょっとした記号を加えられます。ベンダープレフィックスも併記しましょう。表のセルの幅を統一するデフォルトではセル内のコンテンツの長さによって幅が決まります。fixed;}さらに以下のコードを指定することで、セルの幅よりも中のテキストが長くなった場合に、テキストを自動的に省略した形で表示できます。CodePen.目次へ。入れ子になったリストもカウントする番号付きのリストの中に、さらにリストがある入れ子状態でも番号を割り振って表示できます。タグの番号を使うのではなく、CSSのカウンターを使います。関数を使って、入れ子になったカウンターの階層の間に「.」を挿入して区切っています。CodePen.目次へ。属性を加えることで実装できます。いうセレクターで指定できますよ。CodePen.目次へ。しましまのライン画像を使わず、CSSのグラデーションをうまく使って縞模様にしてみましょう!ポイントはしましまのボックスと白背景のボックスを重ねているところ。値でラインの太さを調整できます。CodePen.目次へ。同じ幅、同じ高さのボックスを繰り返し表示するタイルレイアウト。CSSグリッドを使えばメディアクエリーを使わなくても少ないコードでレスポンシブ対応可能です。Gridを使ったレスポンシブ対応の基本レイアウト」をご覧ください!目次へ。アコーディオン長い文章や補足説明をアコーディオン(折りたたみ)にしたい時ってありますよね。タグで囲んだ部分がアコーディオンとして設定されます。タグの部分をクリックすると、詳細文が表示されます。CSSなしでも実装できますが、アイコンや色、動きなどを加えるとより見やすくなるでしょう。