DesignWalker

IT-PLUSさんに、隔週で連載させていただいている、『ウェブデザインの力』 連載３回目の今回は、『アマゾンのリニューアルで考える効果的なナビゲーションの見せ方』というお題で、サイトのナビゲーション・メニューについて、すこし書かせていただきました。

今回の記事を書かせていただくにあたって、いろいろとサイトのナビゲーション・メニューについて調べたのですが、今回の記事に収まりきらなかったサイトを、せっかくなのでまとめてみました。

続きを読む »

料金プランやサービス内容などの比較など、単純にテーブルで組んでいるだけでは、なんだか味気ないですよね。おすすめのプランを少し、大きく表示して目立たせたり、アイコンやボタンを使って分かりやすく仕上げたり…。今回は、とってもきれいな料金表デザインのまとめです。今回ご紹介するサイトの料金表のデザインは、テーブルを組んで、そこにCSSでデザインをかぶせているサイトが多いので、単純にテーブルのデザインの参考にもなりそう。

続きを読む »

Scriptが使えないブログを利用されている方や、これ以上Scriptを増やしたくない。でも、いろいろ挑戦してみたい。って方には、便利かもしれません。今回は、Scriptを使わないCSSエフェクトやTipsをいろいろとまとめてみました。Scriptを使わなくても、結構いろいろ出来てしまうんですね。

続きを読む »

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。 このテクニックをCSS Spriteって言うそうです。。（この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…） せっかくなので、本日はCSS Spriteをいろいろとまとめてみました。

続きを読む »

本日は、ちょっぴり便利かな～っと思うCSS Tipsをいろいろご紹介。既に、ご存知のものも多いかもしれませんが・・・是非お試しください～。

続きを読む »

きれいなウェブデザインは見ているだけでも楽しくなりますね。 そんなきれいなデザインを集めたギャラリー系のサイトが充実してますね。 色使いや、レイアウト、サイトの構成などなど、いろいろと参考になります。 本日は、そんなギャラリー系のサイトをまとめてみました。

続きを読む »

ブログのサイドバーや、記事タイトルの横などによく表示されているカレンダー。 日付も単純にテキストだけで表示するのではなく、ちょっと手を加えておしゃれ～に見せたいものですね・・・ っちゅうわけで本日は、そんなカレンダーデザインをまとめてみました。

続きを読む »

ブログのコメントや、お問い合わせなどで使われるフォーム。 フォームをCSSできれいにデザインされているブログやウェブサイトをよく見かけます。 っちゅうわけで、本日はきれいにデザインされたフォームをいろいろ集めてみました。どのサイトも、とってもきれいなフォームばかりですねぇ～。

続きを読む »

サイト全体のコーディングとしては、Tableを使わず、DivタグとCSSを使って構成していくパターンが主流だと思いますが。。。例えば、コンテンツ内に商品のスペック表や、料金表などを表示する場合、その名の通り”Table”タグを使う方が効率的ですね。っちゅうわけで、本日はTableとCSSを使って表を作る方法をいろいろまとめてみました。

続きを読む »

企業のサイトを構築していると、グラフやチャートが必要になることが多いです。小難しいことをダラダラと書くよりも、グラフでデータを見せる方が、ユーザーの方々に分かりやすくていいですよね。っちゅうわけで、本日はグラフを描くIllustrator系チュートリアルから、CSSを使ったグラフなど、なるべくデザイン的にきれいなものを、いろいろまとめてみました。

続きを読む »

本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。

続きを読む »

「言及リンクのないトラックバックはお断りします。」的なブログが多いような気がする。まぁ、大半がSEOを目的として、関連性のない記事に一方的にトラックバックを送信してくるような、ブログが多くなってきたための対処ということなのでしょう。。。しかし。。。なかなか言及リンクって言われてもねぇ。。要は、トラックバック元の記事にトラックバック送信先のリンクがあればいいわけですが・・・それだけじゃぁ味気ないので・・・どうせなら、大々的に引用したろう。っちゅう結論に達しました。。

続きを読む »

普段はそれほど気にならないのですが、リンク集のようにテキストリンクがリストのように羅列されているサイトでは、CSSで訪問済み(visited)リンクを設定されていると、ユーザーにとっては一目でそのリンクをクリックしたかどうか分かるので、便利かも。っちゅうわけで、CSSで訪問済み(visited)リンクをデザインしてみた。

続きを読む »

この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。この方法では、imgタグに入れられたPNGファイルのみに有効なため。。。上に文字をのせたりすることができませんでした。。。しかし、このスクリプトを使うと。。。こんな感じでCSSでPNGを背景に指定してもIE6でも綺麗に表示されます！！

続きを読む »

先日2xup.orgさんの「一行あたりの文字数を制限するリキッドレイアウト」を読ませていただき、わたくしも実際にサンプルレイアウトを作ってみました～。このブログで先日ご紹介した、「透過PNGをIE6以下のバージョンで綺麗に表示する方法」とあわせて、このリキッドレイアウトを使えば、デザインの幅も広がりそうですねぇ。。

続きを読む »

web2.0的なデザインの代表のひとつとして、鏡に反射したような写真をよく見つけます。これって、PhotoShopなどで画像を加工すれば簡単にできるのでございますが。。。毎回、毎回、画像を加工するのも面倒なので。。。CSSとJavaScriptで画像を加工することなく鏡に反射したようにさせることができますねん。しかも、結構簡単に。っちゅうわけで、本日はCSSとJavaScriptで画像を加工することなく鏡に反射したようにさせる方法をご紹介じゃ。

続きを読む »

先日ご紹介しました、「CSSのバックグラウンド画像をランダムに表示してみる」では、個々のスタイルの背景画像をランダムに表示することが可能になりました。っちゅうことは。。。CSSを何種類か用意しておいて、読み込んでるCSS（スタイルシート）を丸ごとランダムに読み込むことができたら。。。こりゃぁ、アクセスされるたびにサイトのデザインをガラっと変えることも可能なのでは？

続きを読む »

CSSを使うようになって、画像はCSSのbackground-imageで画像を表示することが多くなりました。例えば、ブログのヘッダー部分で表示しているバックグラウンド画像をランダムに表示できたら、ブログ訪問者がアクセスするたびに画像を切り替えることができますよねぇ。。。何度もアクセスしてくれるブログ訪問者さんにはブログの画像をコロコロと変えられるので、ブログ訪問者さんを飽きさせることもなくて便利やなぁ～。。。っちゅうわけで、今日は↑のようにCSSとphpでバックグラウンド画像をランダムに表示する方法をご紹介じゃ。

続きを読む »

最近では、web2.0っちゅう言葉は一般的になってきておりますが、web2.0的なデザインの代表としては、やっぱり、角丸の枠デザインでしょうねぇ。。わたくしが、デザインする時はたいていphotoshopでさくっと、角丸の画像を描いてしまいますが。。。CSSだけで簡単に角丸の枠が作れたら、それはそれで、楽ですよねぇ。。。っちゅうわけで、サンプルのCSSは。。。↓こちら。

続きを読む »

早いもので、このブログもオープンして約３ヶ月がたちまして。。。おかげさまで、微妙にではございますが、徐々にアクセス数も上がってきております。さらに、あまり目立たないのでクリックされないのかも？っと思い立ちまして、いろいろなサイトを調べてみたところ。。。みなさんいろいろ広告が目立つように工夫されておりました。っちゅうわけで、このブログでもちょっとGoogle AdSenseの広告が目立つようにCSSと画像を足してみました。。。

続きを読む »