学習内容

理解した点

display: blockの特徴について ①要素の間に改行が入り、縦に並ぶ。 ②上下左右のmargin、paddingを指定できる。 ③textーalign、vertical-alignの指定はできない。
display: imlineの特徴について ①要素の間に改行が入らず、横に並ぶ。 ②基本的にはblockをinlineに入れる形で使う。(逆はほとんどない) ③CSSで高さや、幅を指定できない。要素の高さや幅は、テキストの長さや文字の幅などによって決まる。 ④左右のpadding、marginは指定できるが、上下のmarginは指定できない。また、上下のpaddingは指定できるが、値が大きくすると改行した時に前後の行に被ってしまいデザインが崩れてしまう。５textーalign、vertical-alignの指定ができる。ただし、「textーalign」を指定する場合は適用したい要素の親要素に指定する必要がある。逆に、「vertical-align」は適用したい要素に直接指定すれば良い。

※inline⇔blockはCSSで指定すれば切り替える事ができる。

display: inline-blockの特徴について ①ざっくりいうと、blockとinlineの間をとったような特徴。要素はinlineのように横並びになり、テキストなどの要素の中身はblock的な性質を持つ。 ②blockと同様に高さ、幅、上下左右のpadding、marginの指定ができる。 ③textーalign、vertical-alignの指定ができる。
display: inline-blockの使いどきについて基本的に要素を横並びにしたい時に使う。(メニューバーとかボタンとか) これをblockで行おうとすると改行が入る為、「float:left」などを使わないといけなくなり inlineで行おうとすると、高さや幅が指定できない。
noneについて ①これを設定すると、ブラウザ上で非表示になる。 ②ただし、あくまでも表示されないというだけで、webページを開く際には読み込まれる為ページの表示速度が速くなるような事はない。 ③主にレスポンシブデザインを作る際に用いる。例えば、「とある要素をパソコンで開かれた時は表示するが、画面が小さいスマホで開いた場合は非表示にする」と言った具合。

block、inlineの違い等は前に学習していた時も、あまり覚えられていなかったのでこの機会にしっかり押さえたい。

引き続きサルワカを読み進める。出来れば、課題にも少しでいいので着手する。