LoginSignup
0
0

More than 3 years have passed since last update.

HTMLのレイアウト調整基礎

Last updated at Posted at 2020-05-19

HTMLは1つのブロック(画面)をさらに細かいブロックに分けたり(ブロック要素)、そのブロックの中に文字等を並べる(インライン要素)ことができるプログラミング言語。また、CSS言語を用いることでその見た目を思い通りにできる。

と僕は理解しています。

ブロック要素

「div」や「h1」などを用いて記述可能領域を形成し、文書等を表現する要素

特徴

-ブロック要素の前後に改行が入り、要素同士は縦に整列
-横幅や高さを設定可能
-ブロックの外側余白(margin)や内側余白(padding)を設定可能

インライン要素

「a」や「span」などを用いてブロック要素内における文書等を横並びに表現する要素

特徴

-インライン要素の前後に改行は入らず、要素同士は横並びに整列
-ブロック要素内に横並びに記述する要素であるため、横幅や高さ、余白を設定できない

2つの要素を使いこなすために

CSSの「display」や「float」プロパティを用いることで、レイアウトを調整可能

CCCプロパティ 項目 意味 特徴
float: left 要素が左に流れ、後続の要素が右側に回り込む 「clear:both」「cleat:○○」を用いることで、流れ込みを防げる
right 要素が右に流れ、後続の要素が左側に回り込む 上と同様
display: inline 要素がインライン化
block 要素がブロック要素化
inline-block 要素がインライン要素とブロック要素両方の特徴を持つ
none 非表示にする
flex 親要素に指定すると、子要素が横並びになる フレックスボックスで検索

参考

WEBST
crwive

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0