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


ネットサーフィンをしていると、とっても素敵な雰囲気のウェブサイトに目を奪われることがあります。
見出しや、リスト、サイドバーのデザイン等「どうなってるんだろう」と思ったことありませんか?

そんな時は、デザインを参考にして自分のサイトに取り入れることができます。



デザインをすべて真似するのは絶対にダメです

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

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

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

どうやってサイトのデザインをマネるのか


まず参考にするにあたって、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

このCSSをコピーして、自分のサイトのタグやクラス名などに書き換えて貼り付ければ同じデザインにできます。


もっと手っ取り早く素敵なデザインサンプル教えてよという方は…






例えば、見出しに関しては、上のサイトで素敵なサンプルを紹介してくれています。

コピーするだけで使えるので、参考にさせていただきましょう。

まとめ

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

スポンサーリンク

スポンサーリンク