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

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

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

って事で、詳細をば。

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辺りで見比べていただけたらと思います。

自分用メモ。

Firefoxなどで見た時に、画像を回り込ませ、border指定をしてpaddingで余白を設けた時に、下部分だけ指定した値と違って、ちょっと大きくなってしまう事があります。

そんな時に役立つのが下記のスタイル。

img {
	vertical-align:bottom;
}

コレで指定した通りに表示されます。

今回のエントリーもちゃんとサンプル用意して実際の画面を出そうと思ったのに再現出来ず...なんでだろう。

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。

むしろこのサイトの方向性的に有った方が便利だよなーと。
書くきっかけを頂き、感謝いたします。

ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。

最初にbodyに指定しておくと便利だと思う3つを。

body {
	background:#FFF url(../img/share/bg.gif) no-repeat left top;
	font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
	font-size:80%;
}

じゃあ、詳細について色々書きまする。

2/12 21：45頃にチョット修正入ってます。

中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。

あのズレ、気になる人っていますよね？

すぐ分かるように簡単なサンプルを用意しました。
http://css-happylife.com/template/11/

あ、当たり前だけど、Firefoxで見て下さいね。

コレを解消する為に以下のスタイルを適用させればズレがなくなります。

html {
	overflow-y:scroll;
}

簡単っすね。

で、コレOperaじゃ解決出来ないのが難点。
overflow:scrollでズレないようには出来るけど、下が出ちゃうのはいけてない。

height:100%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。

んーこの辺まで解決したかった...

普通のエントリー久々な気がする今日この頃。

今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。

サンプルの前に

#main .entryBody #topicPath_01
とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。

結構見かける、見出しなどの横に配置されているボタン。

ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。

他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。

このデザインを実現する際に、floatかpositionのどちらでも可能ですが、この場合はpositionの方が楽な上に柔軟に対応できる（と思う）のでオススメ。