すぐに使えるCSSのデザインを紹介しているサンプルサイトをご紹介！

CSSを難しいと思っている方は多いですが、実際は慣れです。プログラミングが出来る人に「プログラミングって難しくない？」と聞くと、「楽しいですよ。」という返事がきたり「言語だから日本語と同じ感じだよ。」みたいな返事が来る事が多いです。

CSSも同じで、難しく考えずに楽しんだり言語として捉えてみましょう。CSSはCascading Style Sheetsの略です。カスケーディング・スタイル・シートと読みます。

上記の画像がCSSを適用する前の状態です。分かりにくい印象を受ける事でしょう。

では、こちらのCSS適用後の画像はどうでしょうか。かなり印象が違うはずです。このように、CSSを適用するとサイトやホームページが見やすくなります。

今回は、CSSのデザインのサンプルを交えながらCSSについての学びを深めていきます。最後まで是非ご覧下さい。

コピペで使えるCSSのサンプルコード集

CSSは、サンプルコードさえ分かればそのまま反映出来るものが多いです。この章では、実際に使えるCSSのサンプルコードをご紹介します。サイトをデザインしたいと考えている方は参考にしてみて下さい。

CSSやHTMLを使うボタン作りに参考になるサイト

CSSのボタンとは、ホームページやサイト上にあるボタンの事です。確定ボタン等です。ボタンにはたくさんの種類があります。

「167 CSS Buttons」というサイトでは、様々なボタンのデザインのサンプルが紹介されています。ベーシックなものや、ホバーした時のエフェクトが参考になります。
「CSSボタンを演出する155個のHoverエフェクトまとめ」には、155種類のホバーエフェクトが紹介されているので、ホバーエフェクトを作りたい時にざっと見てみて下さい。
「CSSのみで実装するボタンデザインやホバーエフェクト 20＋α」は、頻繁に使えるデザインがたくさん掲載されているので、CSSを学んでいる方は一見の価値があります。
画像を使ったボタンを作る際には、「簡単に実装できる、ボタン画像のマウスオーバーイベント 10+」を見てみて下さい。

参考：167 CSS Buttons

参考：CSSボタンを演出する155個のHoverエフェクトまとめ

参考：CSSのみで実装するボタンデザインやホバーエフェクト 20＋α

参考：簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

CSSやHTMLを使う見出し作りに参考になるサイト

CSSの見出しとは、サイトの中の章ごとに設定されている大きな目立つ文字の事です。

「シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50」は、見出しに特化したCSSがまとめられているサンプルサイトなので、見出しのデザインに迷ったら参考にしましょう。
「CSSでオシャレな見出し（hタグ）の作り方 10選」も趣向を凝らしたデザインが多いので必見です。

参考：シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50

参考：CSSでオシャレな見出し（hタグ）の作り方 10選

CSSでテキストにエフェクトをつける際に参考になるサンプルサイト

CSSのテクストのエフェクトとは、例えば、タイプライターで打った時のような表示や、フェード等のアニメーションの事です。

「71 CSS Text Effects」というサイトは、まさにテキストにエフェクトの紹介が秀逸なので参考になります。
「CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ」は、33種類のテキストエフェクトが掲載されています。

参考：71 CSS Text Effects

参考：CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ

CSSを使ってメニューを作る際に参考になるサンプルサイト

CSSのメニューとは、WordPress等でよく上部に固定されている重要なページにワンクリックで飛べるあの部分の事です。三本線の所をクリックしたら展開するタイプもよく見ます。

CSSのメニューを作る時に参考になるサンプルサイトは、「135 CSS Menu」がいいでしょう。135種類のメニューのデザインのCSSがまとめられているサンプルサイトです。
「UIデザインの参考にしたい！ナビメニュー用HTML/CSSスニペット40個まとめ」は、おしゃれなメニューを作りたい時に、「Creative CSS3 Animation Menus」は、メニューの仕組みや作り方を学びたい時に参考になります。

参考：135 CSS Menu

参考：UIデザインの参考にしたい！ナビメニュー用HTML/CSSスニペット40個まとめ

参考：Creative CSS3 Animation Menus

CSSやHTMLでフォームを作る際に参考になるサンプルサイト

CSSのフォームとは、お問い合わせフォームやログインフォームのようなものの事です。

「10 CSS HTML Form Designs」は、10種類のフォームのデザインを見る事が出来、「80 CSS Forms」は、デザインが優れた80個のフォームが掲載されたサンプルサイトなので、おしゃれなフォームを目指している方はどちらも見てみて下さい。

参考：10 CSS HTML Form Designs

参考：80 CSS Forms

CSSでチェックボックスをデザインする際に参考になるサンプルサイト

CSSのチェックボックスとは、クリックするとレ点がつく等、チェック出来るボックスの事です。

「83 CSS Checkboxes」は、83種類のチェックボックスのデザインがまとめられているサンプルサイトなので、どういったものか分からない方はまずサイトに飛んでみてください。

参考：83 CSS Checkboxes

CSSでラジオボタンをデザインする時に役立つサンプルサイト

CSSのラジオボタンは、一見チェックボックスに似ています。違いは、チェックボックスは複数クリック出来るのに対して、ラジオボタンは１つしか選択出来ません。

「77 CSS Radio Buttons」は、参考になるおしゃれなラジオボタンがたくさん紹介されています。こだわりのラジオボタンを作りたい人は必見です。

参考：77 CSS Radio Buttons

CSSでタブをデザインする時に役立つサンプルサイト

