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

何か、こういう立場のお仕事してる人とか、初心者のススメで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に答えるならば、自己満足ってのが一番しっくり来る答えかも。

って、こんな理由じゃまずい気もしたので、

閲覧、メンテ、再利用などを色々なケースでみんなが使いやすくてハッピーっていう未来を作るのにちょっとでも貢献したいので。

ボクもこんな感じの理由で頑張ってます！ってことで。

何か話が反れまくってますが、まぁテンプレとして配布するので、完全な手作りサイトって訳じゃないけど、コレを元にカスタマイズとかしていけばいいと思うんだ。きっと。

今まで、あんまりcontentプロパティを調べてなかったから、その素晴らしさがイマイチわかってなくて、なんか特定のテキストを挿入したり、パンくずとか作るのに便利だったりclearfixで使ってたり、なんやら程度で、Internet Explorer7で対応しなかったのもそんなに気にしてなかったのが正直なところだった今日この頃、皆様GWはいかがお過ごしでしたか？

ボクは仕事万歳！でした。
そのお陰もあり、嫌になるほどCSS関連のことを色々調べたんです。えぇ。

前々からちょっとカッコイイなーと思ってたステッカーっぽいの。
試しに今回貼ってみました。左上に貼ってあるコーディングコンテストのがソレです。

ちょっとウチのサイトの場合だと横幅があるんできついですが、まぁテストって事で。（外しはしないけど）

知ったのは、ネットのサラダボウルさん。

って事で、詳細をば。

iddyがバージョンアップし、ブログパーツな感じで貼り付けれるようになりました。
参照：http://iddy.jp/blog/log/2007/03/000025.php

このブログだとサイドのカテゴリの下に追加してあるプロフィールがソレです。

iddyは、ボクは開発に直接関わっている訳では無いので、1ユーザーとして使っている訳ですが、今回ブログに貼り付けるに辺り、標準で用意されているデザインでは浮いてしまい「如何にもiddy」みたいな感じがしたので、CSSが自由にいぢれるという事で色々いぢってみました。

その時に、自由入力のプロフィールの内容が多いと、ブログに貼った場合邪魔じゃん！と思い、希望した量でテキストが消えるようにしてみました。

久々に定義リストを横並びにしたら、IE7で上手くいかず、ちょっと苦戦したのでメモめもMEMO。

おそらく、ddがテキスト量などで高さがdtより多い場合は問題が無いんだろうけど、dtの方が高さがある場合、IE7だと上手い具合に回り込みが解決されない（っぽい

dtの方が高さがある場合。っていうのは今回の場合は画像にdtが来て、ソレを定義付ける説明がちょろっとあるようなイメージ。

フッター部分のメニューなどを区切る際のサンプルを適当に。

p要素でやるとこんなヤツです。

Home｜アバウト｜イラスト｜BBS

サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが）

<ul id="sampleFooter">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Gallery</a></li>
<li><a href="/">Blog</a></li>
</ul>

んでは、いってみますか。

たぶんこのサイトの何処かを探せば、IE以外で背景が繰り返さないとか、IEだけ文字が消えちゃうとかって類いについて書いてあるはずなんすが、ボク自身も何処に有るのか分からないので、適当に有りがちな部分をまとめてみました。

取りあえず↓こんな状態よくあるかと。

上記で指定してるスタイルは下記。

#main .entryBody #sample070219_01 {
	width:200px;
	margin-bottom:1em;
	padding:5px;
	background:#FFF;
	border:1px solid #999;
}
#main .entryBody #sample070219_01 img {
	margin-right:10px;
	float:left;
}

コレはIEだとちゃんと表示されますが、floatの解釈が正しいブラウザでは意図した状態とは違うはずです。（理解している人はコレが意図した状態ですが）

ということで、そういう系を解決してきます。

画像とか用意するの面倒なんで、IE6とFirefox2辺りで見比べていただけたらと思います。