![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>CSS]] *目次 [#jb35b81b] #contents *概要 [#u552b382] CSSのレイアウトって難しいですね。 というか専門的にやったことなかったので、~ この際、色々と調べてみました。 *基本 [#qf286d8d] **ボックスモデル [#h21dfa30] -↓を参考にするとイメージし易い。~ https://www.google.co.jp/search?q=%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%A2%E3%83%87%E3%83%AB&tbm=isch ***コンテンツ（content） [#md3c875c] -コンテンツ自体。 -コンテンツのwidth, height (= ボックスサイズ)は、~ 下記のボーダー（border）と、余白（padding、margin）を含まない。 ***ボーダー（border） [#oae6be9e] -境界線の太さを指定する。 -borderプロパティにて指定。 ***内容とボーダーの間の余白（padding） [#n833f4c0] -境界線とコンテンツの間の余白を指定する。 -paddingプロパティにて指定。 ***ボーダーと他のボックスとの間の余白（margin） [#b45c1c41] -境界線と[[包含ブロック>#i75661bf]]の間の余白を指定する。 -marginプロパティにて指定。 -marginの重ね合わせ。 --上下の要素間でmarginの重ね合わせが起きる。 --親子の要素間でも、marginの重ね合わせが起きる。 ---ただし、親要素にborderを指定すると重ね合わせは起きない。 ---ただし、親要素にpaddingを指定すると重ね合わせは起きない。 **包含ブロック（コンテナブロック） [#i75661bf] 最も近い祖先の要素にあたる[[ブロックボックス>#qf00ce14]]を形成する要素の内容領域 ***子要素の位置と大きさは、包含ブロックに依存 [#ub595026] -位置：~ 自要素の[[position プロパティ>#n74b5898]]に依存。 -自要素の大きさ：width、height などの プロパティに依存。 --子要素に width、height を指定してない場合、 --子要素に width、height に % 指定をしている場合 ***子要素の位置の基準点 ≠ 包含ブロックのケース [#v06a70d5] -基本的に、子要素の位置の基準点は ≒ 包含ブロックだが、 -自要素の[[position プロパティ>#n74b5898]]がstaticの場合は、~ 子要素の位置の基準点は包含ブロック内の左上の要素になる。~ （通常フロー：左上から右下にスタックしていく）。 **[[ブロックボックス>#qf00ce14]]と[[インラインボックス>#k14a82a6]] [#v48d1bad] 包含ブロック内に配置されるボックスは、~ [[ブロックボックス>#qf00ce14]]と[[インラインボックス>#k14a82a6]]のふたつに分けられる。 ***ブロックボックス [#qf00ce14] -行を専有して、下にスタックされていく。 -width や height を指定できる。 -ブロックレベル要素はブロックボックスを生成する。 ***インラインボックス [#k14a82a6] -行内に、どんどん右・下にスタックされていく。 -以下を指定できない（img、input、textareaを除く） --width や height (line-heightで代替)。 --margin、paddingの上下 -インラインレベル要素はインラインボックスを生成する。 ***displayプロパティ [#i47b0ac9] -ブロックレベル要素にdisplay: inline を指定すれば、[[インラインボックス>#k14a82a6]]として表示 -インラインレベル要素にdisplay: block を指定すれば、[[ブロックボックス>#qf00ce14]]として表示~ これにより、単なるリンクをボタンのように表示することができる。 **配置方法（position プロパティ） [#n74b5898] -ボックスの配置位置を決めるためのボックスの配置方法を指定 -指定できる値には、static、relative、absolute、fixed がある。 ***static（静的配置） [#p6e6f5be] -既定値（position プロパティを指定しないとき） -[[包含ブロック>#i75661bf]]の左上 or スタック対象ブロックの右下が起点となる。 -起点から、右下方向に順にスタックさせる通常フローと呼ばれるスタック方式 ***relative（相対配置） [#f391cf07] -[[包含ブロック>#i75661bf]]の左上 or スタック対象ブロックの右下が起点となる。 -起点をtop、left、right、bottom プロパティの相対位置指定で変更可能。 -変更後の起点から、右下方向に順にスタックさせる通常フローと呼ばれるスタック方式 ***absolute（絶対配置） [#hf451572] -[[包含ブロック>#i75661bf]]の左上から、 左上座標の絶対配置をtop、left、right、bottom プロパティで指定可 -この場合、起点となるのは、 --static 以外の値が指定されているボックスの左上になる。 --起点となるボックスがない場合、”HTMLの描画領域”が配置位置の基準点になる。 -これはスタックしないので、フローではない（Z軸で重なる）。 ***fixed（固定配置） [#s5b916a0] -absolute を指定したときと同じ様な仕組みで配置 -absolute と異なる点、 --配置位置の基準点が”画面表示領域”に固定される点。 --従って、スクロールしても、常に同じ位置に表示され固定される。 -同様に、これはスタックしないので、フローではない（Z軸で重なる）。 **スタック方向（floatプロパティ） [#xec6ed76] -[[ブロックボックス>#qf00ce14]]を[[インラインボックス>#k14a82a6]]のように、左、または右に寄せて配置し、~ 後続の[[ブロックボックス>#qf00ce14]]を 指定した方向と反対方向にスタックさせる配置方法 -[[ブロックボックス>#qf00ce14]]をフロートさせると、横いっぱいに広がらなくなる。~ このため、幅指定が必要になる。決まったサイズがなければ、width: autoを指定する。 ***position プロパティ [#s01320b1] -absolute（絶対配置）・fixed（固定配置） に設定されている場合、 --スタックしない。 -static（静的配置）・relative（相対配置）に設定されている場合、 --[[ブロックボックス>#qf00ce14]]がスタックされる方向を~ float: left; or float: right;によって、垂直方向から水平方向の左・右どちらかに変更する。 --これにより、[[ブロックボックス>#qf00ce14]]を右から左 or 左から右にスタックさせるフローを実装が可能になる。 ***float プロパティのフロート解除 [#u70de0cf] -子[[ブロックボックス>#qf00ce14]]がfloatプロパティで浮いて、親[[ブロックボックス>#qf00ce14]]が高さを認識できなくなる。 -これにより、高さによって決まる親[[ブロックボックス>#qf00ce14]]の描写領域が表示されなくなる。 -以下の方法でfloatプロパティのフロートを解除することでこの問題にも対応できる。 -解除方法 --clear プロパティ~ フロートしている子[[ブロックボックス>#qf00ce14]]の後続の[[ブロックボックス>#qf00ce14]]に指定する。~ 子[[ブロックボックス>#qf00ce14]]の後続の[[ブロックボックス>#qf00ce14]]が存在しない場合、空のdivを置いてコレに適用する。 ---clear: left; 左側フロート要素の回り込み解除 ---clear: right; 右側フロート要素の回り込み解除 ---clear: both; 両側すべてのフロート要素の回り込み解除 --clearfix という手法~ ---after擬似要素のセレクタを使用して、親[[ブロックボックス>#qf00ce14]]の後続の[[ブロックボックス>#qf00ce14]]にclear プロパティを指定する手法。 ---clearfix手法は、親[[ブロックボックス>#qf00ce14]]の後続の[[ブロックボックス>#qf00ce14]]が存在しない場合でも適用可能。 --overflow: hidden~ 後続のブロックボックスではなく、親ブロックボックスにoverflow: hiddenを指定する。~ （autoまたはscrollでも解除可能だがスクロールバーが表示されるので問題） -参考 --cssのfloatを解除する方法 〜あこがれの2カラムレイアウト〜 - やさしく つよく おもしろく~ http://pbrsk.hatenablog.com/entry/2016/02/08/000416 --floatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17~ http://kojika17.com/2013/06/clearfix-2013.html --結局どれをつかえばいいの？floatの解除方法を3つ比較してみる~ これからWEBデザイナーを目指す高校生のブログ~ http://stinkear.blog39.fc2.com/blog-entry-3.html --デザインサンプルで学ぶCSSによるスタイリング～~ 「floatプロパティによるレイアウト」編 (1/4)：CodeZine（コードジン）~ https://codezine.jp/article/detail/8239 *個別 [#a08df518] **tableタグ [#rae95cb7] 古の方法。 ***メリット [#gc4757fa] CSSのレイアウトより簡単なので、 -初心者でも使いやすい。 -難しいことをしないのでブラウザ間の差異が無い。 ***デメリット [#a9b05660] 以下の理由で、コンテンツのメンテナンス性の低下、レイアウト変更の手間が増加。 -HTMLとデザインを切り離せない（CSSなら切り離すことができる）。 -文章構造の論理性・汎用性が確保できなくなる。 -複雑化し易い（エクセル方眼紙 in Webみたいなことに） ***参考 [#lc457364] -ホームページのレイアウトはテーブルではなくCSSを使う理由 | 大阪のホームページ制作会社YCOM~ http://www.y-com.info/contents/?p=388 **横並べ [#r1c60978] 以下の2つの方法がある。 ***[[floatプロパティ>#xec6ed76]] [#te1189ef] ***[[display: inline>#i47b0ac9]] [#p62426fc] **中央揃え [#xdc8bc68] ***text-align:center; vertical-align:middle; [#ve9b3728] -インラインレベル要素を上下・左右の中央揃えにする最も一般的な方法。 -ブロックレベル要素は中央寄せにならないので、 --display:inline-block;でインラインレベル要素にする。 --もしくは、[[display:table-cell;>#ie078fdd]]を使用する。 ***line-height:heightの値px [#ff82f281] -インラインレベル要素を上下中央揃えにするハック的な方法。 -heightの値と、line-heightの値を同じにして上下中央揃え。 -2行以上になると、2行目以降が要素からはみ出してしまう。 ***padding: xx px yy px; [#v2aeeb43] -自要素に、高さ、幅の指定が無い（サイズが可変の）場合のみ有効。 -この場合、paddingは、記述した順に[上下][左右]のパディングとなる。 -この2つの値を指定したpaddingにより上下・左右の中央揃えになる。 ***marginを使う。 [#cf68b378] 応用して、右寄せ・左寄せ、上寄せ・下寄せなどもできる。 -margin:auto --上下・左右の中央揃えにする。 --自要素に、高さ、幅の指定が有るブロックボックスの場合のみ有効。 --自要素に、高さ、幅の指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。 -margin:auto 0; --上下の中央揃えにする。 --自要素に、高さの指定が有るブロックボックスの場合のみ有効。 --自要素に、高さの指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。 -margin:0 auto; --左右の中央揃えにする。 --自要素に、幅の指定が有るボックスの場合のみ有効。 --自要素に、幅の指定が無い場合、自要素が親要素のサイズに合わせて伸びてしまう。 ***positionを使う。 [#vf1fbbbf] 高さ、幅の指定が無いブロックボックスを上下・左右の中央揃えにする。 -包含ブロック（コンテナブロック）からの絶対座標配置（position:absolute;）を使用する。 -左上を、包含ブロック（コンテナブロック）中央に合わせる（top:50%; left:50%;） -そこからCSS3の transform: translate(-50%,-50%);で左上を中央に調整する ***display: table-cell;、display:table-cell; [#ie078fdd] -親要素に「display:table;」と子要素に「display:table-cell;」を指定する。 -display:table; --table要素のようになる。 -display:table-row; --tr要素のようになる。 --子要素の高さが同じになる。 -display:table-cell; --td要素のようになる。 --td要素は均等に配置される。 --td要素に[[text-align:center; vertical-align:middle;>#ve9b3728]]を指定すると、~ td要素の子要素に、これらが適用され、上下・左右の中央揃えにする。 --td要素の子要素がブロックレベル要素の場合、td要素ではなく、~ 子要素に「margin: 0 auto;」を指定することで左右の中央揃えにする。 -参考 --display:table-cell;を安易に使うべきでない理由いろいろ - Qiita~ http://qiita.com/sawadays0118/items/4c329fd05cdff14ffebc ***参考 [#babf9f5e] -【CSS】様々な要素を中央揃えにする方法 | Creator Clip~ http://creatorclip.info/2014/05/css-layout-center/ -CSSで中央寄せの方法いろいろメモ - Qiita~ http://qiita.com/KAMEch/items/b52c5e23212b8fef81a7 -floatしたものを中央に寄せたい！ - Yahoo!知恵袋~ http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11120240036 *その他 [#af09d7c4] **[[CSS3のレイアウト>CSS3#w3ed3639]] [#x783302a] **[[Bootstrapのレイアウト>Bootstrap#v5377ce1]] [#g0751ec7] **[[CSS3のレイアウト>CSS3#w3ed3639]] [#x783302a]
