コーディング：CSSで画像を表示させるプロパティ

コーディングの際、画像を表示させるには、HTMLに直接書く方法と、CSSで装飾として表示させる方法の2種類がある、

ということを学びました。こんにちは。

現在「これだけで基本がしっかり身に付くHTML/CSS＆Webデザイン」という本をちょっとずつ進めています。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内直人 ]
価格：2,420円（税込、送料無料) (2024/11/11時点)

楽天で購入

HTMLで表示させるには、<img>や<figure>を使い、

CSSで表示させるには、background-imageなどがあるのですが、

文書構造上に必要な画像はHTML、そうでない画像はCSSを使う、という違いがあるんですって！

なるほどねー！

昨日、スクリーンリーダーの読み上げの話がありましたけど、スクリーンリーダーで読むのはHTMLファイルだけってこと？

アクセシビリティのためによく書く CSS - Qiita

アクセシビリティを意識した CSS に関するいくつかの tips です。スクリーンリーダー用のテキストテキストを視覚的には隠したいけどスクリーンリーダーには伝えたい、デザイン上にタイトルはないけどマークアップで見出しを入れて構造化したい...

？？？　そうでもないっぽい？？？

ちょっとこの辺は今後の課題にするとして、今のところは、たとえば店名の入っているロゴや実際の料理の写真などはHTMLで指定し、装飾目的のあしらいとか飾りはcssで表示させる、と覚えておこうと思います。

あと今日は写真の扱いについてのプロパティも学びましたー！

object-fit: cover;

まずheightとwidthで表示させたい画像のサイズを指定するのですが、この縦横比が元の写真の縦横比と違うと、写真が歪んで表示されてしまいます。
歪まずに表示させられるようにするには、不要な部分をトリミングしてしまう必要がありますが、そのためのプロパティがobject-fit。coverと指定すると、隙間がない状態になるまで拡大または縮小されて、余った部分はトリミングされる。