HTML&CSS 「ブロック要素、インライン要素について」

アイキャッチ画像 プログラミング
スポンサーリンク

この記事はHTML&CSS 「ブロック要素、インライン要素について」を紹介しています。

こんにちはカピドンです。

今回の興味はプログラミングです。

progateで学んだことをまとめて、不足している部分を追加したりしています。

復習や補足として使ってください。

私も学習中の身なので、間違っている箇所があるかもしれません。

もし間違っていたら、教えていただけると嬉しいです。

カピドン(物語オタク)(@kapidon_reads)さん | Twitter
カピドン(物語オタク) (@kapidon_reads)さんの最新ツイート。物語、筋トレ、ゲーム、ITのために生きています。 現在は大学生。 物語を1000作以上見てます。 また筋トレ初めて約半年で体脂肪率30→18%になりました。 大学生のうちに筋トレ、プログラミング、イラスト、物語、マーケティング、ブログ、YouT...
スポンサーリンク

HTML&CSS 「ブロック要素、インライン要素について」

HTML&CSSの要素には、ブロック要素とインライン要素という概念があります。

実際にWEBサイトなどを製作するには、これらの理解が必要不可欠なので、それぞれ解説していきたいと思います。

ブロック要素

See the Pen
block
by カピドン(プログラミング勉強中) (@kapidon_reads)
on CodePen.

ブロック要素は、上記のような感じになります。

この要素の特徴として

  1. 親要素の幅に可能な限り広がる
  2. 改行される
  3. heightとwidthが指定できる

の三つがあります。

インライン要素

See the Pen
inline
by カピドン(プログラミング勉強中) (@kapidon_reads)
on CodePen.


インライン要素は、上記のような感じになります。

この要素の特徴として

  1. 要素分だけ広がる
  2. 改行されない
  3. heightとwidthが指定できない

の三つがあります。

displayプロパティについて「ブロックとインラインを変更できる!?」

インライン要素に幅と高さを指定したいということがあるかもしれません。

そんな時にはdisplayプロパティを使い、インライン要素をブロック要素に変更することが出来ます。

このプロパティには

  • none
  • block
  • inline
  • inline-block

の四つの値があります。

詳しくはこちらの記事をどうぞ!!(後日更新)

HTML&CSS 「ブロック要素、インライン要素について」まとめ

この記事では

  • HTML&CSSの要素にはブロック要素とインライン要素がある。
  • ブロック要素には「親要素の幅に可能な限り広がる」「改行される」「heightとwidthが指定できる」という三つの特徴がある。
  • インライン要素には「要素分だけ広がる」、「改行されない」、「heightとwidthが指定できない」という三つの特徴がある。
  • display要素を使えばインライン要素からブロック要素に変えることが出来る。

という感じのことを紹介しました。

プログラミング大国を目指してカピドンでした。

ではでは。

コメント

タイトルとURLをコピーしました