[WEB DESIGN] Web Design Inspiration – 素晴らしいデザインのウェブサイト集
素晴らしいデザインのサイトのスクリーンショットを、flickrのセットにまとめたもの。クールデザイン系のサイトを巡回している人にとっては、見慣れたSSもいくつかある事と思います。サイト製作時の煮詰まり時などに是非。けどそのまんまパクっちゃダメですYO！ こりゃ役に立つわー。
Category Archives: Web Design
[WEB DESIGN] CSS Cheat Sheet – CSSのチートシート
CSSの各種宣言の一覧。ウェブのデザイニングに関わる仕事をしている人にオススメ。基本的な事ばかりなのでだいたい頭に入ってるものばかりだとは思いますが、コレ系の一覧を小さくプリントアウトしてディスプレイ横にでも貼っておくと意外と便利。一応翻訳版へのリンクも併記しておきますが、宣言内容まで翻訳されてて見づらいです。ところで最近じゃテーブルレイアウトをした事のない新人さんもいらっしゃるようですね。最初からCSSレイアウトで始める事ができるってのは羨ましいなぁ。自分の場合テーブルからの脱却にわりと時間がかかった方なんで。
[WEB DESIGN] Web 2.0 style buttons – Web2.0スタイルのボタン作成のチュートリアル
分かった！ Web2.0ってテカリの事だったんだ！ そういう意味ではmBlogもそこそこ2.0といった感じなのでしょうか。俺2.0！とかどうでしょうね。ガンオタ2.0！なんてのもわりとイカす。
まぁそんな事はいいとして、Web2.0スタイルのボタンの作り方の紹介です。レイヤースタイルで基礎部分を作って、その上にテカり部分を作ってグラデマスクをかけるという一般的な手法です。ボタン以外のものにも応用できます。これでボクのブログもキミのブログも色々2.0！といった感じで早速やってみようかな。
[WEB DESIGN] Quick Thumbnail – 画像をリサイズしてくれるサイト
アプリケーションを使わずに、オンラインで画像のリサイズができるサイト。似たようなRisizRというサイトを以前紹介しましたが、コチラの方が軽くて便利。スライダーを使ったパーセンテージによるリサイズの他に、画像の解像度を指定するやり方、プリセットのサイズを使うやり方などの方法で画像のリサイズができます。リサイズのためだけにいちいちフォトショを立ち上げるのもアレだしナニだしメランコリックな感じなんで、こういうウェブサービスは便利ですね。
mBlog内関連記事：[WEB DESIGN] ResizR – 画像のリサイズしちゃいますサイト >>
[WEB DESIGN] CSS Shorthand Guide – CSSのショートハンド記述のススメ
CSSをショートハンドで記述するためのガイド。ショートハンドというのは簡単に言えば、プロパティの値をまとめ書きする事。コツさえつかんでしまえば個別に指定（例えばpadding-leftとか）するよりもサクっと書ける上に、CSSの行数減らしにも効くので便利です。
ちなみにショートハンド記述のできるCSSのエレメントは、margin、padding、border、background、fontの５つ。マージンとパディングについては、上下左右の指定は上を起点とした時計回りと覚えましょう（例えば0, 10px, 5px, 20pxなら、上0、右10px、下5px、左20px）。
[WEB DESIGN] Inline image quotes – イメージを使った引用（blockquote）表現
オシャレなサイトでたまに見かける、画像を使った引用表現、アレの実現方法が解説されてます。Blockquoteタグを使う事になるんだけど、引用始まりと終わりの幅を可変、かつインラインで表示するために、Blockquoteタグに引用始まりのイメージを、その中のpタグに引用終わりのイメージを割り当てています。マージンの調整は使うイメージによって各自調整って事スかね。近い内にmBlogにも導入しようかと思っております。簡単だしかっこイイ。
[WEB DESIGN] CSS drop shadow – CSSだけで任意divにドロップシャドウを
任意のdivに、画像を使う事なくCSSだけでドロップシャドウを付けるというTips。最初はへぇーそれスゴいじゃんって思ったんだけど、ソースを見てみると意外と単純な仕組みで描画させてる事が分かって、なんで今まで気付かなかったんだろうなーと。主体となるdivの周りを、少しずつ白に近づくグレーのdivで入れ子にするという仕組み。言ってみりゃただのグラデーションですが、いちいち画像を作る手間が省ける分イイかもしんない。その内何かに使ってみようかな。ただし数個のdivでネストする事になるので、若干ソースが見づらくなるという弊害もありますね。
[WEB DESIGN] Search Free Fonts.com
アルファベットのフリーフォントを探すのにちょうどイイサイト。まぁコレ系のサイトって実際色々あるんだけど、気に入ったのが“Categories”というカテゴリー検索の機能。Military, 3D, Antiques, Decorative, Gothic, Kids, Pixel, Typewriterというように、「何っぽいか」という視点でジャンル分けされてます。ミリタリー調のフォントとか大好きなんで早速物色開始。けどその前にいらないフォント整理しなきゃ。