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

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

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

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

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …

アーカイブ