2024年03月21日facebooktweetはてブLINEPocketfeedlyこんにちは、社員Tです!いきなりですが、HTML,CSSをはじめとしたWebコーディングの世界って進化が早いですよね。記事更新時点で主要ブラウザにて動作が確認できる上記に記載の条件に沿って、5つを従来の方法と合わせて比較、ご紹介していきます!グラデーションテキストを作るちょっと前:illustratorなどで画像書き出しテキストにグラデーションを設定した画像を作成し、<img>要素で読み込むことで表示させる必要がありました。text;を使用することで、指定したテキストの形に背景を切り取ることができます。背景の指定をグラデーションから画像にすることで画像をテキスト型に切り取ることも可能です。指定することで実装可能ですが、任意の場所で固定を解除したい場合などはjsからpositionの値を変える必要があります。要素を任意の位置に固定/解除ができるプロパティです。ページ内に複数実装するのも簡単ですが、親要素に高さを持たせるのを忘れがちなので、注意が必要です。CodePen.スムーススクロールの実装ちょっと前:JavaScriptで実装スムーススクロールを実装する方法はいくつかありましたが、いずれもプラグインを読み込んだりJavaScriptやjQueryを使用する必要がありました。細かいカスタマイズができる利点はありますが、やっぱり少し手間に感じます。smoothを指定するだけで、ページ内アンカーリンクの移動がスムーススクロールになります。smooth;}ホバースタイルの出し分けちょっと前:画面幅によってホバースタイルを出し分けメディアクエリで画面幅からPC/SPを分けることで、それぞれホバースタイルを出し分ける方法ですが、デバイスサイズが多様化したりユーザー環境により期待通り動作しない場合があります。使うことで、そのデバイスがホバーアクションに対応しているかどうかによってスタイルを出し分けることができます。画面幅の最大値、最小値などの組み合わせでブレイクポイントを指定します。」が使用可能になったことで、より直感的にブレイクポイントが指定できるようになりました。PC用スタイル}まとめ今回はCSSに焦点を当てて、新機能の紹介や従来の実装方法を比較しました。体感的にはCSS(+HTML)だけで完結できるような機能や表現がだいぶ増えた印象です。従来の方法が適している状況だったり、今回例として出していない他の実装方法の方が良い場面なんかも多々あると思いますが、ひとまず「CSSだけこんなこともできるようになったんだ」くらいに感じていただければと思います。社員T昨年、コーダーとして入社した社員Tです。実務をこなしがら、さらなる技術向上のため勉強しています。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。