位置の指定方法ブロックを横並びにする方法

2015/6/25
位置の指定方法
ブロックを横並びにする方法
志村拓哉
ブロックについて
 ページを構成する基本要素となるもの
 <p>,<ul>,<ol>,<table>,<h1>～<h6>, <div> etc…
<p>あいうえお</p>
これで１つのブロック
 通常コーディングした順に縦に並ぶ。
1
2015/6/25
横並びにする方法
① floatプロパティ
② displayプロパティ
 記述位置：CSS
 セレクタの対象：h1, p , ul などの対象に文字列を含む要素
横並びにする方法
① floatプロパティ
② displayプロパティ
 記述位置：CSS
 セレクタの対象：h1, p , ul などの対象に文字列を含む要素
2
2015/6/25
① floatプロパティ
 役割：回り込み
 記述方法セレクタ{ float: left; }
→左から横に並ぶ
 floatを適用するとそれ以降の要素にも回り込みが引き継がれる
通常
floatを指定
div1
通常は縦並び
div2
div1
div2
div3
div{float: left;}
div3
指定した要素が横並びになる
*clearプロパティ
 役割：回り込み解除
 記述方法: セレクタ{ clear: left; }
clear を指定
通常
img
float: left;
を指定
p1
ｆloat: left; を指定
p2
スペースが空いている
ので回り込む
img
float: left;
p1
float: left; を指定
を指定
p2
clear: left; を指定
回り込まない
*その他の値にはr ight, both があり、通常はbothを指定。
3
2015/6/25
横並びにする方法
① floatプロパティ
② displayプロパティ
 記述位置：CSS
 セレクタの対象：h1, p , ul などの対象に文字列を含む要素
横並びにする方法
① floatプロパティ
② displayプロパティ
 記述位置：CSS
 セレクタの対象：h1, p , ul などの対象に文字列を含む要素
4
2015/6/25
②displayプロパティ
 役割：指定された要素をどのように表示させるかを設定する
 記述方法：セレクタ{ display:
inline; } →横並びになる
floatとdisplayの使い分け
(ⅰ)横並びにしたい要素の種類がh1,p,imgなどバラバラの
状態のとき
 float :○
 display :×
(ⅱ)横並びにしたい要素が<p> ３つだけ、<li> ５つだけのよ
うに１種類に統一されているとき
 float :×
 display : ○
5
2015/6/25
まとめ
① floatプロパティ
•
•
セレクタ{ float: left; } 回り込みによって横並びにする
セレクタ{ clear: both } で回り込み解除
② displayプロパティ
•
セレクタ{ display: inline; }で横並び
 記述位置：CSS
 セレクタの対象：h1, p , ul などの対象に文字列を含む要素
参考文献
 「ホームページ HTML & CSS」技術評論社
 「Progate」 http://prog-8.com/
6

Download Report