ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
まずは「さきちんカフェ」のレイアウトと構成を確認してみましょう。
「さきちんカフェ」は2カラムレイアウトの構成で学習したレイアウトと異なり、サイドナビが右へ移動し、「メニュー」と「メインビジュアル」が追加された２カラムレイアウトとなります。
ページ全体の横幅は960pxに指定されており、画面中央になるように左右の余白は自動調整されます。
また、縦幅はコンテンツの長さに応じて自動調整されます。
メインコンテンツ、サイドナビはfloat:leftで回り込み指定され、フッターで回り込みが解除されます。
実際にカラム組みする前に、カラム構成を確認しましょう。あらかじめ確認することにより、実際に作業する際のイメージがつかみやすくなります。
「さきちんカフェ」の２カラムレイアウトを構成するには、以下のスタイルが必要となります。
古いブラウザにHTML5以降に追加されたタグを理解してもらうための「おまじない」です。
なお、「さきちんカフェ」ではこの中からfooterを外しています。後ほどfooterだけで別にスタイルを作成するためです。
ホームページの縦幅・横幅・位置を決めるためのスタイルです。
横幅を960pxに指定し、左右の幅を自動的に調整してコンテンツが画面中央に来るよう整えます。
ヘッダーを構成するためのスタイルです。ヘッダーにはページのタイトル画像・問い合わせ先の画像が入ります。
なお、ヘッダーには未対応ブラウザ用スタイルと共通です。
ヘッダー下のメニューエリアを構成するためのスタイルです。各ページへのリンクが表示されます。
こちらも未対応ブラウザ用スタイルと共通です。
メインとなる画像を表示するためのエリアを構成するスタイルです。ここにメインビジュアルが表示されます。
メインコンテンツを構成するスタイルです。ここにホームページのメインとなるコンテンツが表示されます。
float:leftで左に回り込み指定されています。
サイドナビを構成するスタイルです。
float:leftで左に回り込み指定されており、メインコンテンツと横並びに表示されます。
フッターを構成するスタイルです。
コピーライトなどが表示されます。
また、メインコンテンツ・サイドナビの回り込みを解除します。
上記の8つのスタイルによって、「さきちんカフェ」のレイアウトが構成されています。
上記のそれぞれのスタイルの配置図は、以下のようになります。
このような配置で「さきちんカフェ」の2カラムレイアウトは構成されています。
次のページから実際にスタイルを作成し、大まかな枠組みを作っていきましょう。
ヘッダー（header）やメニュー（nav）は未対応ブラウザ用スタイルと共通です。すでに未対応ブラウザ用スタイルのセレクタにheaderやnavが組み込まれているため、新規に作成する必要はありません。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。