Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Category Archives: Web Design

[WEB DESIGN] CSSとJavaScriptによる各種メニュー

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSとJavaScriptを使って作る、汎用性の高い各種メニュー。「Horizontal and vertical drop down menus based on the suckerfish menus」の項はサブメニューの見せ方としてわりと実用的ですね。階層の深い場所にコンテンツのあるサイトなどで便利。仕事で1度メインメニューをテキストで構成しちゃって以来、メンテナンス性の高さで次から画像で作らなくなりました。
2つ目のサイトも同様にCSSを使ったメニュー。こちらはサブメニューなしで縦に構成されています。こういうURLをブックマーク内の「ネタ帳」フォルダに突っ込んでおいて、たまに煮詰まった際に見てみると意外な解決策があったりします。

Raw CSS examples >> | Free Menu Designs >>

[DESIGN] Redesign famous logos in web 2.0 format!

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0有名企業のロゴを自分なりにリデザインして、flickrに上げて“yay2dot0logoparody”ってタグを付けちゃいなYO! という企画。中には結構クールなものもあるんだけど、ネタっぽいものもいくつか。最近のロゴデザインの流れが見えたりして興味深い。
Redesign famous logos in web 2.0 format! >>

[WEB TOOL] Page Strength

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0SEO的な意味においてのサイトの強さというか存在感をチェックするサイト。被リンクの数やサーチエンジン内でのランク、ドメインを取得してからの日数(Age)、del.icio.usで確認されるURLの数などの各種情報を元にサイトのランクを判定してくれます。調べるのに30秒ほど時間がかかるので、気長に待ちましょう。mBlogを調べたところPage Strength 2.5でした。まぁそんなもんか。
Page Strength >>

[GRAPHIC DESIGN] USSR in Construction – ソ連の残したグラフィックデザイン

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0旧ソビエト連邦の国内・国外に対するプロパガンダ雑誌、『USSR』がグラフィックデザインとしていかに素晴らしいか、という内容の記事。わたくし共産主義って大嫌いなんですが、旧ソ連のこうした誌面デザインってなぜかものすごく惹かれるものがありまして、見ていて飽きないのであります。うーんかっこイイ。
USSR in Construction >> | 翻訳版 >>

[WEB DESIGN] Hot Dates with CSS

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0先日紹介したブログにおけるクールな日付表示の応用。画像を組み合わせたり、記事とどのようにしてウマい事レイアウトするかについて記述されてます。画像については小さいのをループさせてるけど、まぁ背景一発でもイイような気もしますね。記事の横に置くアイデアはイイなぁ。けどフローズンデザインだと記事の横ピクセル変えなきゃなぁ。メンドくせぇなぁ。けど汎用性を取ってリキッドっていうのもなぁ。むーん。
Hot Dates with CSS >>

[WEB DESIGN] CSS Date Blocks for Blogs

  • Pocket
  • このエントリーをはてなブックマークに追加

Hotブログだけでなく企業向けのウェブ製作の現場でも日付という要素は書かせません。CSSによる日付の装飾の一例の紹介。カレンダーぽく見せる手法をウマい事やってます。っていうか多分コレ近日中にパクります(笑) この見せ方かっこイイなぁ。けどMTで月の表記を「SEP」みたく短縮で表記する方法ってあったっけな。と思って調べてみたらちゃんとありました。「%b」でオッケーなのね。ちなみに省略形じゃなくフルスペルの場合は「%B」だそうです。
あと別件だけどこのエントリーからサムネール画像のフォーマットを180×110に変更しました。
CSS Date Blocks for Blogs >> | MobavleType 日付フォーマット >>

[WEB DESIGN] Favicon Editor

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0ファビコン(ブックマークした時などに目印として付く小さいアイコン)のエディター。サイト内でドット絵を描いて簡単にfaviconを作成することができます。作成した画像はgif画増としてジェネレイト可。またサイトにファビコンを付加するためのタグについても紹介されているので、初めてfaviconを作る人にとっても親切です。ちなみにザクを描いたつもりなんですけどね、見えませんね。はい。自分にもザクにはまるで見えません・・・。
Favicon Editor >>

[WEB DESIGN] CSS Font and Text Style Wizard

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0最近じゃCSSによるレイアウトも当たり前になってきたけど、自分の場合「font-family」によるフォント指定ってわりとサイトをまたいで使い回す事が多いんです。このサイトの場合は主に’Lucida Grande’と’ヒラギノ角ゴシック’を使ってますが、最近じゃマックウィン問わずOSがデフォルトで持ってるフォントも増えてきた事だし、サイトごとにテキスト面でも表情を持たせたいところです。こちらではfont-familyだけでなく各属性をボタンで切り替えて、テキストがどう見えるのかのサンプルを即座に表示してくれます。serif、sans-serif、cursive、fantasy、monospaceという一般的なフォントに加えてカスタムを選べば任意のフォントも可。sizeやweightなどの指定もできます。欲を言えばtext-shadowあたりも欲しかったですね。指定したフォント定義のCSSはリアルタイムに下部フォーム内に出力されるので、あとはコピペすればオールオッケー。うーん便利だな。
CSS Font and Text Style Wizard >>