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

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

りょうま(@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エンジニア/フリーランス6期目/大阪府北摂在住🏠 長野県諏訪市出身🎣学生時代に制作したサイトが評価され新卒で上場企業のWEBデザイナーとして就職。その後数社を渡り歩き、2013年にフリーランスとして独立。現在は主にフロントエンドエンジニアとしてお仕事しています。詳しいプロフィールはこちら

-HTML / CSS
-,

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