Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

今日の1歩(HTML&CSS)

$
0
0

HTML&CSSで学んだこと

皆さんおなじみのProgateでHTML&CSSコースの勉強していたときに、おやっ?と思ったことがありました。私がHTML&CSS初心者だから躓いただけでおそらくみんな理解しているであろうことですが、頭の中の整理とアウトプットの練習という意味で書いてみます。

要素の中央揃え(ここで躓くとこが初心者っぽい)

こいつら(Progateのアイコン:imgタグ, 文章:pタグ)
スクリーンショット 2020-11-16 16.53.26.png

中央にていっ、てしたかった
スクリーンショット 2020-11-16 16.53.40.png

imgタグはインライン要素、pタグはブロックレベル要素だったはず。とりあえずmargin:0 auto;で行ってみるか。変化なし。。結果として、text-align:center;で中央に揃いました。

ここで1つ疑問がありました。marginプロパティをいじってimgが動かないのはわかるけど、pも動かないのはどうして?たしか中央揃えにしたい対象が、インライン要素ならtext-align、ブロックレベル要素ならmarginをいじればよかったはず。(どこかのサイトに書いてた)

ちょっち調べてみた

とりあえず背景色変えてブロックの範囲確認してみました。
スクリーンショット 2020-11-16 17.07.06.png

なんかpタグの範囲が広い。。調べてみたところ、
ブロックレベル要素の幅は、親要素とおなじになる。(おそらくwidth等の指定をしない場合)
とのこと。

だったらpタグの幅指定したらmarginいじって動くってことだよね?(頼む動いてくれ)

これが
スクリーンショット 2020-11-16 17.12.50.png

こうなった
スクリーンショット 2020-11-16 17.13.11.png

とりあえず思ったとおりに、動いてくれて安心しました。
1歩進む:runner:


Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>