Progate widthの相対値の設定 インラインブロック要素

Question

.container（親要素） width:1170px; .lesson（子要素） width:25%;⇦292.5px txt-contents (.containerから見ると孫要素) (.lessonから見ると子要素) width:80%;⇦これは親要素の,lesson width:25%;に対しての80%(234px)という理解で良いでしょうか？ また.txt-contentsのcssにて display:inline-block;に指定する意味は p要素（インライン要素）なのでwidthの設定が出来ないからインラインブロック要素への変更という理解でよろしいでしょうか display:block;にしてはいけない理由があるのでしょうか

Answer 1

こんにちは。

---

これは親要素の,lesson width:25%;に対しての80%(234px)という理解で良いでしょうか？

はい、そうです。

---

display:inline-block;に指定する意味は p要素（インライン要素）なのでwidthの設定が出来ないからインラインブロック要素への変更という理解でよろしいでしょうか

いいえ、違います。
p要素は、デフォルトCSSではdisplay:blockだと思います。

Comments

[ga.ku]

回答ありがとうございます！
ご指摘ありがとうございます
pタグはブロック要素でしたね！
なぜスクショではdisplay:inline-block;を指定しているのでしょうか
そのままデフォのinline:block;では不都合があるのでしょうか？

[Lhankor_Mhy]

親要素に text-align: center を当てて、横並びにするとか、そういう使い方はありますね。

ただ、時代遅れのやり方なので、2021年に新たにそのようなレイアウトを使う意味はないです。
teratailに持ち込まれる質問を見る限りでは、progateのHTML＆CSSコースはアップデートされておらず、教材としては良くないものだと感じています。
教材の再検討をしてもいいかもしれません。

[ga.ku]

残念です
時代遅れのやり方なのですね
再検討も考えてみますね

Answer 2

追記　おー恥ずかしい。pをbodyの外まで持っていったら検証ツールにblockって表示されたよっ
いつも無意識でインライン要素に変換していたらしい。はて、でもどこで変わったのだろう？

たぶんツッコミが入ると思うのだけど、今のまま質問続けられるとすごく答えにくいです。
画像だとCSSしか分からないのでhtmlの構成が全く分からないんです。

恐らく…
0. bootstrapの幅1170pxを基準、
0. 4カラム表示とし、
0. 番号リストカラムの中のテキストを幅80％で表示する。

これをさせたい感じでしょうね。

また.txt-contentsのcssにて display:inline-block;に指定する意味は p要素（インライン要素）なのでwidthの設定が出来ないからインラインブロック要素への変更という理解でよろしいでしょうか

だいたいあってるのだけど、ちょっとだけ足らないかな。

インライン要素には上下方向のmarginが効かないはずなので、
margin:20px;という記述に対して、上下方向にもmarginを有効にするためにinline-blockにしている。
と言ったところでしょうか。

以下蛇足です。
pにいつもwidth当ててるからそのままでも効くよね？と思い当ててみたところ効かず…
なんでいつもできてるのに出来なんだろう？と検証したところ、
display:flex;をよく使うのでそのせいでした。
誤認していたことを修正できたので感謝です。
ありがとうございます！

追記　お礼を言ってみたれけど…まだ間違って覚えているらしい。
効かなきゃ効くように変えるだけだから、そこまで意識してないってことがバレたね！

Comments

[ga.ku]

回答ありがとうございます！
そうですよね
cssしかないとわかりづらいですよね
bootstrap?
まだ不勉強で知りませんでした・・・
これから頑張ります！

[退会済みユーザー]

> ga.ku様
bootstrapは簡単に見栄え良くできるというCSSフレームワークです。
同じようなサイトを量産するときに重宝するものですよ。

その中に「画面幅が1200px以上の時、中のcontainerは1170pxとする」というような記述があります。
なぜ1170pxにしたかったのかよくわからないんですが、それが作った人の感性なのかなと思ってます。

予めよく使いそうなCSSの記述をclass名を付けて指定することにより、
「bootstrapを入れてhtmlでclassを付けてやるだけで早くキレイになるよ！」
という状況を作り出しています。

誰かに雇われて「bootstrap使ってね」と言われたら絶対に覚える必要がありますが、
自分で案件を取ってくる場合は必須ではないです。
一時期流行ったんですが、最近は使わない方が良くないかな？という流れになっているようです。

とりあえず、今は覚える必要が無いものです。
サイトを手軽に量産したくなったら覚えればいいかと。

[ga.ku]

amiya-seさん
アドバイスありがとうございます！
自分は全くのプログラミング未経験の為、今はProgateを勉強してプログラミングというものの雰囲気を少しでも掴んでみようと思ってます！
何かおすすめの勉強などあればいつでも教えてください！