ウェブサイトを印刷してみると想像していた以上にページが多く出力されてしまったことなどありませんか？

わざわざワードなどにコピペするのも面倒だし…。こんな時に使えそうな印刷用に使えるツールやブックマークレットなどをまとめてみました。

Save paper & ink printing only what you want « PrintWhatYouLike.com

サイトのURLを入力して「Start」ボタンをクリックするとプレビュー画面が表示され、フォントのサイズの調整や、不要な要素をクリックして削除するなどの操作ができるとっても便利なツールです。ブックマークレットも用意されているので、ブックマークに入れておくと便利ですね。

Print Friendly & PDF

こちらも同様に、印刷用のプレビュー画面を見ながら、不要な要素を削除したり、PDFで保存したりできるツールです。

The Printliminator

こちらは便利なブックマークレット。黒い”Printliminator”のボタンをドラッグしてブックマークバーに登録しておいて、印刷したいページでPrintliminatowをクリックすると。ページの右上に4つのボタンが表示されます。不要な要素をマウスオーバーしてクリックすると削除されます。そのごプリントボタンをクリックしてプリントすることができる便利なツール。詳しくは動画で使い方が紹介されているので、ご確認ください。

Aardvark Firefox Extension

Firefoxのエクステンション。こちらも要素を選択して非表示にしてプリントするなどの作業ができます。

Readability – An Arc90 Lab Experiment

自分好みのスタイルを設定することができるブックマークレット。スタイル、サイズ、横幅などを調整して、右側のボタンをブックマークバーに保存しておけば、いつでも自分好みのスタイルでページ印刷ができますね。

ここからは、サイトの制作者が使えるTipsをいくつかご紹介します。

Handy Tips for Creating a Print CSS Stylesheet

Print用CSSに加えておくと良いのでは？と思われるCSSがいくつかまとめられて紹介されています。

例えば、下記のようにprint cssに記載しておくとリンクのあとに、リンク先のURLを表示できたりします。

a:link:after {
	    content: " (" attr(href) ") ";
}

こちらは、#commentsの要素の前で必ず改ページするように設定することなども可能ですね。

#comments {
	    page-break-before: always;
}

Hartija – Css Print Framework

印刷用のCSSフレームワークです。このCSSファイルを元にして、いろいろと調整していくのも良いのではないでしょうか。

IE Print Protector

HTML5で構築されたウェブサイトをIEでプリントするといくつかの要素を認識せず、ページが崩れてしまったりすることがあるようです。その問題を解決してくれるスクリプト。

ここ数年でたくさんの情報が揃ってきたCSS3。古いブラウザでは対応されていないため、まだまだ一般に普及するまでは時間がかかってしまうのかもしれませんが…。

CSS3を使えば、ウェブデザインの可能性をさらに広げてくれることは間違いありません。

デザイナーの皆さんは、是非CSS3でどんなことができるの？って事だけでも今のうちから知っておいても損はないと思いますよ。

今回は、そんなCSS3を使えばここまでできる！っと可能性を感じられるチュートリアルをいろいろ集めてみました。

20 CSS3 Tutorials and Techiques for Creating Buttons

CSS3を使って、美しいボタンを作るチュートリアルが20パターン紹介されています。

12 Excellent CSS3 Button and Menu Techniques

こちらも美しいボタンやメニューのチュートリアルが12種類。

CSS3 Gradient Buttons

これまで画像を使って表現していたグラデーションとシャドウの美しいボタンもCSS3を使えば簡単に表現できるようになります。

Creating a Realistic Looking Button with CSS3

Mac風のボタンも簡単に表現できますね。

15 CSS3 Navigation and Menu Tutorials and Techniques

こちらはCSS3を使ってとっても綺麗なナビゲーションを作るチュートリアルが15種類もまとめられております。

CSS3 Glow Tabs

奥行きのあるきれいなタブもCSS3で表現できますね。

Create a Cool Messy List with CSS3 and nth-child

CSS3のrotateファンクションでメニューを微妙に歪めることも可能ですね。

Elegant Accordion with jQuery and CSS3

jQueryとCSS3でアコーディオンの美しいメニューを作ることもできます。

Cross Browser Pure CSS3 Horizontal Accordion

jQueryなどのスクリプトを使わなくてもCSS3だけでアコーディオンメニューを作ることもできます。

Pimp Your Tables with CSS3

テーブルもCSS3で美しく装飾しましょう。

Contextual Slideout Tips With jQuery & CSS3

jQueryとCSS3でびよーんっと開くスライドボックスを作ることもできます。

Halftone Navigation Menu With jQuery & CSS3

メニューにマウスオーバーすると、うつくしいハーフトーンのアイコンがアニメーションで表示されるチュートリアル。

Carbon Fiber Signup Form With PHP, jQuery and CSS3

登録フォームもCSS3とjQueryで作るとこうなります。

Colorful Sliders With jQuery & CSS3

3Dの美しいバーとスライダー。

Interactive Image Vamp up with jQuery, CSS3 and PHP

左側にあるアイテムを中央の画像に配置することができます。

jQuery quickie: Colourful rating system with CSS3

とってもカラフルでうつくしいレーティングシステム。意味なくマウスオーバーしてしまいますね。

25 Out of the Box Tutorials powered by jQuery and CSS3

まだまだあります。jQueryとCSS3を使って作られたチュートリアルが25種類もまとめられています。

10 examples of futuristic CSS3 techniques

ふきだしやボタン、メニューなどなどCSS3を使って表現するテクニックが10種類。

CSS3 Examples and Best Practices

ファンクションごとに実際の例をピックアップして紹介されています。

60 Excellent CSS3 Tutorials and Techniques You Should Know

こちらもたくさん！60種類のCSS3のチュートリアルがまとめられています。

50 Awesome Animations made with CSS3

こちらも必見！50種類のCSS3を使ったアニメーションがまとめられています。

お問い合わせやログイン、アンケートなどなど、ウェブデザインには欠かせないフォーム。

今回は、そんなフォームをデザインする方法をいくつかまとめてご紹介します。

JavaScriptやCSSを使えば結構いろいろなことができそうです。

FancyForm

mootoolを使ってチェックボックスとラジオボタンををクールなデザインに変えてしまうことができます。

CRIR: Checkbox & Radio Input Replacement

こちらもチェックボックスとラジオボタンをスタイリッシュにする方法

prettyCheckboxes, a solution to checkboxes

こちらもJavaScriptを使って、チェックボックスとラジオボタンにデザインを組み込む方法です。

jQuery checkbox

JQueryを使ってチェックボックスやラジオボタンをファンシーにデザイン。

Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements

JavaScriptを使ってフォームのデザインをカスタマイズ。

DropDown – xHTML/CSS/Javascript replacement of classic selectbox

JavaScriptを使ってセレクトにデザインを組み込む方法が紹介されています。

Styling dropdown select boxes

ドロップダウンにスタイルをかける方法。

<select> Something New

セレクトをスタイリッシュにする方法。

jquery-asmselect

セレクトの中から選択したものを下に追加していくことができます。

Adelaide Web Designs Releases customselect with icons

セレクト内にアイコンを追加。

Form field hints with CSS and JavaScript

フィールドをクリックすると注釈を表示させることができます。

Masked Input Plugin

日付やクレジットカード番号など桁数のわかっているものに、テキストボックスの中に下線やダッシュなどを表示する方法。

Autotab: jQuery auto-tabbing and filter plugin

決まった文字数が入力されると自動的に次のボックスへカーソルを移動させることができます。

10 CSS Form Examples

10種類ものとってもきれいなCSSフォームのサンプルを見ることができます。これは参考になります。

Building a better web forms: Context highlighting using jQuery

選択している箇所をハイライトする事ができます。

Grow a textarea

テキストエリアのサイズをユーザーが変更することができます。

Password field with strength meter

パスワードを入力すると文字数に応じてメーターがアップしていきます。

Clean and pure CSS FORM design

Tableタグを使わず、CSSだけできれいなフォームデザインを組む方法が紹介されています。

Custom Form Elements in action

mootoolを使ってフォームのデザインをカスタマイズ。

Control.SelectMultiple

JavaScriptを使って複数選択を

STYLING FILE INPUTS WITH CSS AND THE DOM

参照ボタンをスタイリッシュに

今回は、ウェブデザインのレイアウトに役立つサイトをいくつかご紹介します。

そのまま使えるレイアウトのサンプルや、いい感じのスクリプト、レイアウトの参考になりそうなインスピレーション系などを集めてみました。

CSS Layouts: A collection of 168 Grid and CSS Layouts

100%のリキッドレイアウト、950ピクセル、750ピクセルの３パターンの横幅で、合計168種類のCSSレイアウトが公開されています。ファイルのダウンロードもできるので、そのまま使えます。

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

こちらも有名４０種類のCSSパターン。ダウンロードも可能です。

Little Boxes

一つのボックスから、徐々にレイアウトされていく過程が確認できるので、初心者の方には、分かりやすいかもしれません。

jQuery UI.Layout Plug-in

jQueryを使ったレイアウト・マネージャーです。ヘッダーとサイドバーのみの簡単なものから、ツールバー、メニュー、ヘルプパネル、ステータスバーなど複雑なレイアウトまでカバーできます。まずは、デモページでどんな事ができるのか確認してみてください。

dfFlexiGrid

ユーザーがレイアウトを変更できるスクリプトです。こちらのデモページの上部のメニューをクリックすると、レイアウトがアニメーションで切り替わります。

Setting Equal Heights with jQuery

各カラムのボックスの高さを合わせてくれるスクリプトです。こちらのデモページからどうぞ。

HOKYPOKY. | MULTICOL. jQuery Plugin

MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。もちろん、日本製のプラグインなので日本語もきれいに段組みにします。

footerStickAlt

フッターをブラウザの最下部、もしくはコンテンツの最下部に表示させるCSSのテクニック。デモページはこちらから。

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

Photoshopのチュートリアルです。ロゴやメニュー、テキストなどの配置と余白の取り方などが説明されています。

960 Grid System

960ピクセルを基準にサイトサムネイルの右上に配置されているボタンをクリックすると、12もしくは16本のカラムを表示してくれるインスピレーションサイトです。

Grid and Column Designs

美しいグリッドデザインをたくさん集められているサンプル集です。どのサイトもとってもきれいなサイトばかりです。

料金表やスペック表などに使えそうなTableのデザインを探してみるといろいろと見つかりました。

以前にもこのブログで「TableとCSSいろいろ」でもご紹介しましたが、

今回はTableのデザインパート２と言う事で、いろいろとまとめてみました。サンプルやダウンロードページが別に分かれているところは、そちらのリンクも記載しておきましたので、参考にどうぞ。

dhtmlxGrid

ダウンロード

Unobtrusive Table Sort Script

A CSS styled table version 2

デモ

Designing Tables for Usability

デモページ

MOOTOOLS JAVASCRIPT TABLE ROW & COLUMN HIGHLIGHTING

tablesorter 2.0

デモ | ダウンロード

jQuery plugin: Tablesorter 2.0

デモ | ダウンロード

GridView3

ダウンロード

phatfusion : sortableTable

ダウンロード

TableKit

ダウンロード

Data Tables and Cascading Style Sheets Gallery

一番左のカラムのDesign Nameをクリックするとデザインが切り替わります。気に入ったデザインは、一番右のカラムのDownloadからCSSファイルをダウンロードすることが出来ます。

Replicating a Tree table

Normal Table Test

Vertical scrolling tables

Brett asks the CSS Guy if the Row Locking with Checkboxes is fixed

デモ

how to create a table like Orbitz’s airline flights scheduling and pricing matrix

デモ

Pure CSS Scrollable Table with Fixed Header

Tablecloth

ダウンロード

mootable

ダウンロード

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

Crazy Egg’sのサイトのような、飛び出すカラムのデザインチュートリアル。

Stripe your tables the OO way

デモ

CSS-Based Tables: Modern Solutions

CSSを使ったきれいなTableのデザインサンプル集です。

Pricing Tables: Examples And Best Practices

こちらは料金表のデザインのまとめです。きれいな料金表がたくさんまとめられております。

2008年もあとわずかですね。

今年一年、デザインウォーカーの記事を楽しみにしていただいた多くの皆様、どうもありがとうございました！
今回は2008年のウェブデザインを振り返る今年最後の総まとめをお送りします。

• インスピレーション
• Photoshopブラシ
• チュートリアル
• ベクター素材
• アイコン
• ロゴ
• テクスチャ
• CSS

と８つのブロックに分けてご紹介します。

インスピレーション関連

100 Websites With Outstanding Artistic Design

見てるだけで、思わずため息が出てしまいそうな、アーティスティックなウェブサイト100選

Top 100 Web Designs in 2008

radiiateさんが選ぶ2008年のウェブデザイントップ100

Best of CSS Design 2008

WebDesignerWallさんが選ぶ2008年のベストCSSデザインサイト

Most beautiful websites of 2008

CrazyLeaf Design Blogさんの選ぶ2008年の美しいウェブデザインまとめ

2008 Design Trends

2008年のデザイントレンドが分かるまとめ

40 most beautiful and inspirational website designs of 2008

美しいウェブサイトデザイン40選です。

50 Beautiful Blog Designs

とっても美しいデザインのブログ50選

30 Beautiful Examples of Grunge in Web Design

今年、流行ったグランジ系のウェブデザイン30選です。

Grunge Design Inspiration Showcase

グランジデザインに挑戦したい方の為のまとめ。インスピレーションサイト、Photoshopブラシ、テクスチャ、チュートリアルなどがまとめられております。

57 Vector Characters

今年、流行したマスコットキャラクターを使ったウェブデザイン57選です。

40+ Beautiful Hand-Drawn Websites

手書き風ウェブデザイン40選

50 Beautiful And Creative Portfolio Designs

デザイナーのクリエイティブなポートフォリオサイトが50種類

40 Beautiful Dark CSS Website Designs

ダークな色味でかっこいいウェブサイト40選

25 Super Cool Paper Inspired Website Designs

紙をモチーフにしたウェブデザイン25選

24 Beautiful and Creative Website Headers

インパクトがあって美しいヘッダーデザインのウェブサイト２４種類

50+ Gorgeous Navigation Menus

ウェブデザインに欠かせないナビゲーションメニューが50種類以上まとめられております。

60 Really Cool and Creative Error 404 Pages

個性的な404ページのデザインが60種類まとめられております。

50 Excellent Blog Footer Designs

とってもきれいなブログのフッターを50種類まとめられております。

40 Beautiful and Creative Website Footers

こちらも、フッターの美しいウェブサイト40選

Photoshopブラシ関連

50 Free Photoshop Brush Sets for Modern Design Trends

最近のウェブトレンドデザインに使えるPhotoshopブラシ50選

50 Must-Have Photoshop Brushes

持ってて損は無い50種類のPhotoshopブラシ

75 Insane High Res Photoshop Brushes

解像度が高くて、クオリティの高いPhotoshopブラシが75種類

High Quality Photoshop Brushes, Resources and Tutorials

クオリティの高いPhotoshopのブラシとチュートリアルまとめ

64 Beautiful And Free Nature Brush Sets And Vectors – Giant Design Pack

自然をモチーフにした64種類のPhotoshopブラシとベクター素材のまとめ。

200+ Photoshop Brushes for Light, Sparkles, Glows and Glitter

200種類以上のキラキラ系Photoshopブラシがまとめられております。

500+ Space Brushes for Photoshop

宇宙をモチーフにしたPhotoshopブラシが500種類以上！

1000+ great Photoshop free brushes by PaulW

PaulWさんがデザインした、とってもきれいなPhotoshopブラシが1000種類以上！

チュートリアル関連

30 Beautiful Photoshop Text Effect Tutorials

めちゃめちゃきれいなPhotoshopテキストエフェクトのチュートリアルが30種類

50 Creative Photoshop Text Effects

きれいなPhotoshpのテキストエフェクトが50種類

23 Most Incredible Photoshop Tutorials

とってもレベルの高いPhotoshopのチュートリアル23選。

50 Great Photoshop Tutorials for Clever Beginners

とってもきれいなPhotoshopのチュートリアルが50種類まとめられております。

70 Beauty-Retouching Photoshop Tutorials

人物写真を美しく見せるレタッチ系のPhotoshopチュートリアル70種類。

40 Excellent Photoshop Tutorials for Textures and Backgrounds

40種類のテクスチャと背景に関するPhotoshopのチュートリアルです。質感のあるデザインを作りたい方、必見です。

41 Nicest Photoshop Photo Effects

とってもクールなPhotoshopチュートリアルが41個

25 Photoshop Tutorials for Web Designers

WEBデザイナーの為のPhotoshopチュートリアル25選。ナビゲーションを作るチュートリアルが豊富です。

Free Adobe Illustrator Tutorials | Layers Magazine

Illustratorのチュートリアルがいっぱいです。

30 Tutorials That Will Teach You Fireworks

Fireworksのチュートリアルが30種類

ベクター素材関連

30+ High Quality And Free Vector Object Sets To Beautify Your Designs

あなたのウェブサイトをきれいに飾ってくれるとってもクオリティの高いベクター素材が30種類以上まとめられています。

60 Free Vector Graphics for Digital Art Pros

プロが作った無料のベクター素材が60種類！どれもクオリティが高いです。

アイコン関連

50 Most Beautiful Icon Sets Created in 2008

noupeさんの選ぶ2008年の最も美しいアイコンセット50選

40 Beautiful Free Icon Sets

とってもきれいな無料アイコンが40セット

22 (New) Free High Quality Icons Sets

ハイクオリティなアイコンセット22種類

40+ Extremely Beautiful Icon Sets Hand-picked from deviantART

とってもきれいなアイコンセットをdeviantARTから40種類以上ピックアップされています。

ロゴ関連

10 successful logo redesigns

今年リニューアルされた企業ロゴが10種類。

33 Exceptional Logo Re branding In 2008 For Your Inspiration

こちらも2008年にリニューアルされた企業ロゴ33種類のまとめです。

105+ Logo Design Tuts And Resources

ロゴデザインにはまった時に使える、100種類以上のロゴデザインチュートリアルと、素材集まとめ

50+ Kick Ass Logos for Inspiration

50種類以上のロゴが集められております

30 Brilliant Vector Logo Designs, Deconstructed

30種類の、かわいらしいロゴがまとめられております。

10 trends that will define logo design in 2008

2008年のロゴのトレンドデザイン

35 Stunning Black and White Logos

よくデザインされたロゴは白黒でも良く映えます。３５種類の白黒ロゴまとめ

テクスチャ関連

60 Impressive Free High Resolution Textures and Backgrounds

60種類もの高解像度なテクスチャがまとめられています。いろいろ使い道がありそうですね。

300+ Vintage Style Textures and Photoshop Brushes

300種類を超えるビンテージ系のテクスチャとPhotoshopブラシのまとめ

29 Most Useful Texture Packs of 2008

使い勝手の良さそうなテクスチャが29種類。

60+ Free Textures from SXC.hu

SXC.huでダウンロードできる、使えるテクスチャ画像の60選です。

30 Great Free Paper Backgrounds and Textures

背景や写真などと組み合わせて使える紙のテクスチャ画像30種類

Free High-Res Texture Pack: The Anatomy of a *Really* Old Book

高解像度の古い本をモチーフにしたテクスチャセットです。

400+ High Quality Patterns

400種類を超えるクオリティの高いパターンファイルまとめ

CSS関連

10 Challenging But Awesome CSS Techniques

初心者の方には、すこし難易度が高いかもしれませんが、挑戦したくなるCSSのテクニック10選です。

15 CSS Tricks That Must be Learned

必ず、どこかで役に立つ。覚えておいて損は無い15種類のCSSトリックです。

それでは、みなさんよいお年を！

DESIGN IT! magazine vol.2(2008 (2)

「DESIGN IT! magazine」vol.2が発売されております。今回の特集は「ユーザーエクスペリエンスの価格」です。サイトの使いやすさだけでなく、ユーザーがどれだけ心地よく楽しんでサイトを利用できるかをポイントに詳しく解説されております。

DESIGN IT!magazine

今回は、CSSを使ってリンクをデザインする方法をいくつかまとめてみました。

基本的なものから、Scriptを使ってアニメーションする方法までリンクだけでもいろいろな見せ方がありますね。

Why and How: Styling Text Links

まずは、CSSで簡単に変更できるパターンをご紹介。

The ways to style visited links

こちらは、訪問済み(visited)リンクの見せ方がいろいろと紹介されています。

残念ながら、IEではサポートされていませんが、:beforeや:afterなんかを使ったら面白い効果が出せそうですね。

a:visited:hover:after {
	content: " (hey! you've already been there!)";
	color: #f00;
}

Scrollovers – A New Way of Linking

こちらは、JavaScriptを使ったリンクの見せ方です。テキストにマウスがオーバーすると、上から違う色のテキストがスクロールして入れ替わります。

Showing Hyperlink Cues with CSS

少し前の記事で紹介されていますが、CSSに以下のように設定すると、pdfファイルにリンクすると、pdfのアイコンがテキストの横に表示されます。同様に様々な拡張子や、クラスなどの設定に対応しています。

a[href $='.pdf'] {
	padding-right: 18px;
	background: transparent url(icon_pdf.gif) no-repeat center right;
}

Iconize Textlinks with CSS

こちらも、上記の『Showing Hyperlink Cues with CSS』と同様の方法です。アイコンもまとめてダウンロードできます。

4 Uber Cool Css Techniques For Links

CSSを使ってTooltipを表示する方法や、イメージギャラリー、3DっぽいボタンをCSSで表現する方法などが紹介されています。

Removing the Dotted Hyperlink Borders

リンクをクリックしたときに表示されるボーダーをCSSを使って消す方法が紹介されています。

Liquid & Color Adjustable CSS Buttons

透過PNGとbackground-colorを使って、ボタンを作る方法です。

Top 10 CSS buttons tutorial list

CSSを使って、きれいなボタンを作る方法がまとめられています。

Using CSS and GIF’s to animate a menu

:hoverにアニメーションGIFを設定すれば、アニメーションメニューが作れます。

Experimental Css design: Animated Menu

こちらもアニメーションメニューです。

パララックス効果って、あまり聞き慣れない言葉ですが…。

初期の横スクロール型のテレビゲームなどでよく使われていた視差効果を使って奥行きを出す技法だそうです。

いくつかのレイヤーを、それぞれ違った速度でスクロール（奥にあるレイヤーはゆっくり、手前にあるレイヤーは早くスクロール）させる事で、視差効果を与えて奥行きがあるように見えるのだそうです。

今回は、このパララックス効果を上手にウェブデザインに応用サイトをいくつかまとめてみました。

How to recreate Silverback’s parallax effect

まずは、パララックス効果をウェブデザインに応用する方法から。ブラウザの横幅を変えてみると、４つのレイヤーに配置されているPNG画像がそれぞれスクロールの速度が違って奥行きがあるように見えます。サンプルコードも公開されているので、挑戦してみてはいかがでしょうか。CSSのbackground-positionのプロパティを%で指定して、各レイヤーのパーセントを変えるのがミソ。

Silverback — guerrilla usability testing

↑のサイトで説明されていたサイトがこちら。とっても良くできていますね。

Креативная разработка

こちらは、ロシアのサイトです。中央の男性と、右上の木、背景のバランスがいい感じです。

We All Hate Quickbooks, Do You?

ブラウザの横幅を変更すると、ページ下部の炎の部分がスクロールします。

Dromaeo

ヘッダーのかわいい恐竜がスクロール。

Percentage Backgrounds — Large numbers do interesting things

とっても楽しいスクロールですね。ブラウザの横幅を変えて遊んでみてください。

A parallax optical illusion with CSS: The Horse in Motion

これはすごい！馬が走ってます。

Dumago: Be carefree what you wish for

シンプルですが、とってもきれいな視差効果が出ています。

Starry Night by CSS-Tricks

ブラウザの縦や横にリサイズしてみると奥行きを感じます。

JavaScript系

jParallax

マウスの動きに反応してレイヤー画像をスクロールしてくれるスクリプトです。サンプルもよくできています。

jParallax Demos

jParallaxを使ったデモです。とってもいい感じですね。

40 JAAR SIRE – U mag het zeggen

オランダのサイトです。こちらもスクリプトを使って、マウスが動くと、それに合わせて背景が動きます。

jQuery Parallax Scrolling – Build your own 1980′s video game! : Locomotivation

jQueryを使って、自動でスクロールさせる方法が紹介されています。

Parallax Demo

こちらは、最初にご紹介したSilverbackのデザインに、prototypeを使ったアニメーションのサンプルです。ページ中央のShrink!のリンクをクリックするとスクロールします。

Parallax Background with Javascript and CSS

縦のスクロールに対応しているスクリプトです。背景のチェック画像と、雲、ページ枠のスクロールに視差効果が出ていて、不思議な感じです。

JavaScript Example: Fly + Parallax Scrolling Effect

こちらもスクリプトを使った星空のサンプルです。

Flash系

Flash Kit

Flashを使ったサンプルです。Flashファイルもダウンロードできるので、参考になります。

Javier Ferrer Vidal

先ほどのFlashのサンプルをうまく利用すれば、こちらのサイトのような視差効果が作れるのではないでしょうか。

みなさんもパララックス効果をうまく利用してサイトをデザインしてみると、他のサイトと差別化が図れるのではないでしょうか。

タイトルや見出し部分は、他の要素よりも少し目立たせたい部分ですよね。

本日は、そんなタイトルや見出し部分に使えそうなデザインをまとめてみました。

Typography For Headlines

約150種類もの見出し部分のサンプルが集められています。画像を見て、デザインの参考にするもよし。また、各画像をクリックすると、そのサイトにリンクされているので、CSSやHTMLを見て、実際にどのように設定されているのか見ることが出来ますね。

Typography for Headlines Design Showcase | Elements of Design

こちらも、↑のサイトと同じドメインですが…。こちらは、現在118種類の見出しのサンプルが掲載されています。他にも、コメントやログインフォームなど各要素のデザインのサンプルが集められています。各パーツのデザインに迷った時は、とっても便利なサイトです。

10 Examples of Beautiful CSS Typography and how they did it…

こちらは、サンプルの画像と、CSSがセットで10種類掲載されています。CSSをコピーしてそのまま使えます。

Headline Element Styling

数も少なく、とてもシンプルですが、きれいなサンプルが紹介されています。

Headline Elemente mit CSS stylen

↑ひとつ上で紹介したサンプルのCSSが公開されていました。コピペでそのままどうぞ。

BJKit(BeautifulJapaneseKit)

JavaScriptを使って、フォントをアンチエイリアスの効いたフォントに入れ替えてくれます。日本語が使えるのがうれしいですね。

CSS Gradient Text Effect

テキストの上に半透明のPNG画像を重ねるテクニックです。これは覚えておくと便利ですね。

50+ Fonts for Big, Bold Headlines

欧文フォントですが、見出しに最適なフリーフォントが５０種類まとめられています。

15 Amazingly Free Magazine and Headline Fonts

こちらもきれいな見出しに使えそうな１５種類のフリーフォントです。

IT-PLUSさんに、隔週で連載させていただいている、『ウェブデザインの力』

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

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

インスピレーション編

サイトのナビゲーション・メニューをデザインするのに、ちょっと参考になりそうな、ショーケース的なサイトをいくつか。

CSS Tabs and CSS Navigation Menus Showcase

サイトのナビゲーション部分に特化したショーケースサイト。とってもきれいなナビゲーションがたくさん紹介されています。

Dynamic Drive CSS Library

コードや画像も公開されているので、初心者の方にも分かりやすい、CSSライブラリ。

Download our free & commercial CSS menus

コードや画像も公開されていて、さらにまとめてZipファイルで、ダウンロードできるCSSメニュー。

Collection of Web 2.0 Navigation Menus

少し前の記事ですが、とにかく大量にシンプルなタブ型のメニューがまとめられています。

13 Awesome Javascript CSS Menus

こちらは、13種類のスクリプトとCSSを使ったメニューのサンプル。

More Free CSS Navigation Menu Designs

シンプルな、タブ型メニューのサンプルです。

The History of Amazon’s Tab Navigation

Amazonのサイトデザインの歴史が一目でわかるサイト。

Five web 2.0 CSS menu tutorials

丁寧な解説付きのメニューのチュートリアルです。

CSS-Based Navigation Menus: Modern Solutions

とってもきれいな、タブ型のメニューがいっぱいまとめられています。

45 Photoshop Tutorials for Better Navigation

こちらは、Photoshopで作るメニューのチュートリアルがいっぱいです。

Stu Nicholls | CSSplay

とにかく大量のCSSサンプルがあります。

ジェネレータ編

お手軽にナビゲーション・メニューが作れるメニュー・ジェネレータをいくつか

CSS Menu Generator

デザインを選んで、メニューの数、リンク先などを入力するだけで、コードと画像がダウンロードできるジェネレータ。

IzzyMenu

左側のパネルでメニューを作っていくと、右側にプレビューが表示されるメニュージェネレータです。

OverZone Software – CSS Tab Designer

こちらは、PCにインストールするタイプのメニュージェネレータです。

Css Menu Generator – TabCreatr

左側のパネルから、デザインを選ぶと、右側にプレビューとコードが表示されます。

Tabs Generator

かわいいタブを作ってくれるジェネレータです。