手間ひまかけずcss3だけでデザインしたい人のためのチュートリアル集22選

最近すっかりPHPが面白くなってしまい、デザインが2の次になりがちでした。最近改めてデザインを見直す機会があり、jQueryや画像などを使わなくても、ある程度見やすくて今っぽいデザインにできるcss3の使い方を見て溜め息をついています。

そんなわけで今回は、システム作りに忙しくてデザインに時間がとれてない人のための、簡単でカッコいいデザインにできるcss3のチュートリアルです。

1. 見出し

1.1 ロゴをcssだけでデザイン

上の見出し、というかロゴ風文字は全てcssでデザインされています。
英語のフォントを色々知っておけばこんな使い方もできるんですね。日本語にも応用がききそうな使い方です。

10 Examples of Beautiful CSS Typography and how they did it… « Web Design Marketing Podcast & Blog 10 Examples of Beautiful CSS Typography and how they did it… Web Design Marketing Podcast & Blog

1.2 見出しを自動生成

見出しを全自動で作ってくれるサイト。見出しを作りすぎて飽きてきたときのインスピレーションや、大量サイト構築の時などに使えるかもしれません。

好きな色でCSS見出しが作れます | スタイルシート見出しメーカー スタイルシート見出しメーカー

1.3 リボン風見出しの作成

これは流行るだろ～と思ったらもうとっくに流行ってたんですね。phpばっかりやっていたら時代に取り残されてしまいそうでした。
html5ならではのタグの使い方が勉強になります

【CSS3】3Dっぽいリボンの見出しを表現する方法 « minimo minimo

1.4 リボン風見出し – その2

上のチュートリアルとは別な作り方のリボン風見出しです。

CSSで巻き込みリボン風見出しの作り方 – HYPER PORTFOLIO HYPER PORTFOLIO

1.5 見やすい見出し・リスト

自分でもいくつか作ってみました。

• リストの装飾
• リストの装飾

1.これはいい見出しです。

2.これはいい見出しです。

当サイトも最近見出しレイアウトを変更しました。参考にしたのはこちらのサイト

ホームページを作る人のネタ帳 Webな人なら知ってるサイトだと思います。サイトリニューアルされてからとても見やすくなりました。h3タグはこのサイトのものを参考にさせていただきました。

1.6 彫刻のように彫った感満載なロゴデザイン

色の組み合わせによって立体的に演出されている文字です。ロゴにも見出しにも使えそうです。

Css Letterpress and Drop Shadow シンプルなだけにわかりやすい。

1.7 めくれたような演出

最近よく見かけるデザインです。画像を用意しないでいいっていうのは、良いもんですねえ。

How to create slick effects with CSS3 box-shadow – RedTeamDesign demo 紙がめくれたようなエフェクト

2. navバー

2.1 綺麗なグラデーションがかかった横並びのメニュー

Demo: Pure CSS3 Gradient Dropdown Menu (No Image Used) css3だけで綺麗なグラデーションがかかった横並びのメニュー

2.2 ダイナミックなnavメニュー

LWIS.NET Celebrity Drop-Down Menu メニューの量が半端なく多いサイトに使えそうな大胆なナビゲーションです

2.3 リボン風なnavメニュー

Adobe.com Lwis Drop-Down Menu Theme アドビ風なナビゲーションのデモが置いてあります

2.4 呆れるくらいキレイなnavメニュー

Blend Menu – a css3 experiment こんなキレイなメニューがcss3だけで実装できちゃいます。凄いわ…

2.5 奥行きのあるnavメニュー

CSS3 Glow Tabs こちらもなかなか奥ゆかしいnavメニューです。サイトがグッと引き締まりそう

2.5 子カテゴリまで綺麗に表示できるnavメニュー

Horizontal Subnav w/ CSS & jQuery エレガントな印象を与えることができそうなnavのデモサイトです

3. ボタン

さて、お次はボタン系のチュートリアル。
サクッと簡単に作れてしかもデザイン的にもこだわりがありそうなボタンを作っているサイトを紹介します。

3.1 css3ボタン一式が揃ったサイト

ここで全てまかなえてしまいそうなくらい色々なカラーのボタンが揃っています。

Demo: CSS3 Buttons 元ネタは海外の有名サイトさんです。http://webdesignerwall.com/

3.2 ボタンの作り方を段階ごとに教えてくれているサイト

css3ボタンの作り方を極めていらっしゃるサイト。作り方が完全に理解できてしまいます

CSSでアイコンをデザイン – Weblog – hail2u.net

4. ギャラリー

フォトギャラリーもcss3だけで作れてしまう時代かー。

Stu Nicholls | CSSplay | Cross browser multi page photo gallery mark 2 タブでギャラリーを分け、しかもマウスオーバーで拡大。デモをDL出来ます

5. 吹き出し

5.1 シンプルながら使える吹き出しデザイン

単に吹き出しだけでない用途がありそうなデザイン

Speech Bubbles With CSS cssのみで吹き出しを表現。IE6ももちろんOKです。

5.2 ポップな吹き出しデザイン

かなり色々なバリエーションの吹き出しを閲覧できるサイト。気軽に参考にできていいですよね。

Demo: Pure CSS speech bubbles – Nicolas Gallagher

6. テーブルデザイン

ひとひねり加えるだけで、サイトが見違えてしまうようなテーブルデザインのチュートリアルです。

Pimp Your Tables with CSS3 | Codrops テーブルのデザインをこんなにも美しく組んでいるのを見たことがあろうか…いや、ないです。

7. ページナビ

ページ送りですら立体的に表現できてしまいます。

エフェクター動画検索レビューサイト -【Supernice!エフェクター】 手前味噌で申し訳ないですが運営サイトから。立体的なページ送りの表現

8. 自動生成してくれるサイト

8.1 CSS3.0 Maker

CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator 自動で生成してくれるってのは、やっぱりいいもんですねえ。

8.2 text-shadowについて極めている自動生成サイト

Css Text Shadow text-shadowについて一生困らないくらい分かりやすいアプリで勉強できます。素晴らしい…

今回は以上です。久しぶりにコーディングを色々とやりました…
手間ひまかけずと題したエントリーでしたが、いざ自分でいじっていると、画像を使っていないにもかかわらず、もの凄く手間ひまかかってしまいました。

もっと楽な方法ってないんですかねえ…