2012年12月15日土曜日

素敵なサイトのデザイン(css)をパク…参考にする方法

ほぼ日刊ニュース
@akiueoです。日々いろんなサイトを目にしますが、とっても素敵な雰囲気に目を奪われることがあります。
見出しや、リスト、サイドバーのデザイン等「どうなってるんだろう」と思ったことありませんか?
そんな時は、どうなっているのか見せていただきましょう。


スポンサードリンク


パクっちゃダメ!

タイトルはアレですが、絶対に人のデザインをパクってはいけません。

「このサイト素敵だな」と思ったら、そのままコピーするのではなく"なぜ自分は素敵だと感じたのか"を研究しましょう。配色なのか、スペースの取り方が良いのか、フォントが良いのか…いろいろ要素はあります。

バレなければやっていいわけではありません。
あくまで、スキルアップのためにやり方を紹介します。

どうやって参考にするのか
まず参考にするにあたって、HTMLとCSSの知識はどうしても必要です。
HTMLって何?という方は下のサイトで分かりやすく説明されているので目を通しておきましょう。

これからWebサイトを制作をしたいけど、何から勉強したらいいの?っていう人のためのガイド

"CSSで装飾するんだよー"ということが分かったところで、どうやって他のサイトを参考にするのか、やり方を紹介します。

用意するのはブラウザのみ。
SafariとGoogle Chromeなら同じ方法が使えます。

ここではこのブログを参考に、Safariでやり方を説明します。
まず下記の画像を参考に、開発 > Webインスペクタを表示 します。
(Chromeなら表示 > 開発/管理 > デベロッパーツール)
スクリーンショット 2012-12-14 20.21.58

クリックすると、下の画像のように画面下部にソースが表示されます。
スクリーンショット 2012-12-14 20.21.58

左下の虫眼鏡マークをクリック。これを使うと、普段表示されているデザインにどんなcssが使われているかが分かります。
(左側の四角が二重のマークはウィンドウの分割)
AIUEO Lab

虫眼鏡マークをクリックした状態で、該当箇所をクリックすると、ソースのどこが該当箇所なのか下部に反映されます。
スクリーンショット 2012-12-14 20.24.17

この状態で右下を見ると、クリックした該当箇所のcssが表示されています。
スクリーンショット 2012-12-14 20.24.17
あとは、これを参考にデザインを吸収していきましょう。


もっと手っ取り早く素敵なデザインサンプル教えてよという方は…
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス

上のサイトで素敵なサンプルを紹介してくれています。

例えば、下記のような見出しデザインが紹介されています。

デザインサンプル


デザインサンプルDesign Sample


コピーするだけで使えるので、参考にさせていただきましょう。
他にもデザインサンプルを紹介してくれているサイトは沢山あります。

タグ「css サンプル」を検索(人気順) - はてなブックマーク

デザイン関連は"はてブ"で探せば大抵のものが見つかります。
自分のお気に入りのデザインを探すのも1つの方法です。


まとめ
今回は見出しについて取り上げましたが、どの部分でも同じ手順でできます。
素敵なサイトを見つけたら、これからはソースを覗かせてもらいましょう。




Related Posts Plugin for WordPress, Blogger...