Category Archives: Web Design

CSSでのレイアウトが今みたいに普及する以前、ウェブサイトのレイアウトは主にテーブルタグを使って行ってました。けど元々そういう目的で用意されたタグではないため、本来サイトのデザイニング用に用意された技術を使おうという事で、最近ではDIVタグ等とCSSによってサイトレイアウトを行う場合が多いというのは皆さんご存知の通り。その結果HTMLには余計なテーブルタグがなくなりウェブサイトの情報が整理され、私たちデザイナーの仕事も増えたとｗ　まぁそんな感じなんだけど、本来テーブルタグが使われるべき“表”の表現もCSSでできない事もないワケです。コチラではCSSベースのテーブル表現がまとめられています。各画像クリックで元記事にリンクしています。こうして見ていると、結構イイ感じの見せ方があったりして「あ、これ今度仕事で使お」とか思っちゃう。元記事にはだいたいHTMLとCSSの両ソースが掲載されているので、趣味に仕事に色々と使えそうです。自分の場合は“テーブルタグ＝悪”という風にはそれほど思っていないため、今でも表を描きたい場合はわりと普通にテーブルタグ使っちゃいますが、それでもサイトの大枠だけは少なくともCSSレイアウトにするべきだよなーとは思っております。

CSS-Based Tables >>

タイトルだけでは何のこっちゃよく分かりませんね。分かりやすく言えばこのバッジをサイト上に貼る事で、del.icio.usにおいてどういうタグ付けがされ、いくつリンクされてるかが一目で分かるようになります。JavaScriptを使った動的なバッジなので、1度貼ったら後はメンテナンスフリー。ただしポータル系ブログサービスによくあるJavaScript禁止なブログ等では使えません。サイトの人気度を測る指針として、またはそのひけらかし等に是非。早速mBlogにも貼ってみましたが、なにぶん日本語での情報しかないので、他人にひけらかすほどの人気はないのが残念ではあります。
ちなみにdel.icio.usについてご存知ない方のために解説すると、早い話がソーシャルブックマークのサービスです。サイト巡回中に気になる記事があったら、とりあえずオンラインのブックマークサービスにメモっとく、みたいなサービス。言ってみればソーシャルブックマークで頻繁にブックマークされるサイトや記事というのは、それだけ人気のある内容と言えるわけです。日本じゃはてなブックマークが有名ですね。
del.icio.us内で紹介されているタグだけだと、例えば今のmBlogみたいに黒背景だったりした場合にサイトのデザインと合わない事が分かりました。なので背景色選びついでにセンタリングしたので、そのためのソースを紹介しておきます。バッジを貼りたいとお考えの人はどうぞご自由にお使いください。

HTML：

<div class="ForDeliciousBanner">
<script src="http://images.del.icio.us/static/js/blogbadge.js"></script>
</div>

CSS：

.ForDeliciousBanner {background:#FFF; width:193px; margin-right:auto; margin-left:auto; }

備考：

白背景の指定は、デフォルトだと透過になっているため。#FFFの指定を変えれば、白い部分の色を変えてサイトデザインに合わせられます。

del.icio.us – tagometer >>

mBlog内関連記事：
[SITEINFO] はてなブックマークとdel.icio.usへの投稿機能を追加しました
[BOOKMARK] iFeedReaders – RSSリーダーやSocial Bookmarkへの投稿ボタンを生成 >>

タイトルそのまま、本来PNGの表示がサポートされていないIE6未満で、PNGを表示させる最も簡単な方法の紹介。そもそもなんでそこまでしてPNGを表示させたいか、それはPNGがサポートするアルファチャンネルの使い勝手がイイという点に尽きます。もちろんJPGとGIFの持つ特性のイイトコ取りという側面もあるんだろうけど、例えばブログのヘッダに背景を置いて、その上にアルファ有りのサイトロゴを置く事で生産性を高めたい、そんなニーズは間違いなくあるわけです。IEも7でPNGをサポートするんだっけ？　どちらにしろ現在のIE6がネットの画像フォーマットの革新を妨げる足枷である事に疑いの余地はありません。まぁそんなワケでこちらの記事、3ステップでIE6でPNGを表示する方法を簡潔に紹介してます。CSSを格納してあるディレクトリ内に指定のファイルを置いて、次にCSS内にimgタグに関する記述をして、後はエンジョイしてくださいという内容。mBlogでもそろそろPNGファイルを扱いたいので、その内導入しようかと思っております。

The easiest way to PNG support in IE6 >> | 翻訳版 >>

Web製作時に結構メンドくさい、丸角のDIVボックスのHTML、CSS、さらに画像までも生成してくれる便利なサイト。ただ生成される画像がPNGなのが気になる。IEで表示できるのかな？　表示の可否については確認していないので分かりませんが、背景色やラウンドの直系なども細かく指定でき、DIVボックスについてもいくつかの種類から選べるので、サクっと丸角ボックスを作りたい時なんかに便利。

RoundedCornr >>

mBlog内関連記事：
[WEB DESIGN] Cornershop – Rounded Graphics for CSS Box Corners – 丸角のDIVボックスを色指定して生成してくれるサイト >>
[WEB DESIGN] Transcorners – 特定DIVを丸角に >>

オンマウスする事で表示される、マウスポインタ追従型のToolTip。ブログやウェブサイト内で、ちょっとした訳注等を付ける際に便利。適用はリンクタグ内に“id=”trigger_XX”と記述して、ToolTip内の情報も同一HTML内にDisplay:none;で書けばイイみたい。デモ用のページがあるので、そこ見ると分かりやすいです。これ写真もイケるのかな。イケそうな感じはするんだけどな。今度暇な時にイヂってみます。また使用にはここで配布されているJS以外に、prototype.js 1.5が必要となるので、別途ダウンロードしましょう。

tooltip-v0.2.js >>

ウェブサイト用の背景画像を生成してくれる便利なサイト。Slashで斜線、Stripで横線、Dotで縦線、Gradationでグラデーションという、主に4つのフォーマットから選べます。各フォーマットにはそれぞれマージン、線や背景の色指定、リバースのありなし等のオプションがあり、概ねココだけで思った通りの背景画像を用意できます。あと線の太さが選べたら完璧なんだけどなー。

Background Image Maker >>

オンマウスで変化するボタンの製作も、以前は専らJavaScriptで書いてたけど最近じゃCSSのa:hoverでサクっと作る事が多くなりました。ここではHoverアクションするセクシーなCSSボタンの作り方が紹介されてます。グラデーションの作り方とかレイヤースタイルの細かな設定、CSSでどう記述すればいいかといった内容。特にスゴいっていう記事ではないんだけど、この人グラデーションのユーザープリセットが結構丁寧に作ってあって興味深い。グラデ命の人にはユーザパレットのSSだけでもオモしろいと思います。他人が使い込んだフォトショップに触れると、結構意外な使い方とかしてて楽しいんだよねー。

Sexy CSS Hover Button >>

プルダウンメニューからCSSの各値を選択する事で、テキスト関係のCSSを吐き出してくれるサイト。こういうウェブサービスはとっても便利。フォントの種類や大きさ、デコレーション、各スペーシングを選択したら、プルダウンメニュー群のすぐ下にある“CSS”というボタンを押せばソースを吐き出してくれます。また各値を選択中にリアルタイムにフォントが実際にどのように表示されるかを出力してくれる点も便利です。趣味にお仕事に大活躍のサイト。

CSSTYPE >>

mBlog内関連記事：[WEB DESIGN] Typetester – Compare fonts for the Screen >>