Webデザイン～背景を彩ろう～
カテゴリ：インターン生ブログ
こんにちは！インターン生の西です！今回はWebデザインで絶対に必要となる背景、その中でも画像を扱うときのHTML&CSSの記述方法について紹介していきたいと思います！
1. 画像の挿入について
Webデザインにおいて画像の挿入は必至です。しかし、その画像の挿入で思い通りにならないことも多々あります。例えば、
- サイズ比が理想のものにならない
- レスポンシブ対応させたときにうまくサイズ対応ができてない
などの問題が発生します。このような時にはCSSでのレイアウトはもちろん、HTMLでの記述方法についてもみていきましょう！
・画像の挿入方法
画像の挿入方法にはHTMLの<img>タグでの挿入方法とCSSでの「background-image」プロパティでの挿入方法の二種類があります。
～<img>タグ～
<img>タグではsrc属性に表示する画像ファイルを指定することで画像が挿入されます。次に、alt属性は画像が表示できないブラウザの場合に、画像の代替テキストを指定します。
<HTML>
<CSS>
ここで重要なこととして<img>タグはインライン要素であるため、<p>タグで囲ってあげましょう。そうすることで画像のサイズが合わないとき、画像の位置を移動させたいときにCSSでその<p>タグを編集してあげるだけですぐに対応させられるはずです。
※もし、pタグで囲った場合に縦横比の調整が上手くいかなかった場合、下の画像のように「height:auto;」をつけてみましょう。この記述は、中身の要素を自動的にぴったりの高さにすることができます。
～background-imageプロパティ～
このプロパティの特徴としてはbackgroundで画像の挿入をしているので画像の上に文字を記述することができます。ここでは「margin:0 auto;」を使用しているので、HTMLでは.img-sectionという要素の親要素の挿入も忘れてはいけません。
<HTML>
<CSS>
背景の編集には、ほかにも画像のサイズ比調整、配置調整がしやすくなる様々なプロパティがあります。
背景編集プロパティ
- background-image・・・背景画像の挿入
- background-repeat・・・背景画像の繰り返し表示
- background-size・・・背景画像の大きさを指定
- background-position・・・背景画像を表示する位置を指定
2．サイズについて
・サイズ調整
サイズ調整をする場合はたいてい、画像の縦横比を維持したまま拡大、縮小したい場合が多いでしょう。もし、画像を挿入するときに縦横のサイズを記述していなければCSSで「width:指定したイサイズ;」と記述するだけで、その幅にあったサイズ比になります。
・サイズ位置
サイズ位置については、「background-position」プロパティを使用することで調整することができます。例えば、以下のように記述することによって画像の位置は要素の中の中央上部に表示されます。
また、他にも以下のように記述することで要素の左から30px、上から80pxの位置に画像の位置を調整することもできます。
※CSSが適用されなくなった場合、下の画像のように「!important」宣言をして指定したセレクタを優先的に適用されるようにしてみましょう！
3．さいごに
背景画像は以上のようにサイズ調整ができますが、レスポンシブ対応させるときにはどれくらいの画面サイズの時にどれくらいの画像サイズ、画像位置だときれいに見えるのかということを把握することも重要です！
