HTMLにはブロック要素とインライン要素がありましたね👍
なにそれって方は、前の記事を参考にしてみてください😊
▶https://qiita.com/akari_0618/items/f3b6892932cb6080c905
①display:block
実際に制作していると、ここ要素変えたいなってときがあるとします！
そのときに使えるのが、こちらのプロバティです！
インライン要素をブロック要素に変えることができるものです👍
では、実際にみていきましょう！！
index.html
<a href="#">テスト</a>
style.css
a {
background-color: aqua;
border-radius: 30px;
width: 40%;
}
これをブラウザ上でリロードしてみましょう！
おそらくwidthが効いていないのではないでしょうか。
インライン要素は文字の数分だけしか範囲が効かなかったですね。
ではではここにdisplay:block;を足してみましょう！
style.css
a {
background-color: aqua;
border-radius: 30px;
display: block;
width: 40%;
}
おお！変わりましたね👍
そんな感じです👌
②display:inline;
こちらは、先程とは反対でブロック要素をインライン要素に変えます！
index.html
<h1>今日は雨が降っています</h1>
<h2>外に出たくなかったです</h2>
今回もわかりやすいようにバックグラウンドカラーを足しました👍
ブロック要素なので横幅いっぱいに並んでいて、積み木のような形になっていますね！
ではこれらを、横並びにしていきたいと思います！
では、cssに次のように記入していきましょう！
style.css
h1 {
background-color: blue;
display: inline;
}
h2 {
background-color: brown;
display: inline;
}
これで、ブロック要素からインライン要素に変更することができました。
横並びになりましたね😊