デジパのベトナムオフィシャルサイトがオープンしました。
さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。
タグクラウドみたいなのの単語の折り返しに関して
単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。
Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。
で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。
サンプルは以下より確認できます。
新規でサイトを作るのに使えそうなの一式。Ver 2
新しいdigiper staff blogが始まりました。
タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。
何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。
さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。
Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。
むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。
えっと、ダウンロードは以下よりお願いします。
ちなみにダウンロードしたファイルのindex.htmlを開くと以下のようになってます。
JavaScriptを使わずにやるimg要素のロールオーバーサンプル
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます）
昔作ったサンプルでそんなようなのがありました。
横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現
CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。
- ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。
- アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。
- その他、本来背景として使う予定だった画像を一枚にまとめる。
とかが、ぱっと浮かびました。
んで、グローバルナビゲーションに限っては、img要素で配置する事になんら問題を感じないので、img要素でいいんじゃないかなぁ、と。
もちろん状況によるので、ケータイ対応とかが前提だったりシステムの都合とかだったり状況にあわせて判断する必要はあると思うけど。
まぁCSS Spriteの目的が、容量軽減や負荷軽減なので、上手い具合に使って行けたらいいかなぁと思ったりしてる今日この頃です。
【動画】 10分くらいで作るお手軽2カラム
GIGAZINEさんで紹介されていた「カムタジア スタジオ」を試してみたくて、ボクが実際に2カラムレイアウトのサンプルを組んでいる画面キャプチャを作ってみました。
これといった編集を行わずにやったのに、とっても素晴らしい出来でびっくりです。
複数ページを組むのに使えそうな感じ
「SBMに追加」ボタンは、自分の記事ブックマークしてもらえたかなぁ？どんなコメント付いたかなぁ？というチェックをするのに一番手っ取り早く見れる気がするので付けてるかな。後は、SBMの存在をチョットだけ意識してもらうとか？
さて、1ページもののサンプルやらテンプレートはいっぱい有るけど、実際のサイトで1ページしかないサイトはごく一部だと思う。
なので、複数ページが詰まったサンプルを作ってみました。
yuga.js 0.6.0がリリースされたのもあり、次はもうちょっとしっかりしたデザインで、yugaを使ってより実際のサイトに近いのでも作れたらいいなーとか妄想中です。
そんな訳で、取りあえず今回のサンプルのご説明みたいなことをば。
テーブルのボーダーに余白がある場合のサンプル
的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。
今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。
ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。
試行錯誤した結果、背景でやってみることにしたらうまく行きました。
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。
だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！
display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。
タグクラウドのサンプル作ってみた
タグとかめんどーだから、入れる気無かったんですけど、今更になって悪くないかも？とか思い始めたので、試しにタグクラウド設置してみました。
トップページの下の方におりますが、あんまり古いエントリーとか、タグ付け自体が適当だったりするので、あんまり使い物にならないかもしれません。。。永遠のベータ版です。
で、まぁかっこ良さげなタグクラウドを頑張ってつくろーとkiai出して作ってる途中に、ふと3ping.orgさんを思い出し、過去記事をあさってたらTag Cloudのスタイルというエントリーがありました。
んで、被ってる感じバリバリだからいっかーとか思ったんですけど、何となく作っちゃったんで公開っていう流れです。えぇ。
にしても3つほど作ったら疲れました。
ダウンロードとか実際の表示を見たい方は以下より。
それなりに使い勝手が良さそうなヘッダーのサンプル4種
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。
ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。
というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？
ヘッダーって作るの大変というか、厄介だったりしませんかね。
全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。
文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。
今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。
感謝感激でございまする。
デザイン提供してくれた方はこの人↓