静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > さよならIE。これから使えるモダンブラウザ対応のCSS便利機能を大公開!

ホームページ制作 さよならIE。これから使えるモダンブラウザ対応のCSS便利機能を大公開!

  • このエントリーをはてなブックマークに追加

こんにちは。制作部デザイナーの山本です。
2022年6月15日にMicrosoftが開発したWebブラウザ、Internet Explorer(以下IE)の公式サポートが終了しました。
今まではIEで正常な動作・表示を実現するためにモダンブラウザで使える新しい記述方法を諦めてきましたが、今後はIEというレガシーな環境に縛られることなくスマートで効率の良いCSSのコーディングを取り入れていくことが可能になります。
そこで今回はモダンブラウザでこれから使用していきたい便利なCSSを紹介したいと思います。

 

gapを使って要素間の余白をスマートに設定

flexboxを指定した要素の中で、子要素間の余白を指定する時、左右片方のmarginを指定してnth-childでn番目の余白を取ってみたり、paddingで左右の余白を設定してから親要素のmarginにネガティブ値を指定してはみ出ないようにしてみたりと、今まではさまざまな工夫をしてきました。
gapを使えば、flexboxもしくはgridレイアウト内の子要素の間の余白を実にスマートに指定することができます。


子要素に対してmarginやpaddingは一切指定せずに、flexbox内の子要素の隙間を取ることができています。

grid レイアウトの基本

gridレイアウトはflexboxと同じくレイアウトを指定するためのdisplayプロパティの値の一つです。flexboxが1行、1列といった1つの軸に沿ったレイアウトが対象だったのに対し、gridレイアウトは行・列複数の軸に対するレイアウトが対象となります。

girdレイアウトはその気になれば雑誌の様な複雑なレイアウトを実現することも可能ですが、基本的な指定方法さえ覚えてしまえばWebサイトでよく使うレイアウトを簡単に組み立てることができます。

gridの基本的な指定は以下2つのプロパティで記述することができます。

  1. display:grid;
  2. grid-template-columns

親要素にdisplay:grid;を指定して、grid-template-columnsプロパティでどの様なレイアウトにするのかを指定するだけです。以下はgrid-template-columnsの指定方法です。


レスポンシブなサイズ設定をclamp()で実現

widthプロパティで指定するサイズに単位vwを使うと、画面幅に応じたサイズを指定できますが、画面を大きく(小さく)するとサイズがどこまでも大きく(小さく)なってしまいます。そんな時にサイズの最大値、最小値をclamp関数で同時に指定することができます。

以下の(1)ではwidthにclamp関数を指定し、基本的な幅は80vwでレスポンシブですが、小さくなっても100px、大きくなっても500pxまでに制御できます。

そして、このclamp関数はfont-sizeにも使用することができます。(2)の例の様に、基本的なサイズは3vwとして画面幅に応じたサイズにしていますが、小さくても12pxまで、大きくなっても20pxまでのサイズに制御することができています。


サムネイル画像のトリミングをobject-fitで解決

CMSの記事一覧ページのサムネイル画像を設定する際など、どうしても投稿される画像のアスペクト比が統一できない場面があると思います。全て同じサイズのフレーム内で画像をトリミングしたい場合、object-fitプロパティが大変便利です。よく使うプロパティ値はcoverとcontainです。coverと設定すればフレームを全て覆う様にトリミングされ、containと設定すれば画像を全て収めた形でフレーム内に収めてくれます。


注意点としては、imgタグにwidth、heightを忘れずに指定するということです。

画像が横長であっても縦長であっても覆い隠す様にトリミングしてくれるcoverの指定は様々な場面で活躍しそうです。

画像の縦横比をaspect-ratioで感覚的に設定

レスポンシブデザインが当たり前となった今の時代、要素の縦横比を全てのデバイスで保つことができるということが非常に重要になってきています。IEに対応していた今までは、デスクトップパソコン、ノートパソコン、タブレット、スマホといったそれぞれのデバイスでいい感じの高さになるように要素のheight値を変えて対応してきました。

aspect-ratioプロパティを使えば、要素の縦横比を整数比として指定が出来、どのようなデバイスでも縦横比を保ったまま表示することができます。

次の例では縦:横が4:3となる様に指定しています。縦横比率の指定をしているため、1を指定すると正方形として調整されます。


 

any-hoverでマウスオーバーのスタイルを制御

PCなどでマウスオーバーをした時の動作を擬似クラス「:hover」で指定すると、マウスオーバーが検知できないタッチデバイスなどでは期待通り動かないというケースがあります。メディアクエリの「any-hover」を指定すれば、マウスポインタのあるデバイスかどうかを判定してくれます。

@media (any-hover: none){ hoverに対応していない }

@media (any-hover: hover){ hoverに対応している }


 

まとめ

今回ご紹介した記述を使うことで、効率の良いレスポンシブデザインが実現できる場面が増えてくるかと思います。
こういった新しい記述方法は、自分ひとりだけでなく、チーム間で共有することで初めて効率性が活きてきます。
どんどん共有してチーム全体のスキルを磨いていきたいですね。

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top