DQ9ではじめてマルチプレイやりました！
新しい楽しみ方だと思うなー。

ちなみにやったのは、この人たち。

collamoの中の人。

CSS Sprites作成ツール「Tonttu」を作ったみたいで、試しに使ってみましたがPSとかでチマチマ作るより全然使いやすかったっす。

興味ある方どうぞ。

これからゆっくり考Lの中の人。

ブログの内容はよく分かりませんが、「JavaScript超初心者によるJavaScript入門講座」ってサイトではてブ50目指して頑張ってるみたいです。

音声解説やってるのでお姉さまが優しく語りかけてくれます。

確認せず晒したんで本人に怒られたら困っちゃう。
さてさて、本題の組み方の違いです。

ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。

コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。
念じたら全部最近の書き方になおらないかな。

・・・

残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。

何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。
というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。

目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。
そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz
あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。

タイトルがa要素になってますが、インライン要素でもいいです。
背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。

タイトルって難しいですねorz

さて、時間もあまりないので本題に。

• サンプルページを見る

ブログを書こうと思ったきっかけが今回もTwitterっていう。
この一言が発端だとか。

@hira いつもブログ見てます///

更新してないときは心に刺さる一言ですね。
でも、こんなブログでも見てくれてる人が居るってのを実感するとモチベーションが上がるっす。

さて、主題の関連ページとかのリンクに使えそうなサンプルですが、以前エントリーした「タグクラウドみたいなのの単語の折り返しに関して」と同じだったりするんですが、自分の中では結構使い道があったのにビミョーな感じだったので、見せ方の問題が大きいような気がしてちょっとリベンジです。

サンプルは以下より。

• 関連ページとかのリンクに使えそうなサンプルを見る

2008年11月11日お昼頃

overflow部分を一部加筆しました。

ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。

さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。

なので、一応基本に戻ってみましょうということで。
最近、「CSS Nite ビギナーズ」とかもやってますしね。

あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。

とりあえず、暑いっす。えぇ。
ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。

あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。

ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。

さて、そろそろ本題に。

こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。

今回は、これの組み方の一つとしてサンプルを用意してみました。
サンプルの確認は以下より。

• サンプルを見る

デジパのベトナムオフィシャルサイトがオープンしました。

さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。

単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。

Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。

で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。

サンプルは以下より確認できます。

• 単語の禁則処理に関してのサンプル

本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます）

昔作ったサンプルでそんなようなのがありました。
横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現

CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。

• ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。
• アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。
• その他、本来背景として使う予定だった画像を一枚にまとめる。

とかが、ぱっと浮かびました。

んで、グローバルナビゲーションに限っては、img要素で配置する事になんら問題を感じないので、img要素でいいんじゃないかなぁ、と。
もちろん状況によるので、ケータイ対応とかが前提だったりシステムの都合とかだったり状況にあわせて判断する必要はあると思うけど。

まぁCSS Spriteの目的が、容量軽減や負荷軽減なので、上手い具合に使って行けたらいいかなぁと思ったりしてる今日この頃です。

的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。

• サンプルページ
• サンプルダウンロード（zip：15kbくらい）

今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。

ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。

試行錯誤した結果、背景でやってみることにしたらうまく行きました。