CSS チュートリアル: CSS を使用して Web サイトを構築する方法を 10 のステップで学びます (1)

著者：Eve Cole 更新時間：2009-06-12 17:25:58

この記事は原作者の Steve Dennis によって翻訳されました。感謝の意を表します。
このチュートリアルは主に Jorux によって翻訳された「 Creating a CSS Layout fromScratch 」を参照しており、主に Jorux の個人的な意見が追加されており、一部の冗長な説明は省略されています。

Web サイトを計画する

まず、Web サイトを計画する必要があります。このチュートリアルでは、Web サイトを構築する例として次の図を取り上げます。

CSS教程：十步学会用css建站
図 1

の基本的なレイアウト

を以下に示します。

CSS教程：十步学会用css建站
図 2 は

主に 5 つの部分で構成されています。
1. メインナビゲーションボタン効果のあるナビゲーションバー。
幅: 760ピクセル高さ: 50ピクセル
2. ヘッダー Web サイトのヘッダーアイコンには、Web サイトのロゴと名前が含まれています。
幅: 760ピクセル高さ: 150ピクセル
3. コンテンツ Web サイトのメインコンテンツ。
幅：480px 高さ：コンテンツにより異なります
4. サイドバーの境界線、追加情報。
幅：280px 高さ：状況に応じて変化します
5. フッターサイトの下段には著作権情報等が記載されております。
幅: 760ピクセル高さ: 66ピクセル

1. HTMLテンプレートやファイルディレクトリなどを作成します。

コードは次のとおりです。
「 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 」

<頭>

会社名 - ページ名

<本文>

それをindex.htmlとして保存し、cssとimagesのフォルダーを作成します。 Webサイトの構造は次のとおりです。

CSS教程：十步学会用css建站
図 3

2. Web サイト用の大きなボックスを作成する:

Web サイトのすべての要素を含む幅 760 ピクセルのボックスを作成します。
HTMLファイルのとの間に

を記述します。
こんにちは世界。

CSS ファイルを作成し、master.css という名前を付けて /css/ フォルダーに保存します。書く：
#ページコンテナ {
幅: 760ピクセル;
背景: 赤;
}
idがpage-containerのボックスの幅をhtmlで760pxに制御し、背景を赤色にすると以下のようになります。

CSS教程：十步学会用css建站
図 4

ここで、ボックスを中央に配置するために、「margin: auto;」と書き込み、CSS ファイルは次のようになります。
#ページコンテナ {
幅: 760ピクセル;
マージン: 自動;
背景: 赤;
}
ボックスの上部とブラウザーの間に 8 ピクセルの幅の隙間があることがわかります。これは、ブラウザのデフォルトのパディングと境界線が原因です。このギャップを解消するには、css ファイルに次のように記述する必要があります。
html、本文{
マージン: 0;
パディング: 0;
}

Web サイトを 5 つの div に分割します

。 1. 「ステップ 1」で説明した 5 つの部分をボックスに入れ、HTML ファイルに次のように記述します。

メインナビゲーション

コンテンツ

は

次のように動作します。

CSS教程：十步学会用css建站
図 5

2. 5 つの部分を区別するために、これら 5 つの部分を異なる背景色でマークし、css ファイルに次のように記述します。
#メインナビ {
背景: 赤;
高さ: 50ピクセル;
}
#ヘッダー {
背景: 青;
高さ: 150ピクセル;
}
#サイドバー-a {
背景: ダークグリーン;
}
＃コンテンツ {
背景: 緑;
}
#フッター {
背景: オレンジ;
高さ: 66ピクセル;
パフォーマンス

は次のとおりです。

CSS教程：十步学会用css建站
図 6

Web ページのレイアウトと div フローティングなど

1. フローティング: まず、境界線をメインコンテンツの右側にフローティングさせます。 CSSを使用してフローティングを制御します。

#サイドバー-a {
フロート: 右;
幅: 280ピクセル;
背景: ダークグリーン;
パフォーマンス

は次のとおりです。

CSS教程：十步学会用css建站
図7

2. メインコンテンツボックスにテキストを書き込みます。 HTML ファイルに次のように記述します。

Lorem ipsum dolor sit amet、consectetuer adipiscing elit。
Praesent sapien purus、ultrices a、varius ac、suscipit ut、maecenas in lectus。
ニブ・ルトルム・グラヴィダのサピエンスのドネク。
euismod vulputate、Nullam rhoncus mauris ac metus。
Duis scelerisque justo a pede、Nam augue lorem、semper at、porta eget、placerat eget、
Purus は、hac 習慣プラテア dictumst で、マティス nunc 前庭舌を停止します。

性能は以下の通りです。

CSS教程：十步学会用css建站
図 8

ただし、メインコンテンツボックスがページコンテナーの幅全体を占めていることがわかります。#content の右枠を 280px に設定する必要があります。国境と衝突しないように。

CSSコードは次のとおりです。
＃コンテンツ {
マージン右: 280px;
背景: 緑;
同時に

、境界線にテキストを書き込みます。 HTML ファイルに次のように記述します。

は

次のように動作します。

CSS教程：十步学会用css建站
図 9

これは私たちが望んでいたものではありません。Web サイトの下部フレームが境界線の下に入り込んでいます。これは境界線を右側にフローティングしているためです。フローティングしているため、ボックス全体の上の別のレイヤーにあることがわかります。したがって、下部のボックスとコンテンツボックスは位置合わせされます。

そこでCSSで次のように書きます。
#フッター {
クリア：両方。
背景: オレンジ;
高さ: 66ピクセル;
パフォーマンス

は次のとおりです。

CSS教程：十步学会用css建站
図10

Web ページのメインフレーム外の追加構造のレイアウトとプレゼンテーション。次のような Web ページのメインフレーム外の追加構造のプレゼンテーション (レイアウト)。

1. メインナビゲーションバー。
2. タイトル (Web サイト名とコンテンツのタイトルを含む)。
3. コンテンツ。
4. 著作権、認証、サブナビゲーションバー (オプション) を含むフッター情報。
これらの構造を追加するときは、元のフレームワークを破壊しないように、css ファイルの「body」タグ (TAG) の下に追加する必要があります。
。隠れた {
表示: なし。
}
「.hidden」は追加したクラスです。このクラスは、hidden クラスに属するページ上の要素を非表示にすることができます。これらは後で使用するので、今は忘れてください。

ここで見出しを追加します。

まず HTML コードに戻ります。

から

はよく使用される HTML 見出しコードです。たとえば、一般的には

ウェブサイト名

、

ウェブサイトのサブタイトル

、

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

などを使用します。 HTML ファイルのヘッダー層 (Div) に以下を追加します。

デザインを啓発する

ページを更新すると、巨大なタイトルとその周囲の空白が表示されます。これは、

> タグのデフォルトのサイズと余白が原因で、これらの空白を最初に追加する必要があります。
h1 {
マージン: 0;
パディング: 0;
次
はナビゲーションバーです。
ナビゲーションバーのパフォーマンスを制御する CSS コードは比較的複雑です。9 番目または 10 番目のステップで詳しく説明します。次に、HTML ファイルにナビゲーションコードを追加します。

概要

サービス

ポートフォリオ

お問い合わせ

(注: 元のチュートリアルでは dl と dt が使用されていましたが、jorux ではここでより一般的に使用される ul と li タグが使用されています)
現時点では、ナビゲーションバーのパフォーマンスは比較的悪いですが、その特別なパフォーマンスは今後のチュートリアルで紹介されるため、ナビゲーションバーを一時的に非表示にする必要があるため、次のように追加しました。

概要

サービス

ポートフォリオ

お問い合わせ