2007年8月

3カラムサンプル18種

本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。
http://feeds.feedburner.jp/csshappylife

では、本題に。

2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。

というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。
一度気が抜けると、中々書こうって思えないっすね。

今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。
殆ど経験が無い中作っていたので、なんか楽しくなってました。

個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。
広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。

フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ

タイトルが長い…

サイトやブログの価値を調べる10の指標とツール|前向きストラテジー
10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか?ボクはしっかりバテてダレてます。あんまり仕事してま…(加藤さまに給与減らされるので自重しました)

さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。
SampleImage 1

ボックスを上下左右画面中央に

ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。

サンプルイメージ:上下左右中央何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え!とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。
Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。
重さとかスクロールの仕方とかが、、、
だから確認もIEが先だったりします。
まーコレはボクのスタンスなんで、どーでもいいんすが。

ちなみにこのサイトのアクセス解析を見てると、IEとFirefoxの比がおおよそ、5:4っていう普通のサイトじゃありえない結果が出ます。こんなブログ書いてると当然っちゃ当然かもしれませんが(笑

さて本題にでも。
Tipsでも充実させたいと思ったので、特に目新しい内容ではございませんが、div要素とかのボックスを左右の中央、そして上下も中央にしたレイアウトのご紹介です。

使いどころがあんまり浮かびませんが、404ページとか、ログイン画面とか、内容が少ないページなどちょっとしたキャンペーンページとかで使えるかもわかりません。

では、追記にて詳細をば。

背景がグラデっててサイドのボックスに下マージンがあるような時のサンプル

背景が(略)マージンがあるようなサンプル何だか間があいてしまいました、、、
ここ以外でのアウトプットが増えてたので、こっちに書くパワーが減っておりました。

さて、言い訳は良いとして、現在も日々コーディングな訳ですが、久々にはまったので同じ状況のを作ってみました。
タイトルだけでは意味がわからないと思ったんですが、どう書いたらよいのかさっぱり…

見た目普通っぽい2カラムがあって、サイドの背景はメインの内容に合わせて繰り返すのは良くあるかと。
んで、今回のデザインにはメインとサイドの裏に当たる部分(親要素)にグラデーションの背景があるんです。
このグラデーションがあった事で、余白がうまく取れずに、はまりました。
どの部分かと申しますと、サイドの上のボックスと下のボックスの間にmarginが10pxほどあったんです。えぇ。

もう書いてて意味がわかりませんので、とりあえずサンプル見てください…

↑上に行くよ