初学者が躓きがちな、HTMLで使われるインライン要素、ブロック要素、インラインブロック要素の違いについて解説していきます。
インライン要素
インライン要素は文章の一部として扱われます。
インライン要素の特徴は以下の通りです。
- 要素が横に並ぶ
- 幅と高さの指定ができない
- 上下の余白の調整できない
インライン要素は上記に書いたとおり、幅と高さが指定できません。これはよくやってしまうミスなので気を付けましょう。width,hightを指定してもスタイルが効かない場合はインライン要素になってないか疑いましょう。
ブロック要素
ブロック要素は、コンテンツをまとめるための要素です。文章や情報が入った箱のイメージを持ってもらうと分かりやすいです。
ブロック要素の特徴は以下の通りです。
- 縦に要素が並ぶ
- 幅と高さの指定ができる
- 余白の調整ができる
ブロック要素はほんとに箱の中に要素を詰め込んで、積み上げていくイメージを持っていれば忘れずらいと思うのでぜひイメージしてみてください。
インラインブロック要素
インラインブロック要素は、簡単に言うとインライン要素とブロック要素の良いとこ取りです。名前の通りどちらの要素も兼ね備えています。
インライン要素の特徴は以下の通りです。
- 横に要素が並ぶ
- 幅と高さが指定できる。
- 余白の調整ができる
インラインブロックは、横にも並べることができる箱です。しかも、箱の大きさも自由に決められるのでとても便利です。
まとめ
この記事では、インライン要素、ブロック要素、インラインブロック要素の違いについて説明しました。最初は特に幅と高さの指定が効かないとか、思ったように並んでくれないという悩みが出てくると思いますが、今回の内容をしっかり押さえておけば困ることも少なくなるでしょう。とにかく、手を動かして覚えていきましょう。
「読んだだけでは100%身に付きません」
必ず行動に移してください。
そう言っても、
行動する人は20%
それを継続する人は5%
行動し続けるだけで、
上位5％に入ることができます。
今すぐ行動して上位5％に入り、
Web制作で本気で人生変えたい
そんな人は今すぐ登録してください
今行動しなきゃ、人生変わらないですよ
こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！
是非登録してみて下さい！
コメント