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

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

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

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …