flexboxを使いこなす応用編!空のボックスの場合はロゴ画像を表示してみよう

投稿日:2018年12月18日 更新日:

りょうま(@ytq_ryoma)です。

cssのflexboxの応用でもうひとつ便利なコーディングを。

横並びボックスを作ったとき「空のボックスだったら画像を表示する」という処理を書いてみたいと思います。

 

横並びの数があわないとき

ボックスを並べてコンテンツを追加していると、

「あと1つボックスがあればきれいに並ぶのに」という場面に遭遇することがあります。

具体的にはこんな感じです。

とくにPCで表示したときによく見る光景です。

これを最後ひとつボックスを入れて、横並びの数を上下同じようにしてみます。

 

具体的にはこういったゴールにします。

最後にサイトのロゴなどを入れて、ボックスの見栄えを整えます。

 

サンプル① 空のボックスの時は背景画像を表示する


HTMLを見ていただくとわかりますが、3つ目の<li>要素の中身が空です。

このときにcssで疑似要素 :empty を使い背景画像を表示させます。

.list li:empty {
  background: white url(https://yatteq.com/wp-content/uploads/2018/12/empty.jpg) no-repeat center center;
  border:1px solid #ddd;
}

 

当然<li>の中身があればそのコンテンツが表示されます。

 

cssでできるちょっとした条件分岐を紹介しました。

flexboxを使っているとこういった場面がちょこちょこ出てくるので、emptyを使って対応してみてくださいね。

これ実は知らなかった・・こんな便利なスタイルあったなんて
ワシもじゃ・・・これは使えるの

関連するおすすめ記事

Amazonチャージ


Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス5期目/大阪府北摂在住🏠長野県諏訪市出身🎣webデザインやフロントエンド技術の情報を中心に、人生をカスタマイズして楽しく過ごすための情報を発信中📢WPテーマはAFFINGER5です。

-HTML / CSS
-,

Copyright© ヤッテモータース , 2019 All Rights Reserved.