画像に関するCSSと拡張子

画像を貼りたいだけなんですけども

タイピングの記録を残しておくためのページに、成績のスクリーンショットを貼りたいだけだったんですが、小さいアイコンやトップページボタン以外の画像を扱うのは初めてのことだったので、想定より時間がかかってしまいました。

画像を貼るだけでも、知っておく必要があることは多いですね。

とりあえず、画像を貼る際に使用するimgタグの詳細は下記のページへ。

VW(Viewport Width)

初めは、画像を貼りつけるだけなんて、ちょろいと思ってました。

"width"を"vw"で指定すれば終了だと思っていたからです。ただ、これがうまくいかない。

例えば、"50vw"と設定すると、PCではうまく表示されるが、スマホでは小さすぎて見えない。

では、大きめに"80vw"と設定すると、スマホでは見えやすくなるが、PCだと引き延ばされて表示されてしまう。

みんなうまいことやっているわけだから、セオリーみたいなものが必ずあるはず。引き続き、画像周りの検索を続ける。

max-width

max-widthが便利らしい。

max-widthを指定した画像を、chromeのデベロッパーツール(F12かshift+ctrl+I)確認すると、縦・横ともに画面からはみ出ず、うまく表示されています。

さすがに縦画面だと見づらいけど、これはどうしようもないはず。

imgタグはインライン要素

画像はインライン要素なので、並べるだけだと横に回りこんでしまう。

そして、いろいろ検索すると「画像はPタグで囲むのがセオリー」みたいな記述を数多く発見。

どうやら論争にまで発展しているらしい。文法上問題はなくても、違和感がある人って多いんだろうなぁ。

imgを何かで囲む義務はないにせよ、ブロック要素のタグで囲むほうが扱いやすいということは間違いない感じ。

box-sizing

"box-sizing"は初めて使うのでお勉強。

今回は画像にpaddingとborderは設定していないけど、一応使用しておこう。

画像の拡張子

すっかり忘れていた拡張子の問題。pngは重くて、jpegは軽い、ぐらいのイメージしかありません。

pngからjpgに変換すると、およそ30％～40％ぐらい軽くなる感じ。画質にこだわりはないので、ファイルは小さいほうがいい。jpgに変換しておこう。

ファイル名が文字化けするけど、一番下の"PNG JPG 変換"は、一括変換が簡単で便利でした。

画像に影をつける

一目見て画像だと分かりやすし、見た目もカッコいいので、box-shadowを使って影をつけたい。

いろいろ触ってみた結果、"box-shadow: 5px 5px 3px 3px #898989;"と設定することに。

右と下の影だけではなく、画像の縁全体にも影をつけたほうが見やすいと感じたので、影の広がりを3px追加しています。

HTMLとCSSのソース

サンプル

HTML

<div class="normal_img">
    <img src="website-img/sample-img.jpg" alt="「画像のCSSと拡張子」のサンプル画像">
</div>

CSS

.normal_img  {
  margin-left: 10px;
  margin-top: 30px;
}

.normal_img img  {
  max-width: 95%; 
  height: auto;
  box-sizing: border-box;
  box-shadow: 5px 5px 3px 3px #898989;
}

直接imgにclassを指定せず、divにclassを指定(普通の画像なので"normal-img"。他にクラス名が思いつかなかった)。

max-widthが100％ではなく95％なのは保険。ぴったり貼りつかれるのは気持ちが悪い。もう、コンテンツが横にはみ出して、Google神につっこまれるのは嫌だし。

ちなみに、marginやpaddingは、インライン要素に設定すると、めんどくさいことになります。