職業訓練では、CSSの背景画像や、要素のサイズを指定する方法について演習を行いました。
今回学習したのは、背景画像を設定するbackground-image、画像の表示位置を指定するbackground-position、画像の繰り返し方を指定するbackground-repeatです。
さらに、要素の横幅と高さを指定するwidthとheightについても学びました。
一つひとつはシンプルなプロパティです。
ただ、実際にコードを書きながら学ぶことで、普段見ているWebサイトがどのように作られているのか、少しずつ見えてきました。
この記事では、CSSの背景画像を学んで気づいたことを、初心者の目線でまとめます。
imgタグと背景画像の違いがわかった
以前の授業では、HTMLのimgタグを使って画像を表示する方法を学びました。
当時は、画像を表示するときはimgタグを使うものだと考えていました。
今回、CSSでも背景画像を指定できると知り、以前から見ていた「文字の後ろに画像が表示されているデザイン」の仕組みが理解できました。
imgタグは、画像そのものをコンテンツとして表示するときに使います。
一方、CSSの背景画像は、文字やボタンなどの要素の背景に画像を配置するときに使えます。
背景として画像を指定すれば、画像の上に文字を表示したり、ページの装飾として使ったりできます。
これまで何気なく見ていたWebサイトのデザインと、授業で学んだコードが結びついた瞬間でした。
知識として覚えるだけではなく、実際のWebサイトと関連づけて理解できたことは、大きな収穫でした。
widthとheightで表示する領域を作る
今回の演習では、要素の横幅を指定するwidthと、高さを指定するheightについても学びました。
背景画像は、指定するだけでは表示されない場合があります。
背景画像を設定した要素に内容がなく、高さも設定されていない場合は、表示するための領域が作られないからです。
そこで、widthやheightを使って要素の大きさを指定します。
.box {
width: 500px;
height: 300px;
background-image: url("background.jpg");
}
このように指定すると、横幅500ピクセル、高さ300ピクセルの領域に背景画像が表示されます。
これまでは、画面に表示されればよいという感覚でコードを見ていました。
今回の演習を通して、Webページは一つひとつの要素に大きさや位置を指定しながら作られていることがわかりました。
ただし、固定したサイズは、スマートフォンなどの小さい画面で表示が崩れる原因になることもあります。
今後学ぶレスポンシブデザインでは、画面の大きさに合わせた指定方法も必要になるのだと思います。
特に印象に残ったbackground-repeat
今回、最も印象に残ったのはbackground-repeatです。
最初は、画像を繰り返して表示するだけの機能だと思っていました。
しかし、模様や帯状の背景を効率よく作るときに活用できることを知りました。
たとえば、横方向に長い帯のような背景を作る場合、大きな画像を一枚用意する方法だけが正解ではありません。
小さな画像を横方向に繰り返して表示することで、大きな背景のように見せることもできます。
横方向に繰り返す場合は、次のように指定します。
.box {
background-image: url("pattern.png");
background-repeat: repeat-x;
}
縦方向に繰り返す場合は、repeat-yを使います。
.box {
background-image: url("pattern.png");
background-repeat: repeat-y;
}
画像を繰り返さない場合は、no-repeatを指定します。
.box {
background-image: url("background.jpg");
background-repeat: no-repeat;
}
小さな画像でも、CSSの設定によって大きなデザインとして見せられます。
この仕組みを知り、CSSの書き方だけではなく、画像素材をどのように作るかも大切だと感じました。
デザインとコーディングはつながっている
今回の演習を通して、デザインとコーディングは別々のものではないと感じました。
画像を作る人がCSSの仕組みを理解していれば、繰り返して使いやすい素材を用意できます。
コーディングをする人も、画像がどのように作られているかを理解していれば、無駄の少ない方法を考えられます。
お互いの作業を理解することで、より効率よくWebサイトを作れるのだと思います。
CSSは、プロパティを暗記するだけでは身につきません。
なぜその設定があるのか、どのような場面で使われるのかを考えることで、理解が深まります。
実際のWebサイトを見る視点が変わった
背景画像について学んだことで、普段見ているWebサイトの見方も変わりました。
これまでは、完成したデザインとして眺めているだけでした。
今は、「この画像はimgタグで表示しているのか」「背景画像として指定しているのか」「小さな画像を繰り返しているのか」と考えるようになりました。
学習した内容を実際のWebサイトで探してみると、コードとデザインのつながりが見えやすくなります。
ただ教科書を読むだけではなく、身近なWebサイトを観察することも学習の一つになるのだと感じました。
まとめ
今回の職業訓練では、CSSの背景画像と要素のサイズ指定について学びました。
background-imageを使うと、要素の背景に画像を表示できます。
background-positionを使うと、背景画像を表示する位置を指定できます。
background-repeatを使うと、画像を縦方向や横方向に繰り返したり、繰り返さないようにしたりできます。
また、widthとheightを使うことで、背景画像を表示する要素の領域を作れます。
一つひとつのプロパティを覚えるだけではなく、実際のWebサイトでどのように使われているのかを考えることが大切です。
今後は、今回学んだ内容を使い、自分でも背景画像を活用したWebページを作ってみたいと思います。
これからHTMLやCSSを学ぶ方も、コードを書くだけではなく、普段見ているWebサイトを観察してみてください。
「このデザインは、どのようなCSSで作られているのだろう」と考えることで、新しい発見が増えていくと思います。
コメント