【プログラミング独学12日目】displayプロパティのblock要素／inline要素・inline-block・position
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。12日目に突入しました。
私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。
https://chanmk.tokyo/programming_1/今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
【プログラミング独学12日目】学んだこと
今日もCSSの続きをやりました。昨日から久しぶりに歯科SEO記事も書き始めたので、そちらが楽しいのもあってプログラミングに思い切り打ち込めていません・・・。今日は子どもを寝かしつけてから1時間ほどプログラミング学習を行いました。
今日気付いたのは、ドットインストールで先生に質問できる回数が上限に達していたということです。1ヶ月に質問できる回数が決まっていて、わずか4日間で上限に達してしまいました。有料会員なのに何で上限設けるんだ〜と思いましたが、上限が無いと自分で調べずに質問しまくるからですね。たしかに自分で調べるのが面倒で先生に質問しすぎていた気もします。
①displayプロパティのblock要素／inline要素の配置
displayプロパティはblock要素とinline要素の2つに分けられます。inline要素は文中に配置されるような要素です。
displayプロパティのblock要素
<h1>、<p>、<div>、<section> など
displayプロパティのinline要素
<img>、<span>、<a>、<input> など
それぞれがページに追加されたとき、block要素は下に追加されていくのに対して、inline要素は左に詰めて追加されていきます。block要素は縦書き、inline要素は横書きとイメージするとわかりやすいかもしれません。
displayプロパティのblock要素
<h1>A</h1>
<h1>B</h1>と記述したとき、下に追加されていくため以下のように表示される。
A
B
displayプロパティのinline要素
<span>A</span>
<span>B</span>と記述したとき、左に詰めて追加されていくため以下のように表示される。
AB
例えばblock要素である<div>タグで指定したものは、順番に下に追加されていく形で表示されます。しかしこれを左詰めの横並びで表示させたい場合は、以下のように記述すれば良いのです。
display : inline ;②displayプロパティのblock要素／inline要素のデフォルトサイズ
それぞれがサイトに表示されるとき、block要素はwidthが画面の幅いっぱい、heightがコンテンツの高さであるのがデフォルト設定です。それに対してinline要素は、widthがコンテンツの幅、heightがコンテンツの高さとなっています。
③displayプロパティのblock要素／inline要素のサイズ変更
block要素はwidthやheightプロパティを使ってサイズ変更ができます。しかしinline要素はwidthやheightを使ってサイズ指定をしても無効になります。例えばblock要素である<div>タグで指定したものは、順番に下に追加されていく形で表示されますが、これを左詰めの横並びで表示させたい場合は以下のように記述します。
display : inline ;しかしinline要素に切り替わったことで、それまで指定していたサイズが無効になります。これによりレイアウト上は左詰めの横並びで表示されるものの、ブロックのサイズはコンテンツの幅と高さに戻った状態で表示されるということです。inline要素で左詰めの表示を維持しつつサイズ変更を行いたい場合は、以下のように記述するとサイズ変更ができるようになります。
display : inline-block ;まとめるとそれぞれの違いは以下のようになります。
| display | 配置 | サイズ操作 |
| block | 下に追加されていく | 有効 |
| inline | 左に詰めて追加される | 無効 |
| inline-block | 左に詰めて追加される | 有効 |
④要素自体を表示させたくないとき
要素自体を表示させたくないときは以下のように記述します。
display : none ;⑤positionプロパティのrelative
通常通りに配置してほしいときは以下のように記述します。
position : static ;要素をstaticの位置からずらしたい場合は、「relative」を使って以下のように記述します。
position : relative ;
top : 30px ;
left : 30px ;
}relativeではtop、bottom、right、leftの中から指定することができます。上のようにtopとleftを指定すると、staticの位置からブロック上部を30px、ブロック左側を30pxずらした位置に表示されます。ややこしいですが、指定した部分（今回でいうtopとleft）に指定した幅の余白ができると考えるとわかりやすいかもしれません。
⑥positionプロパティのfixed
今度はfixedで指定してみましょう。
position : fixed ;
top : 30px ;
left : 30px ;
}fixedはウィンドウ左上を起点として、指定した位置にブロックが固定されます。この固定は画面をスクロールしても変化が無く追従してくるような形です。なおfixedにより移動させたブロックは、元いたスペースは打ち消され他の要素を詰めて表示されます。つまり元々そこにいなかったかのように表示されます。
【プログラミング独学12日目】わからなかったこと・調べてわかったこと
今日学んで疑問が残った部分は以下です。
- そもそもdisplayプロパティとは
- 「none」じゃなくて要素ごと消すんじゃだめなの？
- position : static ; の必要性
そもそもdisplayプロパティとは
突然「displayプロパティ」という名が出てきて、当然のように説明が進んでいくのですが・・・そもそもdisplayプロパティとは何者なのか。
タグの意味や役割を踏まえつつも、自由にレイアウトしたい。そんな時に使うのがdisplayプロパティです。ブロック要素をインライン要素に、インライン要素をブロック要素にするなど、要素の状態を変更できるプロパティです。
参考侍エンジニアブログ
display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。
参考MDN
・・・理解しきれていませんが、ひとまずコーディングの上では欠かせないとても便利なプロパティなんだということがわかりました。
「none」じゃなくて要素ごと消すんじゃだめなの？
displayプロパティにおいて、要素自体を表示させたくないときは以下のように記述するとのことでした。
display : none ;ただわざわざこのような記載をしなくとも、要素ごと削除したりコメント化したりすれば良くないか？と思いました。同じように思った方もいたようで、その方の質問に対する回答で以下のように書かれていました。
なるほど。これは「none」にしたらコメント化では見られてしまう部分も見えなくなるということなんでしょうか・・・？先生に質問はもうできないのと、CSSで再現させデベロッパーツールで確認する元気も無いのでひとまず深掘りしないでおきます。
position : static ; の必要性
「通常通り」の定義がわからないですが、記載する必要はあるのか？と思いました。同じように思った方もいたようで、その方が質問し得られた答えは「一般的に書く必要は無い」とのことでした。スクールなので教科書通りというか、一応必要無い部分も教えておいたという感じでしょうか。