webサイトレイアウトの仕方

Question

HTMLとCSSは理解したつもりなんですがどうもwebサイトを作れる気がしません。どのようにレイアウトしたらいいのですか？ドットインストールのレイアウトのやつを一応終わらせたはいいもののあれから脱出できません。もう少し実用的なものを作りたいのですが、どうしたらいいですか？
ただ単に人のサイトのソースを真似て書くだけでも効果はあるのでしょうか？
=====追記=====
みなさんありがとうございます！

Answer 1

私も勉強中の身でして、詳しいことはわかりませんが、下記のサイトはいかがでしょうか。
CSS： marginの正しい理解 (CSSのmarginが難しい) - KOJIKA17
時間をかけずに作りたいということでしたら、CSSのフレームワークも存在するようです。
Sassに対応したCSSフレームワークがアツイ！ - 株式会社LIG
bootstrap並にイケてたCSSフレームワーク[Gumby]※サンプル有り ...
2015年も注目したいCSSフレームワーク6選 | エバーセンス開発ブログ

Answer 2

下のリンクのサイトなんかで勉強してみてください。
一から丁寧に作り方を追って教えてくれるサンプルなんかが勉強になると思います。

WEBデザインレシピ
lopan.jp
WEBクリエイターボックス

おすすめのチュートリアル
実践で学ぶWebサイト制作ガイド|WEBクリエイターボックス
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド

Comments

[退会済みユーザー]

ありがとうございます。

[7hikolin]

ちなみに、コードを書くエディターですが、僕はKomodoEditというのがオススメです。なんでも書けますし、Windows、Mac版どちらもあって、無料です。
http://komodoide.com/komodo-edit/

Answer 3

まずどのようなレイアウトにしたいのかを考えます。
カラムはいくつ作るのか、レスポンシブにするのか、端末はどのようなものを想定するか、などなど。
HTML5で作るのであれば、ヘッダーやフッター、メイン要素やセクションにタグが用意されているので、
それらとdivを組み合わせて枠組みを作ります。
chromeのデベロッパーツールとか使うとページを見ながらデザインをいじれるので便利です。
枠組みを作ったらディテールを作り込みます。
基本的な流れはこんな感じです。（私の場合）

ソースを見ながらこういうスタイルにしたらこうなる！とか見るのはいいと思いますが真似だけだと
自分で作る力はつきにくいかなーと思います。

Answer 4

写経(他人のソースを読み、そのまま実際に理解しながら書く)がいちばん力がつくってWebデザイナーが言ってました。

写経で物足りなくなったら、他人のレイアウトをなにも見ずに自分で書いて、ほぼ同じ見た目を作れるようになれば、あとは各々のデザインの世界になると思いますよ。