skillup

技術ブログ

デザイン

CSSのブロックとインライン、レイアウトについて

投稿日:2016年7月16日 更新日:

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。

ブロックレベルとインライン

ブロックレベル要素

その名のとおり、HTML上でブロックを構成する要素。div,p,table,ul,li,h1~h6,formなど。

  • ブロックレベルは縦につまれる → つないで書いた場合、改行される。
  • 幅が定義される→ width,height,margin,padding,borderなどがプロパティとして存在している
  • ブロックレベルはブロックレベルとインラインを包有できる
  • display:inlineでインライン要素にできる
  • 子要素の幅を指定していない場合、包有要素がその幅を決める(親でないときもあり。例:position)

インライン要素

ブロック要素の一部であり、段落の一部の要素に対して使われる。a,span,img,strong,fomの要素全般,

  • 幅という概念がないので、基本的に横に並ぶ
  • width,heightがない。margin,paddingは左右のみ。上下は見た目にはわからない・・・

レイアウトに関して

float

レイアウトを組む時に結構悩みの種ですね。

以下にまとめを。リンクでいろいろと解説してくれているのでありがたいっす。

  • floatは単に左右によるのではなく、浮くことになるので子要素がすべてfloatした場合、親要素からみると存在しない状態になってしまう。
  • 上記の性質のため、親>子がすべてfloatした場合(ulとliなど)は、親の高さや幅が0になる。そのため親要素にclass=”clearfix”を入れるか、overflow:hiddenを与える方法が一般的ですが、overflow:hiddenは禁じ手と考えている方もいるようです。
  • 上記の性質のため、後続要素を配置する場合(footerなど)にはclear:bothなどでfloatの下への回り込みを解除する必要がでてくる。
  • floatさせる要素は原則widthを指定する

参考リンク

position

通常のレイアウトからずれたものや重なった配置などをレイアウトできる。

ある基準点を対象にそこからどれくらいの位置にあるか、という記述になる

参考リンク

CSSの基本 レイアウトのおさらい
【CSS】意外と難しい「position」の使い方を詳しく解説してみた

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …