初心者向け!HTML/CSSのコーディング手順をイチからしっかりと。英語ギャラリークーポンEnglishRSSTwitterFacebook初心者向け!HTML/CSSのコーディング手順をイチからしっかりと。Webサイト制作HTMLやCSSの書き方を勉強してみたという初心者さんから、いざ自分でWebページを作っていくとなると、何から始めればいいのやら...?という声をよく耳にします。構成を考えてコーディングを始めないとレイアウト崩壊の危機...!今回は完成したデザインをHTML/CSSでコーディングしていく第一歩目の手順を紹介します。ファイル、フォルダーを作るまずは必要なファイルとフォルダーを用意します。index.html、CSSを入れる「css」フォルダーと、その中にstyle.css、そして画像を入れる「images」フォルダーを用意しましょう。index.htmlにHTMLを、style.cssにCSSを書き込んでいきます。レイアウトをメモに書き出すHTMLマークアップを始める前に、ページの文書構造を確認しておきましょう。Webページは基本的に箱の積み重ねと詰合せです。大きな枠組みがどう構成されているかを考えます。図のように箱にあたる部分を線で囲み、あらかじめクラスやIDをふっておくとCSSで装飾する時に楽になります。この構造図はメモ用紙に簡単に書いておいても、使用したワイヤーフレームやデザインに書き込んでもOK。全体像が把握しやくなるので、初心者さんにはおすすめです。ソースコード内で迷子にならないよう、先に構造を整理しておくクセをつけておきましょう。文字エンコーディング。Webページのタイトル。Webページの紹介文。中身、実際にWebページとして表示される部分を書いていきます。言え、ただ闇雲に書いていくわけではありません。レイアウトをメモに書き出す」に書いた通り、タグやクラスを整理しながらレイアウト部分(ヘッダー・メイン・サイド・フッター)を記述しましょう。<footer>footer</footer></div>タグの中身はひとまず適当でOK。記述したHTMLを装飾していきます。わかりやすいように背景色をつけておくといいですね。どの要素が横並びになるのか、横並びにするにはどのプロパティをどこに書くのかなど、確認しながら書き進めていきます。plum;}今のところこんな感じになりました。ちなみに!通常、色の指定にはカラーコードを記述しますが、決められた色名称を使うこともできます。いったテスト段階ではわかりやすくするため「とりあえず」色をつける...ということもあるので、短くてスペルの簡単な色名称を覚えておくと便利です。レイアウト部分のレスポンシブ対応ここまで、デスクトップ版を先に作る方法で書いてきました。デスクトップサイズで確認して、問題なく横並びにできていたらモバイルサイズにも対応させましょう。続いて表示領域を指定し、その中に装飾したい要素を書いていきます。縦並びにする」という指定がされています。要領で、必要なIDやクラスやどの要素をどのボックスでまとめるか等をメモに書き出し、HTMLの記述、CSSの装飾を繰り返して細部を作り込んでいきます。ひとつひとつ装飾していくのは大変ですが、パーツにわけて考えていくと先が見えてきそうですね!全体のコーディングが終わったら他のブラウザーでも表示確認をし、うまく表示されていたら完成です!最初のうちはメモをしていくことでうまく頭の中が整理できるはずです。慣れてくると少しずつメモなしでもコーディングを進められますよ!今回は手順の紹介ということで、細かいコーディングの仕方を省きましたが、またゆっくりとHTML/CSSの基礎も紹介していきたいですね。みなさんが実践しているおすすめの手順はありますか?シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。