CSSのレイアウト
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>CSS]]
*目次 [#jb35b81b]
#contents
*概要 [#u552b382]
CSSのレイアウトって難しいですね。
というか専門的にやったことなかったので、~
この際、色々と調べてみました。
*基本 [#qf286d8d]
**ボックスモデル [#h21dfa30]
-↓を参考にするとイメージし易い。~
https://www.google.co.jp/search?q=%E3%83%9C%E3%83%83%E3%8...
***コンテンツ（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]]と[[インラインボックス>#k...
包含ブロック内に配置されるボックスは、~
[[ブロックボックス>#qf00ce14]]と[[インラインボックス>#k14...
***ブロックボックス [#qf00ce14]
-行を専有して、下にスタックされていく。
-width や height を指定できる。
-ブロックレベル要素はブロックボックスを生成する。
***インラインボックス [#k14a82a6]
-行内に、どんどん右・下にスタックされていく。
-以下を指定できない（img、input、textareaを除く）
--width や height (line-heightで代替)。
--margin、paddingの上下
-インラインレベル要素はインラインボックスを生成する。
***displayプロパティ [#i47b0ac9]
-ブロックレベル要素にdisplay: inline を指定すれば、[[イン...
-インラインレベル要素にdisplay: block を指定すれば、[[ブ...
これにより、単なるリンクをボタンのように表示することがで...
**配置方法（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]]を[[インラインボックス>#k1...
後続の[[ブロックボックス>#qf00ce14]]を 指定した方向と反対...
-[[ブロックボックス>#qf00ce14]]をフロートさせると、横いっ...
このため、幅指定が必要になる。決まったサイズがなければ、w...
***position プロパティ [#s01320b1]
-absolute（絶対配置）・fixed（固定配置） に設定されている...
--スタックしない。
-static（静的配置）・relative（相対配置）に設定されている...
--[[ブロックボックス>#qf00ce14]]がスタックされる方向を~
float: left; or float: right;によって、垂直方向から水平方...
--これにより、[[ブロックボックス>#qf00ce14]]を右から左 or...
***float プロパティのフロート解除 [#u70de0cf]
-子[[ブロックボックス>#qf00ce14]]がfloatプロパティで浮い...
-これにより、高さによって決まる親[[ブロックボックス>#qf00...
-以下の方法でfloatプロパティのフロートを解除することでこ...
-解除方法
--clear プロパティ~
フロートしている子[[ブロックボックス>#qf00ce14]]の後続の[...
子[[ブロックボックス>#qf00ce14]]の後続の[[ブロックボック...
---clear: left; 左側フロート要素の回り込み解除
---clear: right; 右側フロート要素の回り込み解除
---clear: both; 両側すべてのフロート要素の回り込み解除
--clearfix という手法~
---after擬似要素のセレクタを使用して、親[[ブロックボック...
---clearfix手法は、親[[ブロックボックス>#qf00ce14]]の後続...
--overflow: hidden~
後続のブロックボックスではなく、親ブロックボックスにoverf...
（autoまたはscrollでも解除可能だがスクロールバーが表示さ...
-参考
--cssのfloatを解除する方法 〜あこがれの2カラムレイアウト...
http://pbrsk.hatenablog.com/entry/2016/02/08/000416
--floatを解除する手法のclearfix と 次世代のレイアウトの話...
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を使う理由 ...
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]
高さ、幅の指定が無いブロックボックスを上下・左右の中央揃...
-包含ブロック（コンテナブロック）からの絶対座標配置（posi...
-左上を、包含ブロック（コンテナブロック）中央に合わせる（...
-そこから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;>#ve...
td要素の子要素に、これらが適用され、上下・左右の中央揃え...
--td要素の子要素がブロックレベル要素の場合、td要素ではな...
子要素に「margin: 0 auto;」を指定することで左右の中央揃え...
-参考
--display:table-cell;を安易に使うべきでない理由いろいろ -...
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/q...
*その他 [#af09d7c4]
**[[CSS3のレイアウト>CSS3#w3ed3639]] [#x783302a]
**[[Bootstrapのレイアウト>Bootstrap#v5377ce1]] [#g0751ec7]
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>CSS]]
*目次 [#jb35b81b]
#contents
*概要 [#u552b382]
CSSのレイアウトって難しいですね。
というか専門的にやったことなかったので、~
この際、色々と調べてみました。
*基本 [#qf286d8d]
**ボックスモデル [#h21dfa30]
-↓を参考にするとイメージし易い。~
https://www.google.co.jp/search?q=%E3%83%9C%E3%83%83%E3%8...
***コンテンツ（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]]と[[インラインボックス>#k...
包含ブロック内に配置されるボックスは、~
[[ブロックボックス>#qf00ce14]]と[[インラインボックス>#k14...
***ブロックボックス [#qf00ce14]
-行を専有して、下にスタックされていく。
-width や height を指定できる。
-ブロックレベル要素はブロックボックスを生成する。
***インラインボックス [#k14a82a6]
-行内に、どんどん右・下にスタックされていく。
-以下を指定できない（img、input、textareaを除く）
--width や height (line-heightで代替)。
--margin、paddingの上下
-インラインレベル要素はインラインボックスを生成する。
***displayプロパティ [#i47b0ac9]
-ブロックレベル要素にdisplay: inline を指定すれば、[[イン...
-インラインレベル要素にdisplay: block を指定すれば、[[ブ...
これにより、単なるリンクをボタンのように表示することがで...
**配置方法（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]]を[[インラインボックス>#k1...
後続の[[ブロックボックス>#qf00ce14]]を 指定した方向と反対...
-[[ブロックボックス>#qf00ce14]]をフロートさせると、横いっ...
このため、幅指定が必要になる。決まったサイズがなければ、w...
***position プロパティ [#s01320b1]
-absolute（絶対配置）・fixed（固定配置） に設定されている...
--スタックしない。
-static（静的配置）・relative（相対配置）に設定されている...
--[[ブロックボックス>#qf00ce14]]がスタックされる方向を~
float: left; or float: right;によって、垂直方向から水平方...
--これにより、[[ブロックボックス>#qf00ce14]]を右から左 or...
***float プロパティのフロート解除 [#u70de0cf]
-子[[ブロックボックス>#qf00ce14]]がfloatプロパティで浮い...
-これにより、高さによって決まる親[[ブロックボックス>#qf00...
-以下の方法でfloatプロパティのフロートを解除することでこ...
-解除方法
--clear プロパティ~
フロートしている子[[ブロックボックス>#qf00ce14]]の後続の[...
子[[ブロックボックス>#qf00ce14]]の後続の[[ブロックボック...
---clear: left; 左側フロート要素の回り込み解除
---clear: right; 右側フロート要素の回り込み解除
---clear: both; 両側すべてのフロート要素の回り込み解除
--clearfix という手法~
---after擬似要素のセレクタを使用して、親[[ブロックボック...
---clearfix手法は、親[[ブロックボックス>#qf00ce14]]の後続...
--overflow: hidden~
後続のブロックボックスではなく、親ブロックボックスにoverf...
（autoまたはscrollでも解除可能だがスクロールバーが表示さ...
-参考
--cssのfloatを解除する方法 〜あこがれの2カラムレイアウト...
http://pbrsk.hatenablog.com/entry/2016/02/08/000416
--floatを解除する手法のclearfix と 次世代のレイアウトの話...
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を使う理由 ...
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]
高さ、幅の指定が無いブロックボックスを上下・左右の中央揃...
-包含ブロック（コンテナブロック）からの絶対座標配置（posi...
-左上を、包含ブロック（コンテナブロック）中央に合わせる（...
-そこから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;>#ve...
td要素の子要素に、これらが適用され、上下・左右の中央揃え...
--td要素の子要素がブロックレベル要素の場合、td要素ではな...
子要素に「margin: 0 auto;」を指定することで左右の中央揃え...
-参考
--display:table-cell;を安易に使うべきでない理由いろいろ -...
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/q...
*その他 [#af09d7c4]
**[[CSS3のレイアウト>CSS3#w3ed3639]] [#x783302a]
**[[Bootstrapのレイアウト>Bootstrap#v5377ce1]] [#g0751ec7]
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
