2カラムレイアウトの組み立て|さきちんWEB▲SakichinWEBホームページの作り方:さきちんうぇぶホームページの作り方を基礎から学べるウェブサイト。わかりやすい説明で初心者も安心!レイアウトを組み立てるHOMEホームページを完成させようSTEP3.カラムの構成レイアウトを組み立てる2カラムレイアウトを組み立てようそれでは、すべて準備が整ったので2カラムレイアウトを組み立てる作業を行いましょう。「index.html」ファイルを編集し、「style.css」からスタイルを呼び出しながらレイアウトを組み立てていきます。入力する項目が多いので、間違いに気をつけながらHTMLファイルを編集しましょう。記述が1文字でも違うと、うまくスタイルを呼びだすことができません。さきちんカフェの骨組みとなりますので、ここで間違えてしまうと今後のページを作成することができなくなってしまいます。急がず、ゆっくりと慎重に入力していきましょう。覚えておきたいポイント焦らずゆっくりと全ての部品が揃ったので、これから組み立てていきましょう!基本的にはHTMLファイルに呼び出すスタイルを入力するだけでOKです。間違えないよう、落ち着いて入力しましょう。入力する内容が多く大変ですが、手順に沿って作業を行えばOKです。組み立ての手順step.1まずは「index.html」ファイルをテキストエディタで開きましょう。step.2開いたら、<body>と</body>の間に2カラムレイアウトの基本枠となる「wrap」スタイルを呼び出します。id="wrap"></div>step.3次にヘッダーを入力します。id="wrap"></div>の間に<header></header>と入力しましょう。headerのスタイルは未対応ブラウザ用スタイルに記述されているので、classやidを付ける必要はありません。そのまま入力してOKです。id="wrap"><header></header></div>step.4メニューエリアを作成しましょう。headerの下に、<nav></nav>と入力します。navのスタイルも未対応ブラウザ用スタイルに記述されているので、classやidを付ける必要はありません。そのまま入力してOKです。id="wrap"><header></header><nav></nav></div>step.5メインビジュアルを表示する枠を作成しましょう。「mainimg」スタイルを呼び出すためのコードを入力します。id="mainimg"></div></div>step.6メインコンテンツ表示エリアを作成します。「contents」スタイルを呼び出すためのコードを入力しましょう。id="contents"></div></div>step.7バナーやリンクを表示させる、サイドナビも作成しましょう。「sidenavi」スタイルを呼び出すためのコードを入力します。id="sidenavi"></div></div>step.8最後はフッターです。お店の情報やコピーライトを表示するエリアを作成するので、「footer」を入力しましょう。footerも(ドット)や#(シャープ)を付けずにstyle.cssに記述しているので、そのままタグを入力するだけでスタイルが適用されます。id="sidenavi"></div><footer></footer></div>入力の確認これですべての入力の完成です。入力したコードに間違いがないか確認し、ファイルを保存しましょう。1文字でも間違いがあると、うまくスタイルが呼び出せずにレイアウトが崩れてしまいます。ホームページデザインの基礎となる部分ですので、しっかりと間違い・見落としがないようにしましょう!覚えておきたいポイントHTMLの記述に注意しようheader、nav、footerはclassやidで呼び出す必要がなく、そのまま記述してOKです。headerとnavは未対応ブラウザ用スタイルに、footerは.(ドット)や#(シャープ)を付けずにstyle.cssに記述しているので、そのままタグを入力するだけでスタイルが適用されます。どの部分を作っているのか把握しよう今自分が、さきちんカフェのどの部分を作っているのか把握しながら入力作業を行いましょう。これまでに作成してきたスタイルや、さきちんカフェのソースコードを確認しながら作業すると、より深く理解することができます。良質なコンテンツを作り込む検索エンジン最適化(SEO対策)広告を出すSNSを利用する独自ドメインを取得しようあとがき快適なサイト運営のためにウィルス対策について安心してホームページを運営するための心がけ。HTMLの特殊文字一覧よく使う、HTMLの特殊文字・記号の一覧表。カラーコードの一覧HTML・CSSで使えるカラーコードの一覧表。当サイトをご利用になる前に、必ずご確認ください。FAQよくあるご質問など。お問い合わせさきちんWEBについてのお問い合わせはこちらから。個人情報管理とWeb広告配信について。運営者情報さきちんWEBの管理・運営者、さきちんについて。サイトマップさきちんWEBのサイトマップ。さきちんWEBについてホームページの作り方を学習できるウェブサイトです。さきちんWEBはホームページの作り方が学べるウェブサイトです。基本から応用まで、ホームページ制作に必要な知識が身につきます。初心者でもOK!難しい専門用語を使わず、わかりやすい説明でホームページの作り方を学ぶことができます。お手本を見ながらサクサク学習。実践形式でグングン上達。まで必要な知識がまとめて身につく、オールインワン学習サイトです。SakichinWEB。