LP制作を始めて作成している、ねこらのん（@nekoranon256）です。
今、調べながらしているものは以下のとおりです。
- 画像の中央にテキストを表示する
- 料金表を作成
- 画像クリック→スライドさせる
画像クリックをする方法を調べていると、
- HTML
- CSS
上記2つの表示方法があることを知りました。
しかし違いはいったいなんでしょうか？
気になったので調べてまとめました！
結論からいうと
HTMLとCSSの画像挿入のちがい
- HTML：重要な画像
- CSS：重要じゃない画像
でした。
それぞれ詳しく説明していきますね！
こんな方におすすめ
- HTMLとCSS（マークアップ言語）初心者の方
目次
画像を表示させる方法がHTMLとCSSの2パターンある違いは？
画像を表示させる方法はHTMLとCSSどちらも可能です。
しかし使い分けることでHTMLとCSSがより一層理解できるので違いをご紹介していきますね。
HTMLで画像を表示をするメリット・デメリット
HTMLで画像を表示させる方法は以下の4点がありますね。
- img（image）：指定した画像を表示
- src属性（source）：表示したいファイルの出処を指定
- alt属性（alternate attribute）：検索エンジンで対応してくれる、アクセシビリティ対応
- title属性：画像やリンク先のタイトルを表示
これらの方法によってHTMLで表示させることでサイトに必要な情報を持っている画像が表示されなかった場合でもalt属性で説明文の補足内容が表示されます。
HTMLで画像を使うメリットとデメリットをそれぞれご紹介していきます。
メリット
HTMLで画像表示するメリットは以下5点あります。
- 記述が楽
- 代替えテキスト（alt属性）入力可
- 画像が表示できなかった場合にalt属性部分が表示される
- 音声ブラウザを仕様時に読み上げられる
- 検索エンジンが画像の内容を把握可能
SEOやサイトの情報に不可欠なものはHTML表示したほうが良さそうですね！
デメリット
HTMLで画像表示するデメリットは以下3点あります。
- 文字数が多く記述量が増えファイルサイズが大きくなる
- 速度が遅くなる
- HTMLの編集作業が複雑化
HTMLで画像を表示させることによって速度が遅くなるようですね。
次はCSSを見ていきます。
CSSで画像を表示をするメリット・デメリット
CSSで画像を表示させる方法はbackgroundimageを使いますね。
この方法によってCSSで画像を表示させることができます。
CSSで画像を使うメリットとデメリットをそれぞれご紹介していきます。
メリット
CSSで画像表示するメリットは以下2点あります。
- 画像を表示するclassを1つ作れば複数箇所で利用可能
- imgタグよりも文字数が少ないclassを使用することでhtmlファイルサイズの肥大化を軽減
複数箇所で同じ画像を使いたい場合に便利ですね！
デメリット
CSSで画像表示するデメリットは以下4点あります。
- cssが読み込めないと画像が表示されない
- 代替テキストalt属性を入力できない
- 音声ブラウザを使用したとき読み上げ不可
- 検索エンジンが画像の内容把握が不可
CSSで画像を表示させることによって画像を表示させることができないリスクがHTMLよりも多いですね！
HTMLとCSSの使い分け
- SEOを意識している場合は、ファイルサイズ軽減を軽減することを意識する
- 文章上なくても文書として困らない画像はCSSに画像を掲載させる
次は表示されないと困る画像と困らない画像の見分け方についてご紹介していきます。
表示されないと困る画像と困らない画像は？
サイトにはいろんな画像が表示されていますが、表示されてほしい画像と困らない画像があります。
見分け方についてご紹介していきます。
表示されないと困る画像
表示されないと困る画像は以下の3点あります。
- Contentsとして利用している画像
- テキストが書かれた画像
- バナー画像
サイトの重要な画像として用いられているものは表示されないと困る画像になりますね！
困らない画像
表示されなくても困らない画像は以下の3点あります。
- アイコン画像
- 背景画像
- 装飾目的の画像
装飾目的のものであれば表示されなくても困りませんね！
補足：相対パスで画像を指定する3つの方法
相対パスで画像を指定する方法について補足でまとめました！
- HTMLと画像が同階層にある
→拡張子を含めた画像のファイル名
例 nekoranon.png - 画像がHTMLよりも下階層にある
→ファルダ名/拡張子含めたファイル名
例 img/nekoranon.png - 画像がHTMLよりも上の階層にある
→../拡張子を含めた画像ファイル名
例 ../nekoranon.png
以前画像が表示されなかったのがファイルパスが原因だったのでセットで備忘録として残しておきます。
おわりに
Progateで学んだ画像はHTMLのみでしたが、デイトラの動画を見てCSSでも画像表示させることができることを知りました！
現在LP制作をしており、HTML表示にするかCSS表示にするか悩んだので、今回まとめた内容をもとに使い分けていこうと思います！
もりけん塾（@terrace_tech）
Thanks：もりけんさん