可変型2段カラムに苦戦してみた

実は、3日ほど前ゲッソリするほど、苦戦してたのって、
可変型2段カラムだったりして。
しかも、普段そんなにWebの仕事に時間をかけられなくて、
(一カ所でグラフィックの仕事もしてて、そっちがメインになってしまっていて、
印刷物の仕事どか!って盛られた合間にやってるから)
めんどくさかったらテーブルでさくっと組んじゃうことが多かったんだけど、
可変にしたかったり、
あとは100ページ似たようなページを作らないといけないってのがあって、
あんまりお粗末なものをつくると後で自分で修正するの億劫だわ…とか(笑)
というか、しっかりCSSで組んじゃった方が、
デザイン変更したくなったときもあっさりできるしね。
可変じゃないやつはあっさりできたんだけど、
可変にしようとするとカラム落ちがする。
へっぽこすぎて泣いた(*ノ_<*) 次回のときの自分用メモも兼ねて、 そんなときに役に立ちそうなリンクをペタペタしていく。 うさうさんが、まさに参考にしたページ 2カラムリキッドレイアウトのCSSサンプルソース|floatレイアウトサンプルソース
CSSによる2カラム(2段組)レイアウト【CSSによる段組(マルチカラム)レイアウト講座】
さっきみつけたら、むしろ1から読んだ方が良さそうなページ(笑)
法則51 2カラムの可変レイアウトにはネガティブマージンを使用する【クリエイターが身につけておくべき新・100の法則】
実は、作っていたページが
ページ自体(緑の枠)も2段カラムでメニューメイン部分は固定のメインは可変、
さらにその中にボックス(ピンクの枠)があってそこも固定と可変があるという構造でして。

ほぼ上のサイトのまま大きさとかは変えていれたら、
・ボックスの下に謎の余白
・iPadでみたときの幅だと、子ボックスが右がキレてる(´・ω・`)
この辺りは、やっぱり工夫が必要だったかも。
★ボックスの下に謎の余白
これは、ボックスの中のwropperのCSSとこに、

overflow:hidden

を入れる。
レスポンシブデザインで右側に謎の空白ができたときの解決策 | koukiTips
このページじゃないんだけど似たようなことを書いてあるページを見つけたんだよね。
理由は書いてあったような書いてなかったようなだけど、
とりあえず解決したのでいいかなと思う(笑)
★iPadでみたときの幅だと、子ボックスの右が切れてる
・まずは右のmarginを調節する
・次に、タブレットなどの場合のコンテンツをメタで指定してしまう。
どうしてもアメブロの制限でここには書けなかったので、
(全角にしてみるとかも試したけど全然書けなかった)
いちおう、これのことね。
マルチデバイス対応方法(viewport,CSSの出し分け)をまとめてみた | NEZU.log
もうこれの初期横幅を指定しまえ!作戦。
iPadの場合は拡大した場合も読み込んだ時の横幅のままなので、
とりあえずレイアウト崩れは防げそうなきがしてる。
Androidのチェックはまだだけど。
そんなこんなで、ある程度形になったので、あといくつかパーツを作ったら量産だわーーー。

Posted in 宇佐兎三用覚書.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です