CSSのレイアウトについて

この記事は3分で読めます

自分用メモ

随時追記していく

※参考:CSSの基礎知識。セレクタ、プロパティ、値とは?

レイアウトの3要素について


レイアウトを整える」という作業を具体的に言えば、
①サイズ
②間隔
③配置
この3要素を調整していくこと

CSSでは「ブロックレベル要素」に対して、
サイズと間隔を設定できる

※参考:クリエイティブ、プログラミング用語まとめ

このうち「間隔の設定」について具体例を挙げると…
・要素を縦や横に並べるときの間隔を指定する
・要素の縦線と中のテキストの間隔を指定する
・見出しと本文の間隔を指定する
・リストの行頭下げ

ボックスモデルの4要素とは


CSSでレイアウトをコントロールするためには
ボックスモデル」の知識が不可欠

ボックスモデルとは、HTML内の全ての要素が持つ領域のことで、
CSSでは、この箱のサイズを変えたり、
位置を調整したりしてレイアウトをしていく

ボックスモデルのイメージは以下の通り



以下4種類の概念で構成されている

・コンテンツ:要素の内容
・パディング:内容とボーダーの余白
・ボーダー:枠線
・マージン:ボーダーの外側にある余白

各領域の境界線を「」と呼び、
これらの領域は上下左右の4辺に分かれ、
CSSで個別にスタイルを適用する事ができる

・上:top
・下:bottom
・左:left
・右:rihgt

コンテンツ(contents)

テキストや画像、ボタンなど
Webページに実際に表示する内容の領域

ボーダー(border)

ボーダーは、要素の四辺に枠線を付けるもの
値の指定は「線種」「太さ」「色」の3つを半角スペースで区切って記述する
「border: solid 1px #8b7348」

パディング(padding)

パディングは要素の内側の間隔を指定する
「padding: 10px;」のように指定する

マージン(margin)

マージンは、隣り合う要素との距離を調整するために用いる
つまり「要素の外側の間隔」
ボックスの上下左右それぞれの距離を指定する
「marigin-top: 10px;」のように指定する
特定の辺だけに間隔を空ける指定をする事も可能

ボックスサイズの計算方法

ボックス全体の幅は、以下で決定する
左右のマージン+左右のボーダー+左右のパディング+コンテンツの幅

要素のサイズを指定するには


要素には、余白の他にサイズそのものを指定する事ができる

widthプロパティ」は、要素の横幅を指定する
「width: 300px;」のように書く

高さは「heightプロパティ」で指定する
ただ幅だけ指定して高さは指定しない事もある
「height: 512px;」のように書く

固定枠と可変枠の違いについて


Webサイトは「固定枠」と「可変枠」のいずれかで作成する

固定枠は、どの環境でも同じデザインを見せることが出来る
従来のWebサイトはこの形式を多く採用していた

可変枠は、ブラウザの表示幅に併せて変動するもの
レスポンシブWebデザインはこちら
同じデータであっても、閲覧環境によって表示が多少異なる

様々なカラムレイアウト


Webページのレイアウトには、いくつかの「型」がある
各パーツを複数列に配置する段組みの作り方がことなる
この列を「カラム」と呼ぶ

1カラム、2カラム、3カラムが代表的だが、
それ以上の多段レイアウトもそんざいする
Webサイトのコンセプトや、
インパクトのある演出を求める際に利用される

カラムは、Webサイトのターゲットや
環境を考慮して選択する

要素を浮かせるfloatプロパティ


カラムレイアウトを実現する方法はいくつかあるが、
現在一般的に使われてるのはfloatプロパティ
要素を浮動させて左右にスライドさせ、段組みを実現する
画像などの横にテキストを回り込ませる目的でも使われる

floatプロパティは、要素を”浮かせる”
これがポイント

値はleft, right, noneの3つの値を指定できる
デフォルトはnone

ブロックレベルやインラインを切り替えるdisplayプロパティ


ブロックレベルやインラインなどの特性を切り替えるには
displayプロパティを用いる
手軽なので、パンくずリスト等の小さいものに使われる

このプロパティを使用することで、
ブロックレベル要素をインライン要素に切り替える事ができる
(逆のことも出来る)

※参考:ブロックレベル要素、インライン要素、インラインブロック要素のまとめ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。