ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。
コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。
念じたら全部最近の書き方になおらないかな。
・・・
残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。
何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。
というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。
目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。
そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz
あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。
タイトルがa要素になってますが、インライン要素でもいいです。
背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。
タイトルって難しいですねorz
さて、時間もあまりないので本題に。
ブログを書こうと思ったきっかけが今回もTwitterっていう。
この一言が発端だとか。
@hira いつもブログ見てます///
更新してないときは心に刺さる一言ですね。
でも、こんなブログでも見てくれてる人が居るってのを実感するとモチベーションが上がるっす。
さて、主題の関連ページとかのリンクに使えそうなサンプルですが、以前エントリーした「タグクラウドみたいなのの単語の折り返しに関して」と同じだったりするんですが、自分の中では結構使い道があったのにビミョーな感じだったので、見せ方の問題が大きいような気がしてちょっとリベンジです。
サンプルは以下より。
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。
中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。
それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。
ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。
さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。
なので、一応基本に戻ってみましょうということで。
最近、「CSS Nite ビギナーズ」とかもやってますしね。
あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。
とりあえず、暑いっす。えぇ。
ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。
あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。
ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。
さて、そろそろ本題に。
こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。
今回は、これの組み方の一つとしてサンプルを用意してみました。
サンプルの確認は以下より。
デジパのベトナムオフィシャルサイトがオープンしました。
さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。
単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。
Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。
で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。
サンプルは以下より確認できます。
新しいdigiper staff blogが始まりました。
タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。
何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。
さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。
Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。
むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。
えっと、ダウンロードは以下よりお願いします。
ちなみにダウンロードしたファイルのindex.htmlを開くと以下のようになってます。
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます）
昔作ったサンプルでそんなようなのがありました。
横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現
CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。
とかが、ぱっと浮かびました。
んで、グローバルナビゲーションに限っては、img要素で配置する事になんら問題を感じないので、img要素でいいんじゃないかなぁ、と。
もちろん状況によるので、ケータイ対応とかが前提だったりシステムの都合とかだったり状況にあわせて判断する必要はあると思うけど。
まぁCSS Spriteの目的が、容量軽減や負荷軽減なので、上手い具合に使って行けたらいいかなぁと思ったりしてる今日この頃です。