ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

レイアウトを組み立てる

2カラムレイアウトを組み立てよう

それでは、すべて準備が整ったので2カラムレイアウトを組み立てる作業を行いましょう。

「index.html」ファイルを編集し、「style.css」からスタイルを呼び出しながらレイアウトを組み立てていきます。

2カラムレイアウトを組み立てよう

入力する項目が多いので、間違いに気をつけながらHTMLファイルを編集しましょう。
記述が1文字でも違うと、うまくスタイルを呼びだすことができません。

さきちんカフェの骨組みとなりますので、ここで間違えてしまうと今後のページを作成することができなくなってしまいます。

急がず、ゆっくりと慎重に入力していきましょう。

覚えておきたいポイント

焦らずゆっくりと

全ての部品が揃ったので、これから組み立てていきましょう!基本的にはHTMLファイルに呼び出すスタイルを入力するだけでOKです。
間違えないよう、落ち着いて入力しましょう。

カラム組みの方法

入力する内容が多く大変ですが、手順に沿って作業を行えばOKです。

組み立ての手順

step.1

まずは「index.html」ファイルをテキストエディタで開きましょう。

テキストエディタで開く

step.2

開いたら、<body>と</body>の間に2カラムレイアウトの基本枠となる「wrap」スタイルを呼び出します。

<div id="wrap">
</div>

wrapの入力

step.3

次にヘッダーを入力します。
<div id="wrap"></div>の間に<header></header>と入力しましょう。

なお、headerのスタイルは未対応ブラウザ用スタイルに記述されているので、classやidを付ける必要はありません。そのまま入力してOKです。

<div id="wrap">

<header>
</header>

</div>

headerの入力

step.4

メニューエリアを作成しましょう。
headerの下に、<nav></nav>と入力します。

navのスタイルも未対応ブラウザ用スタイルに記述されているので、classやidを付ける必要はありません。そのまま入力してOKです。

<div id="wrap">

<header>
</header>

<nav>
</nav>

</div>

navの入力

step.5

メインビジュアルを表示する枠を作成しましょう。
「mainimg」スタイルを呼び出すためのコードを入力します。

<div id="wrap">

<header>
</header>

<nav>
</nav>

<div id="mainimg">
</div>

</div>

mainimgスタイルの呼び出し

step.6

メインコンテンツ表示エリアを作成します。
「contents」スタイルを呼び出すためのコードを入力しましょう。

<div id="wrap">

<header>
</header>

<nav>
</nav>

<div id="mainimg">
</div>

<div id="contents">
</div>

</div>

contentsスタイルの呼び出し

step.7

バナーやリンクを表示させる、サイドナビも作成しましょう。
「sidenavi」スタイルを呼び出すためのコードを入力します。

<div id="wrap">

<header>
</header>

<nav>
</nav>

<div id="mainimg">
</div>

<div id="contents">
</div>

<div id="sidenavi">
</div>

</div>

sidenaviスタイルの入力

step.8

最後はフッターです。
お店の情報やコピーライトを表示するエリアを作成するので、「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>

footerスタイルの入力

入力の確認

これですべての入力の完成です。
入力したコードに間違いがないか確認し、ファイルを保存しましょう。

入力内容の確認

1文字でも間違いがあると、うまくスタイルが呼び出せずにレイアウトが崩れてしまいます。
ホームページデザインの基礎となる部分ですので、しっかりと間違い・見落としがないようにしましょう!

覚えておきたいポイント

HTMLの記述に注意しよう

header、nav、footerはclassやidで呼び出す必要がなく、そのまま記述してOKです。

headerとnavは未対応ブラウザ用スタイルに、footerは.(ドット)や#(シャープ)を付けずにstyle.cssに記述しているので、そのままタグを入力するだけでスタイルが適用されます。

どの部分を作っているのか把握しよう

今自分が、さきちんカフェのどの部分を作っているのか把握しながら入力作業を行いましょう。
これまでに作成してきたスタイルや、さきちんカフェのソースコードを確認しながら作業すると、より深く理解することができます。

入力の確認とまとめ
« 前のページへ HTMLファイルの作成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。