2022.06.13 Web制作

【2022年上半期】ホームページ制作・Web制作時に最近良く使うようになったCSSたち

 

いよいよIEのサポートが終了ですね。
コーディングしていていてもどうせIEで使えないしと新しいものを積極的に使えない時期が長らく続きました。
しかし最近ではIEの事を考えなくなってよくなったこともあり、使いたくても使えなかったりした新しいCSSを積極的に使うようになってきました。

そんな2022年になってよく使うようになったCSSたちを紹介したいと思います。

※細かい説明や使い方は割愛します。
※新しくないのもあります。

fit-content max-content

テキストにマーカーを引いて中央寄せしたい時なんかに便利です。
あとは複数行のテキストで文字は左揃えだけど中央寄せしたい時
flex絡みで画像が縦に伸びちゃったなんて時など他にも使い所はあります。

p {
  width: max-content;
  margin-inline: auto;
}

テキストは左揃え
全体は中央寄せ

fit-content - CSS: カスケーディングスタイルシート | MDN
max-content - CSS: カスケーディングスタイルシート | MDN

clamp()

リキッドデザインのフォントサイズで割りと使います。
無駄にブレークポイントを追加しなくてもなんとかしてくれます。

p {
  font-size: clamp(10px, 2vw, 30px);
}

画面幅によってフォントサイズを変更

clamp() - CSS: カスケーディングスタイルシート | MDN

aspect-ratio

CMSでどんなサイズの画像が入るかわからない時などにラッパーでaspect-ratioを設定して中の画像をobject-fit: cover;にして使っています。
他にもyoutubeとかgooglemapや円を作るときにも便利です。

div {
  width: 30%;
  aspect-ratio: 16/9;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

aspect-ratio - CSS: カスケーディングスタイルシート | MDN

gap

flexで並べたときの隙間の設定はgapでしています。
:not(nth-child(4n-3)) {margin-left: 20px;}
なんてやる必要はありません。

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
box
box
box
box
box
box
box
box

gap (grid-gap) - CSS: カスケーディングスタイルシート | MDN

margin-inline

margin-inline: auto;で中央寄せにしています。

div {
  width: 30%;
  aspect-ratio: 2/1;
  margin-inline: auto;
  border: 1px solid currentColor;
}
中央寄せ

margin-inline - CSS: カスケーディングスタイルシート | MDN

display: contents;

最初ただのimgにしていたけどあとからpictureにした時にpictureを無いものにしてくれます。
wordpressなんかで勝手に入れられたdivをないものにしてくれたり、使いようは色々とあると思います。

display - CSS: カスケーディングスタイルシート | MDN

currentColor

疑似要素やaタグの色を親と同じにしたい時に使ったりします。

a {
  color: currentColor;
}

CSS: カスケーディングスタイルシート | MDN

まとめ

IE終了にともなってそれまでは使えなかった便利なCSSを使えるようになりました。
何行か書いていたものが1行でできたりと無駄がなくなりスッキリするので積極的に取り入れていきたいですね。
紹介した物の中にはバグがあったりブラウザによっては思うようにいかなかったりすることもあるのでご使用の際はご注意ください。

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら

フライング・ハイ・ワークスの紹介

フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・システム開発会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。

実績

デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。

また、SEOやランディングページ（LP）、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください！

東京のホームページ制作・Web制作のお問い合わせ、お見積り依頼、相談、質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら