2015/6/25 位置の指定方法 ブロックを横並びにする方法 志村 拓哉 ブロックについて ページを構成する基本要素となるもの <p>,<ul>,<ol>,<table>,<h1>~<h6>, <div> etc… <p>あいうえお</p> これで1つのブロック 通常コーディングした順に縦に並ぶ。 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 float: 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> 3つだけ、<li> 5つだけのよ うに1種類に統一されているとき 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
© Copyright 2025 ExpyDoc