Mmemo

PC作業に関する覚書やweb制作記録。
無料で使える便利ツールやwebアプリも制作。サイト上(ブラウザ上)で動作。

[CSS] 2カラムレイアウト(固定幅 + 可変幅or残りの幅)

概要

2カラム用のレイアウト色々。

table型

レイアウトの仕方が直感的で分かりやすいと思われる。

左カラム(固定幅)、右カラム(可変幅)

parent
吾輩は猫である 吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
坊っちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
parent
吾輩は猫である 吾輩は猫である。
名前はまだ無い。
坊っちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。

左カラム(固定幅&上揃え)、右カラム(残りの幅)

parent
吾輩は猫である 吾輩は猫である。
名前はまだ無い。
坊っちゃん 親譲りの無鉄砲で小供の時から損ばかりしている。

code

div-float型

少々使い辛い印象。
table型とは違い右カラムの要素がそれぞれ独立しているので、可変幅にした場合は異なる幅となる。

左カラム(固定幅)、右カラム(可変幅)

parent
吾輩は猫である
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
parent
吾輩は猫である
吾輩は猫である。
名前はまだ無い。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。

左カラム(固定幅)、右カラム(残りの幅)

parent
吾輩は猫である
吾輩は猫である。
名前はまだ無い。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。

code

dl-float型

div-float型とほぼ同じ。
左カラムを固定する前提だとdlを使うような内容が多いかと。

左カラム(固定幅)、右カラム(可変幅)

parent
吾輩は猫である
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
parent
吾輩は猫である
吾輩は猫である。
名前はまだ無い。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。

左カラム(固定幅)、右カラム(残りの幅)

parent
吾輩は猫である
吾輩は猫である。
名前はまだ無い。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。

code

dl-flex型

左カラム(固定幅)、右カラム(残りの幅)

1行の場合のみなら選択肢に入るか。

parent
吾輩は猫である
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
parent
吾輩は猫である
吾輩は猫である。
名前はまだ無い。

code