タテ・ヨコでつまづく

  • 2021年3月15日
  • 2021年3月15日
  • Web
Web web系

置きたい写真を用意した!それを参照するためのHTML/CSSコードは書いた!

さあ、写真を表示してみましょう~♡

としたところ。 

いきなりどーんと画面いっぱいに広がる写真。

はっ・・・? 

先生っ!画面いっぱいに写真がっ!(パニック)と、なりますね・・・。

まあ、あたりまえといえばあたりまえなのですが、高画質モードで撮った写真サイズが大きすぎということで(;’∀’)

それまでは教材のサイズ加工済画像しか使ってなかったので、全く気付いてなかったのですが。

自分の好きな写真となると、自分で調整しなくては!

先生から、「最初はそんなものよ!」というような励ましをいただきつつ💦、とりあえず大きさをなんとかしましょうということで・・・

日頃からサイズ感を意識している方には当たり前のことなのでしょうが、そういうものに全く明るくなかったわたくし。とりあえずサイズ変更ソフトなどを使って、やっと扱いやすいサイズになったものの・・・

なんか思ってたんと違う感が。

なんか違う感の原因は、縦横比(アスペクト比)でしたっ!

ざっくり言うと「長方形の長辺と短辺の比率、○○:××」ということなんですが、ピクセルなどで表す画像の最適な大きさや、投稿する場所での最適サイズ等々考慮するとなると・・・

調べるほどに奥深い写真のサイズや縦横比。 
広告でクリックしてもらう画像(バナー)や、記事の題名の上などにあって、内容を表現した画像(サムネイル)のサイズなどは、もう、本当に多彩でして。

普段なんとなく読み流している画面ですが、画像サイズも用途に合わせて仕様が決まっていたのでした。

ムービーやテレビ画面・スクリーンの縦幅と横幅の比率としても知られるこのアスペクト比、有名どころとしては・・・

長辺:短辺
16:9 Youtube投稿画面 
   パーティー会場などのスクリーン(ワイド型)
3:2 デジタル一眼レフカメラで使われることの多い比率
4:3 コンパクトデジタルカメラに多いサイズ
   パーティー会場などのスクリーン  
   iPhoneだと、標準で写真を撮る時のサイズ。
1:1 インスタグラム投稿にぴったりな真四角サイズ。
iPhoneで言えば、”スクエア”のモード。

確かに、1:1だと、インスタグラムっぽく見えます。人間の目の感じ方というのは、敏感なものですね。

元画像と違う比率の場合は、目標のサイズにトリミング(切り取り)したりして・・・。

あとは、画像の細かさ(ピクセル数)で、見た目の面積や、表示速度(例:大きい画像=データ量多い=表示が遅い)が決まるというイメージでした♪

アスペクト比が決まっていれば、あとはHTML/CSSコーディングで拡大・縮小したりもできますね!
(ぼやけたりするので、これも最適化が必要ですが💦)

用途別サイズ感、大事でした。

慣れれば定番のパターンが分かってくる、とのことでしたが・・・
(こちらもですが、改めてテキストを見ると、書いてました💦)

初自由ページ作成は、なにかと大丈夫か?感のある顛末となりましたが(;’∀’)
一枚の写真を表示するのに、こんなに時間をかけられるのは、ありがたいな~、と思ったのでした。