ミギムキ

[CSS] 画像がまだできていないimgタグにそれらしい高さの枠を仮設定したい

公開日:2018/08/31 更新日:2019/07/31

やりたいこと

サイト作成中、画像がまだできていなくて仮の状態で作業を進めることがあります
そのままにしておくと、高さ0のaltに入れた文字だけが入ったチグハグな状態に。レイアウトが崩れる原因にもなったりします
かといって、わざわざ仮の画像を用意して指定しておくのも微妙
ということで、CSSでそれらしく枠を確保しつつ、画像を設定し忘れないように目立たせたい

サンプルコード

img[src=""] {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 70%;
    border: 1px solid #eee;
}
img[src=""]::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 24px;
    white-space: nowrap;
    content: "※画像準備中※";
}

仕組み、解説、補足など

本公開では不要なスタイルなので、忘れないうちに削除しましょう

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。