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

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

レイアウトの確認

さきちんカフェの2カラムレイアウト

まずは「さきちんカフェ」のレイアウトと構成を確認してみましょう。

レイアウトと構成

さきちんカフェのカラムレイアウト

「さきちんカフェ」は2カラムレイアウトの構成で学習したレイアウトと異なり、サイドナビが右へ移動し、「メニュー」と「メインビジュアル」が追加された2カラムレイアウトとなります。

さきちんカフェのレイアウト

ページサイズ

ページ全体の横幅は960pxに指定されており、画面中央になるように左右の余白は自動調整されます。
また、縦幅はコンテンツの長さに応じて自動調整されます。

ページの全体サイズ

回り込みと解除

メインコンテンツ、サイドナビはfloat:leftで回り込み指定され、フッターで回り込みが解除されます。

回り込みエリアと解除

覚えておきたいポイント

カラム構成を確認しておこう!

実際にカラム組みする前に、カラム構成を確認しましょう。あらかじめ確認することにより、実際に作業する際のイメージがつかみやすくなります。

レイアウト構成に必要なスタイル

「さきちんカフェ」の2カラムレイアウトを構成するには、以下のスタイルが必要となります。

未対応ブラウザ用スタイル

未対応ブラウザへの対応

古いブラウザにHTML5以降に追加されたタグを理解してもらうための「おまじない」です。
なお、「さきちんカフェ」ではこの中からfooterを外しています。後ほどfooterだけで別にスタイルを作成するためです。

基本枠(wrap)

wrapのスタイル

ホームページの縦幅・横幅・位置を決めるためのスタイルです。
横幅を960pxに指定し、左右の幅を自動的に調整してコンテンツが画面中央に来るよう整えます。

ヘッダー(header)

ヘッダーのスタイル

ヘッダーを構成するためのスタイルです。ヘッダーにはページのタイトル画像・問い合わせ先の画像が入ります。
なお、ヘッダーには未対応ブラウザ用スタイルと共通です。

メニュー(nav)

メニューのスタイル

ヘッダー下のメニューエリアを構成するためのスタイルです。各ページへのリンクが表示されます。
こちらも未対応ブラウザ用スタイルと共通です。

メインビジュアル(mainimg)

メインビジュアルのスタイル

メインとなる画像を表示するためのエリアを構成するスタイルです。ここにメインビジュアルが表示されます。

メインコンテンツ(contents)

メインコンテンツのスタイル

メインコンテンツを構成するスタイルです。ここにホームページのメインとなるコンテンツが表示されます。
float:leftで左に回り込み指定されています。

サイドナビ(sidenavi)

サイドナビのスタイル

サイドナビを構成するスタイルです。
float:leftで左に回り込み指定されており、メインコンテンツと横並びに表示されます。

フッター(footer)

フッターのスタイル

フッターを構成するスタイルです。
コピーライトなどが表示されます。
また、メインコンテンツ・サイドナビの回り込みを解除します。

上記の8つのスタイルによって、「さきちんカフェ」のレイアウトが構成されています。

それぞれのスタイルの配置

上記のそれぞれのスタイルの配置図は、以下のようになります。

スタイルの配置図

このような配置で「さきちんカフェ」の2カラムレイアウトは構成されています。
次のページから実際にスタイルを作成し、大まかな枠組みを作っていきましょう。

覚えておきたいポイント

共通のスタイルも

ヘッダー(header)やメニュー(nav)は未対応ブラウザ用スタイルと共通です。すでに未対応ブラウザ用スタイルのセレクタにheaderやnavが組み込まれているため、新規に作成する必要はありません。

CSSファイルの作成
« 前のページへ 【STEP.3】カラムの構成

コンテンツの一覧

学習ページの一覧ナビ

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

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

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

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

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

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

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

規約やお問い合わせなど

ご利用案内
ご利用案内

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

FAQ
FAQ

よくあるご質問など。

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

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

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

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

運営者情報
運営者情報

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

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

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