2008年6月

タグクラウドみたいなのの単語の折り返しに関して

単語の禁則処理のサンプルサイト

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

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

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

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

コーディングは自己満足?んー自己満足でいいんじゃないかなぁ~

  • 雑記

友だちのmixi日記を読んでいたら、とても(・∀・)イイ!!事書いてるなぁ~って思ったので勝手に引用させてください。
喜んで引用してくれって?ありがとう。

その友だちは、ボクが専門学校に通ってた時に知り合って、最初は「うわぁ~この人とは仲良くなれないだろーなー」とか思ってたけど、気づけば仲良くなって今も仲良い友だちなんです。
ついでに、ヨモツネットの人とすげー似てる。
最初の近寄りがたい雰囲気(失礼な)と顔、喋り方まで!

で、まぁ専門学校は「ゲーム会社のグラフィッカー目指そうぜ!いつかはキャラデザやったるぜ!」みたいな専門だったので、その友だちは現在ゲーム会社でバリバリグラフィッカーやってます。

今の自分が、それなりに頑張って仕事とかやれてるのはコイツの尋常じゃない頑張りを見てきたから、負けたくないって気持ちが強くてやってるんだと思う。

ウェブ関係の専門学校がどうかは分からないけど、専門学校に行くメリットって、何よりも友だちやかけがいのない人とかっていう出会いに有ると思うんだ。ホントに。

だから、学生時代の出会いが有るから、今の自分があるんだ。とかって思ったりしません?

っと本題からずれずれなので、そろそろ本題に。

しましまプラグイン無しでしましまする。

今週末の金曜日にCSS Nite shuffleが行われるんで、ボクも行ってきます~。有料で4,000円掛かってしまいますが、ご興味ある方ぜひいきませぅ

あとその翌日に、SwapSkills for Happy web weekendが2日間行われます。
神崎さんが居るので、すごーく行きたいのですが、土日が忙しい...

どちらもとても有意義なイベントだと思いますので、ご興味ある方はぜひ!!

少々前置きが長くなってしまいましたが、使いたい時にいつも忘れるのでメモ。

MT4辺りから変数を使う事で、しましまプラグインやJavaScriptを使わなくても交互に色分けが出来るようになりました。
月別のリストに出すとしたらこんな感じ↓

<MTArchiveList archive_type="Monthly">
<MTArchiveListHeader><ul></MTArchiveListHeader>
<li class="<MTIf name="__odd__">odd<MTElse>even</MTIf>"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>

ポイントは、この辺り↓ですね。コレでli毎にclassがoddとevenになる感じです。

<li class="<MTIf name="__odd__">odd<MTElse>even</MTIf>">

あとは、CSSでevenの時かoddの時に背景色が変わるような指定をすればOK!

li.even {
	background: #EDEDED;
}

そんな訳で、MT使えば、もうしましまデザインも怖くありません!

新規でサイトを作るのに使えそうなの一式。Ver 2

新しいdigiper staff blogが始まりました。

タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。
何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。

さて、以前公開した新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。
Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。

むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。

えっと、ダウンロードは以下よりお願いします。

ちなみにダウンロードしたファイルのindex.htmlを開くと以下のようになってます。

JavaScriptを使わずにやるimg要素のロールオーバーサンプル

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

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

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

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

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

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

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

↑上に行くよ