CSSに関するネタを中心に色々書いてます。
本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。
http://feeds.feedburner.jp/csshappylife
では、本題に。
2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。
というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。
一度気が抜けると、中々書こうって思えないっすね。
今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。
殆ど経験が無い中作っていたので、なんか楽しくなってました。
個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。
広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。
タイトルが長い…
サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー
10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました）
さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。
ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。
何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え！とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。
Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。
重さとかスクロールの仕方とかが、、、
だから確認もIEが先だったりします。
まーコレはボクのスタンスなんで、どーでもいいんすが。
ちなみにこのサイトのアクセス解析を見てると、IEとFirefoxの比がおおよそ、5:4っていう普通のサイトじゃありえない結果が出ます。こんなブログ書いてると当然っちゃ当然かもしれませんが（笑
さて本題にでも。
Tipsでも充実させたいと思ったので、特に目新しい内容ではございませんが、div要素とかのボックスを左右の中央、そして上下も中央にしたレイアウトのご紹介です。
使いどころがあんまり浮かびませんが、404ページとか、ログイン画面とか、内容が少ないページなどちょっとしたキャンペーンページとかで使えるかもわかりません。
では、追記にて詳細をば。
何だか間があいてしまいました、、、
ここ以外でのアウトプットが増えてたので、こっちに書くパワーが減っておりました。
さて、言い訳は良いとして、現在も日々コーディングな訳ですが、久々にはまったので同じ状況のを作ってみました。
タイトルだけでは意味がわからないと思ったんですが、どう書いたらよいのかさっぱり…
見た目普通っぽい2カラムがあって、サイドの背景はメインの内容に合わせて繰り返すのは良くあるかと。
んで、今回のデザインにはメインとサイドの裏に当たる部分(親要素)にグラデーションの背景があるんです。
このグラデーションがあった事で、余白がうまく取れずに、はまりました。
どの部分かと申しますと、サイドの上のボックスと下のボックスの間にmarginが10pxほどあったんです。えぇ。
もう書いてて意味がわかりませんので、とりあえずサンプル見てください…
2カラムのサンプルを色々作ってみました。
事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。
IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | P O P * P O P
http://www.popxpop.com/archives/2007/04/ie7csscss_layouts.html
で、まぁ日本語のサイトがあんまり無いっていうのと、どーにもこーにも使い勝手が悪い気がしてならないので、自分が使いやすいだろう2カラムのサンプルを作ったという訳です。
細かく作っていけば限りなく出来るけど、13種作ったら疲れました。
11からは既にネタ切れ感が無きにしも非ず・・・
次は3カラムも色々つくろうかなーとか思ってます。
ってことで作りました。
3カラムサンプル18種
半年以上も前に、雑記にて書いた、「PhotoBlogを作ってみた」をちゃんと使えるようにしたバージョンを作成したので、取りあえず公開。
雑記っぽい内容がだらだら続くので、テンプレートを使いたい人は追記へどうぞ。
正直ちゃんと作り直す気なんて無かったんだけど、使いたいってメッセージが来てしまったので、何だかテンション上がって作り直しちゃいました。
写真を掲載するだけなら、色んなサービスがごろごろしてる訳でコレを使う理由って特にあるわけでもないんだけど、しいて言うならば、昔なつかしの手作り感溢れるサイトが好き。
あの時代にしょっぼいサイト作ってきた自分としては、既存のサービスを使わず自分で頑張って作ったぞ！っていう自己満足が忘れられないんす。
その延長線上に今のお仕事があると言っても過言ではなく、XHTML+CSSでのコーディングを頑張ってるのもきっとそんな理由。
そういえば、書こうと思ってて乗り遅れたから書かなかったけど、正しくHTMLを書こうと心がけている人に5つの質問 : 雑記帳 : der Gegenwartってのがありましたね。
アレの問3に答えるならば、自己満足ってのが一番しっくり来る答えかも。
って、こんな理由じゃまずい気もしたので、
閲覧、メンテ、再利用などを色々なケースでみんなが使いやすくてハッピーっていう未来を作るのにちょっとでも貢献したいので。
ボクもこんな感じの理由で頑張ってます！ってことで。
何か話が反れまくってますが、まぁテンプレとして配布するので、完全な手作りサイトって訳じゃないけど、コレを元にカスタマイズとかしていけばいいと思うんだ。きっと。
3カラムレイアウトのサンプルです。
デザインはテキトーでいいや。と思って作ってたのに、余計な装飾を始めてしまって中途半端っぷりが出ていたりするのは、見なかったことにして。
えっと、今回のサンプルで行っている事でも。
ざっとこんなトコロでしょうか。
ブラウザチェックに関しては、WinIE6、FireFox1.5、Netscape7.1、Opera9.01のみ。
Mac環境はわかりません。崩れてたらごめんなさい...
あ、WinIE5.xでは崩れてます。仕事じゃないのでソコまで対応しておりません。ご了承を。
（MacのMacのOpera9.1、Netscape 7.1、Firefox2.0.0.3、Safari2.0.4でダイジョブだったみたい）
取りあえず、サンプルと持ち帰り用でも。
http://css-happylife.com/template/03/
基本的な段組みレイアウトが出来るようになった後に、最初にぶち当たる壁だと思われる、サイドバーの繰り返し。
コレって、テーブルレイアウトだと容易に実現出来るのですが、通常CSSで段組みをした場合、サイドバーがメインコンテンツより短いと途中で背景が途切れてしまいます。
ソレだと随分いけてないので、ちゃんとメインコンテンツの内容にあわせて表示するようにして上げます。
まずは、サンプルをご覧下さいませ。
文字サイズを変更して頂ければ、内容にあわせてサイドバーが伸び縮みするのが分かると思います。