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

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

アーカイブ