CSSのタブとは、折りたたまれたウィンドウがあり、上部の切り替えボタンをクリックするとそのウィンドウ内の表示が切り替わるといったタイプのものです。

「12 CSS Tabs」は、12種類のタブ表示切り替えアイデアが詰まっているサンプルサイトなので、スマホやタブレットでの表示に必要な技術なので習得しておきましょう。

参考：12 CSS Tabs

CSSでモーダルウィンドウを作る時に役立つサンプルサイト

CSSのモーダルウィンドウとは、クリックすると展開する小さいポップアップの窓の事です。もう一度クリックすると閉じるタイプが一般的です。

「58 CSS Modal Windows」は、モーダルウィンドウについて記載されたサンプルサイトです。クリックするとポップアップするモーダルウィンドウを使いたい際に参考になります。

参考：58 CSS Modal Windows

CSSでテーブルをデザインする時に役立つサンプルサイト

CSSのテーブルとは、料金表や比較する際に使われるものです。お店の住所、電話番号、メールアドレス等をエクセルのように枠の中に入力しているのを見た事がある方も多いでしょう。それがテーブルです。

テーブルのデザインを見たい方は、「CSSでTableをデザインするサンプル集」を見てみて下さい。

参考：CSSでTableをデザインするサンプル集

流行りのデザインにも即対応！CSSフレームワーク

CSSフレームワークを使うと、流行りのデザインのデザインやレイアウトにも即対応出来ます。クラス名を指定するだけなので簡単です。作成者以外が使うという用途にも向いているのでチームで使う際にも問題ありません。

高機能なCSSフレームワークを導入すると、サイトが重くなってしまうという点は注意が必要です。

CSSフレームワークを選ぶ基準

CSSフレームワークを使う際には、どの部分に使用するかを予め明確にしておきましょう。おおまかにCSSフレームワークを使用し、細かい部分は自分でCSSを書くという方法がいいでしょう。

上述しましたが、CSSフレームワークのファイルサイズが重いと、サイトがもっさりするので気をつけましょう。

評価が高い厳選CSSフレームワーク

簡単に使えて、使いやすい上に動作が軽量という評判のおすすめのCSSフレームワークをご紹介します。

NASAの採用！Bootstrap

4種類のレスポンシブデザインに対応し、グリッドレイアウトが特徴的な「Bootstrap」。NASAやMSNBCも採用しています。日本語の解説サイトが多いのでまず学ぶべきCSSフレームワークといえます。

参考：Bootstrap

カスタマイズ性を重視！Foundation

カスタマイズ性を重視しているCSSフレームワークの「Foundation」。Bootstrap同様に人気があります。レスポンシブデザインを重要視する方は、BootstrapよりもFoundationをおすすめします。

参考：Foundation

軽量設計が高評価！UIkit

とにかく軽いCSSフレームワークを使いたい方は「UIkit」を使うのがいいでしょう。レスポンシブにも対応していますし、様々なコンポーネントも用意されています。

参考：UIkit

CSSフレームワークの基本！Skeleton

とにかく軽量でCSSフレームワークについて学び始めたばかりの方は「Skeleton」を使ってみて下さい。最小限の構成になっています。JavaScriptには対応していません。

参考：Skeleton

とにかくシンプル！Base

サイトのデザインやレイアウトのベースとなるCSSフレームワークを用意しているのが「Base」です。シンプルでありながら機能は豊富なので、素早くウェブサイトを作りたい場合に使いやすいです。

参考：Base

あのGoogleが提唱！Materialize

「Materialize」の知名度が一気に高まったのは、何といってもGoogleが提唱したからです。「Bootstrap」に使い方が似ているので手軽にマテリアルデザインを導入出来ます。

参考：Materialize

直感的にコーディング！Milligram

「A Minimalist CSS Framework」というキャッチコピーでお馴染みの「Milligram」。軽量でシンプルなユーザーインターフェースが実現出来ます。

参考：Milligram

Flexboxを採用！Bulma

「Bulma」は、Flexboxを採用したCSSフレームワークです。JavaScript不要でレスポンシブデザインのウェブサイトを作成したい時に使い勝手がいいです。一部のパーツだけを使う事も出来ます。

参考：Bulma

3KBのCSSフレームワーク！chota

Flexboxを採用し、3KBの超軽量CSSフレームワークが「chota」です。ユーティリティが充実しているので柔軟にウェブサイトを作れます。

参考：chota

ユーティリティクラスを使いこなせれば便利！Tailwind CSS

「Tailwind CSS」は、ユーティリティクラスを使いまわすという特徴を持ったCSSフレームワークです。クラス名を覚えてしまえば、HTMLとCSSの行き来を少なく出来るので制作時間を少なく出来ます。

参考：Tailwind CSS

直感的に制作可能！Semantic UI

直感的にウェブサイトを制作出来るのが特徴の「Semantic UI」。実際に使ってみるとシンプルで使いやすいという事を実感出来ます。

参考：Semantic UI

Yahoo!が提供するCSSフレームワーク！Pure

「Pure」の一番の特徴は、Yahoo!が提供している事でしょう。軽量なので、ファイルの重さを重要視している方に使われています。

参考：Pure

大枠を作るのに便利！SkyBlue

「シンプルで軽量」が特徴の「SkyBlue」。大枠を「SkyBlue」で作って、細々とした部分は自分で作り込むといった使い方が向いています。

参考：SkyBlue

まとめ

ご紹介したCSSのサンプルサイトで、基本的なテクニックを身につけて下さい。CSSフレームワークを使うと効率よくおしゃれなデザインのサイトを作成出来るので、積極的に使っていきましょう。