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