HTML・CSSの大切な知識3選。
この記事では、将来プログラミングをできるようになるために、HTMLとCSSの今日学んだ基礎知識を解説していく記事です。
今日学んだこと。
画像の回り込み。
Flexboxについて。
CSSセレクター。
画像の回り込み。
画像の回り込みとは、ページ内に画像と文章が混ざっている部分があったとします。
このままのレイアウトだと、画像の右側がポッカリ空いてしまいます。
この部分に、画像の下に設置されている文章を回り込ませることができます。
回り込みに使うCSSプロパティはfloatというものです。
自分は、画像に対してfloat:leftで画像を左にして回り込みをしましたが、floatでは右に回り込みをすることも可能です。index.htmlは画像を追加して、style.cssで画像の回り込みを指定できます。
そして<div class="aboutWrapper">〜</div>を追加します、その後style.cssで画像の回り込みを指定します。しかし文章が短くなると、該当の箇所に空白が生まれて、さらに下の要素が右側に回り込んでしまいます。これを解消するにはclearfixというCSSを組み合わせたハック方法を利用します。
style.cssに以下の内容を追加します。
clearfix:after{
content: "";
display: block;
clear: both;
}
これで基礎の部分は完成しました。
Flexboxについて。
FlexboxというCSSプロパティは、複雑なレイアウトをより簡単に実装できる方法です。スマートフォンやタブレットなどの多様な画面サイズへの対応が必要になり、ここ数年でどのブラウザでも当たり前のように利用することができるようになりました。
一行CSSを追加するだけで要素が横並びになったり、要素を良い具合に伸び縮みさせることができるとても便利な方法です。
CSSセレクター。
ここまでのCSSプロパティを対象の要素に適用する際には、特定のタグか id・class を指定してきました。このようなスタイルを適用する対象を指定する部分のことを「CSSセレクター」と呼びます。
実はセレクターにはタグや id・class 以外にも、指定する方法があります。
例えば、全称セレクター
すべてのセレクターをまとめて指定したいときは全称セレクターと呼ばれる * **「アスタリスク」**を使います。
これに加え、複数のセレクターなど
2つ以上のセレクターを指定したいときは , **「カンマ」**で区切ることで指定できます。
そのほかにも子孫セレクターや子セレクターなど様々セレクターがあります。その時の場合により上手く使い分けることが大切です。
まとめ
HTMLでのWebデザインもかなり終盤に近づいてきました。まだJava Scriptを使っていないWebデザインですが、かなり複雑で、初心者の自分ではまだ振り返りながらやらなければ充分にサイトを作ることは難しいです。教材でのコマは今回で終わりましたが、しっかり復習していき身につけていたいと考えました。