Category Archives: Web Design

CSSでサイトレイアウトをする際のテンプレート。この手のものっていくつかあるけど、CSS定義はHTML内に直書きしてあり、ソースにも訳注がしっかりと付けられていて読みやすくなってます。Liquid Layout（ココではFluid Layoutと呼称されてます）のテンプレートあたり個人的にスゴく助かるので、半分は備忘録です。

The only CSS layout you need(?) >>

RSSフィードのURLを指定する事で簡単にRSSリーダーを作成でき、それを自分のブログなど好きな場所に張る事のできるウェブツール。試しに当ブログのRSSフィードを突っ込んだリーダーを作成してみました。左のウィンドウ（ただのサムネではなくEmbedしてあります）を触ってみると、だいたいの使用感が分かるかと思います。iPodのメニューに似た動きで直感的に操作でき、また右上にある３つのボタンを押す事でリーダーがポップアップしたりします。ブログ貼り付け時にリーダーのウィンドウサイズを大きく取る事ができるなら、Outlineや3Pane形式で表示してもイイかも（左はSlider表示）。一般に公開してるブログではなく、個人的なRSSリーダーとしてどこかに上げておくという使い方もできそうです。リーダーを作成するには“Get It”ボタンをクリックすればオッケー。作成画面では細かいオプションやサイズなどを設定できます。

Grazr – you know for feeds… >>

Web 2.0と呼ばれるサイト、またはその条件を満たしているサイトを網羅する事を目的としたディレクトリーサイト。このサイト自体もJavaScriptを多用した作りになっていて、極力ロードレスで各リンク先サイトの情報を見れるようになっています。数あるリンク先サイトをソートやフィルターする事ができるんだけど、それもロードレス。うーん素晴らしい。ウェブ製作をする上でのトレンドを探る上で、わりとナイスな内容となっております。

Go2Web20.net – The complete Web 2.0 directory >>

ブログでよく目にするフィードボタン。RSSリーダーに登録するためのアレです。最近ではGoogle ReaderやMy Yahoo!のRSSリーダー機能など、オンラインRSSリーダーを使っている人もわりと多いようで、サービスの種類も多くなりつつあります。けどサービスが多くなればなるほど1発登録用のボタンの種類も増えて、ブログの管理者的には見た目がごちゃごちゃしてアレだしナニな感じです。このサイトでは各種RSSリーダーへの登録ボタンを、１つのものにまとめてくれます。自分のブログのフィードURLを突っ込んでやるだけでソースを生成してくれるので、簡単に設置できます。ただしJavaScriptを使うので、おそらくエキブロとかでは使えないと思います。

Feed Button >>

過去に何度かウェブ製作時のCSSでのフォント定義のヘルパーサイトを紹介しましたが、こいつはその中でも決定版と言える内容。わたくし常用フォルダに早速突っ込みました。仕事でも使えそう。以下に簡単に解説をしておきます。

概要：CSSの各指定によってフォントがどう変化するかを実際に見ながら、CSSでのフォント定義を吐き出すサイト。

基本的な使い方：まずはサイト全体のベースフォントサイズを指定しましょう。デフォルトは10pxになってます。実際のサイト製作ではhtmlかbodyあたりでfont-sizeで定義しておきましょう。
ベースフォントサイズが決まったら、下にある各種プルダウンメニューをいじくってフォントを定義。3ペインある事からも分かるように、3セット作れます。font-face選択プルダウンは2つあって、その内上のものは一般的なフォント設定です。プルダウン内上部がウィン＆マック共有のフォントで、その下がそれぞれウィンのみ、マックのみのフォント。通常は共有フォントから選びましょう。2個目のプルダウンはユーザーのローカルマシン内のフォント一覧。マックユーザーの人であればヒラギノとかが出てきますが、チョイスしても反映されません。ヒラギノの指定は諦めましょう。
またページ上部のSample Text欄を修正する事でサンプルテキストを変更できます。こちらはちゃんと日本人も通るようになってますので、サイト製作中のテキストを突っ込んでみて確かめるのもオッケー。

CSSの出力方法：フォントの定義ができたらページ右上の「Get CSS」右のリンクをクリックすることで、一番左のペインから1st, 2nd, 3rdという順番で別個にCSS定義のテキストを出力できます。

自分の場合仕事で作るサイトではフォント関係のCSSだけ別ファイルにして、異サイトでそのファイルを使い回す（共有はしない）事が多いので、次あたりでこのサイト使って根本から書き直そうかと思ってます。うーん便利だ。

Typetester – Compare fonts for the Screen >>

CSSによるオンマウスアクション付きのメニューや、フォームの美しい見せ方などのソースを公開してるサイト。パっと見、正直そんなにクールなスキンのものって多くないけど、例えばメニューだったら“background”の画像差し替えだけでも簡単に修正できるので、汎用性は高いと思います。タブ的な見せ方や基本ソースなど、アイデアだけ頂いてカスタマイズはご自由に、という感じでしょうか。ちなみにコレに近い事を、当ブログのDownloadページでも行っています。1度ソース書いちゃえば仕事でもプライベートでも使い回しが効くのでわりと便利です。

Dynamic Drive CSS Library >>

グランジブラシの製作。90年代ロック野郎にとっては、なんていうか特別な響きのある言葉でございます。けどこちらの記事で紹介されているのはフォトショップを使った写真加工の話。完成作品を見れば、グランジブラシというものがなにをさしてるのかだいたいピンとくるかと思います。ロック好きにとってはなじみ深い、ジャケ写などでよくある汚し加工です。この手の加工ってわりと苦手なんだけど、フィルタ重ねじゃなくてブラシで描いてたのね。勉強になります。

Creating grunge brushes >> | 翻訳版 >>

「IPを知られず、トラッキングクッキーを吐かず、ログも取らない」というコンセプトのサーチ代理サービス。GoogleやYahoo!を間接的に検索することができます。Black Boxというネーミングがイカす。サイト製作者にとっては、ごく一般的、かつ国情報に左右されないサイトサーチの結果を知る事ができます。実際当サイトも、国内のGoogleで「mBlog」で検索すると一番上に出てくるのに、ここで検索すると2ページ目にしか出てきません。国をまたいだSEO対策の助けなどに。

BLACK BOX SEARCH >> | 翻訳版 >>