得意なサイト制作
お見積り依頼
GG KNOWLEDGE
GrowGroupスタッフからお役立ち情報を発信!

【コーディング】実装に悩んだ時に使える便利なCSSテクニック

マークアップWebデザイン ざきやま 公開: 2018.02.09 更新: 2022.01.17

こんにちは、ざきやまです!

マークアップエンジニアとして毎日ゴリゴリとコーディングしているのですが、
デザインによっては「これ…どうやってスタイリングしよう…」とか「このCSSの書き方でも問題ないけども、もっとスマートな書き方があるんちゃうか⁉︎」とかいろいろいろいろ悩みだすと指が停止してしまうことが結構あります…。
コーディングを担当されている方は少なからず同じような経験があるのではないでしょうか!

 

そこで!
今回は「実装に悩んだ時に使える便利なCSSテクニック」を7つご紹介したいと思います!

レイアウトを崩さず美しく画像を表示するCSS

例えどんなサイズの画像が来ても、レイアウトを崩さず美しく表示するには CSSプロパティ「object-fit」がオススメです。
画像を指定のサイズに、中央位置でトリミングするには下記のようなCSSを追加するだけです。

ただこちら、IEに対応していないのです…。
(「object-fit」ブラウザ対応状況はこちら→ https://caniuse.com/#search=object-fit

なのでざきやまの場合は、スマホ時のみ画像を小さくしたい場合などに使っています!



もしくは、背景画像として設定し、横幅、高さ、「background-size: cover;」を指定するのもおすすめです。
ただ、高さが指定されていないと背景画像は表示されないってことで、高さを固定値で指定しまうとレスポンシブ時に縦横のアスペクト比を保つことができません…。

 

そんなとき、下記のようにheightに値を入れずに、padding-topもしくはpadding-bottomに<横幅の数値÷縦幅の数値×100(%)>の値を入れましょう!
そうすると、アスペクト比を保ったまま背景画像を表示することができます。

 

▼ 例:背景画像を横幅200px、縦幅130pxで表示したい場合

130(px)÷200(px)×100=65(%)

↑をpadding-topもしくはpadding-bottomの値に代入します

コメントアウトでリンクのデザインを崩さないCSS

テキストがボックス内に収まらない場合に、コメントアウトしてデザインを崩したくない場合にはこちらのCSSを追加するだけで実現できます。
続きを見る場合はページ移動してほしいようなリンクデザインの時に便利です。

最後の要素だけスタイルを適応しないCSS

リストデザインで、リスト一つ一つに下線をつけるけど、最後のリストは下線なしってデザインがよくあると思います。

そんなとき、別でセレクタを作って 「:last-child { display:none; }」 とか書いたりしますが、
擬似クラス「:not()」を使うと便利でスマートな記述になります。

要素の中身が空だった時非表示にするCSS

ラベルなんかは要素の中身が空の場合、非表示にしたいですよね〜。

中身が空だと成り立たない要素や、デザインが崩れちゃう要素は、擬似クラス「:empty」を使うことで”空の時は非表示”という指定ができます。

リンク切れの画像に親切なコメントを残すCSS

リンクがもし切れてしまった画像がある場合、「リンクが切れているので見れない」という説明が表示してあると分かりやすく親切ですよね。

リンクが切れていることはもちろんダメですが…作り手のこだわりが感じられますね!
(もちろんもっとお洒落にスタイリングすることもできます!)

widthを横幅いっぱい+30pxとかにしたい時に便利なCSS

要素を親要素の横幅いっぱいよりちょっと飛び出したデザインとか、逆に右をちょっと開けたいときに、「width: calc()」を使うと自動で計算してくれます。

 

さいごに

いかがでしょうか?
めちゃくちゃ考えて実装していたものが、一行で実装できるようになったり…CSSはどんどんと進化して便利になっていっていますね〜。

新しいものを取り入れる際にはブラウザの対応状況に気をつけながら使っていきましょう!

以上、ざきやまでした!


この記事が気に入ったら
「いいね!」

この記事を書いた人

Webプロデューサー ざきやま

2021年に、WebエンジニアからWebプロデューサーへとキャリアチェンジいたしました。
4年間のエンジニア経験のもと、機能性が高くユーザーにとっても編集者にとっても使いやすいWebサイトのご提案を得意としております!


関連コンテンツ

GrowGroupなら、
解決できます。

より多くの企業様のお力になりたい。
まずはお気軽にお問い合わせください。

052-753-6413 受付 / 平日10:00〜19:00 お見積り依頼 資料ダウンロード