デモンストレーションHTMLおよびCSSWebサイトの概要

序章

このチュートリアルでは、デモンストレーションWebサイトの構造と、これからのチュートリアルでそれを再現するための計画について説明します。

デモンストレーションWebサイトの概要

視覚的には、サイトは7つの水平セクションに分割できます。

前の概要画像では、7つのセクションのそれぞれに適切なラベルが付けられています。

• 「ヘッダー」セクション（上部）。 このセクションの手順は、チュートリアル CSSを使用してWebサイトのヘッダーセクションを構築する方法（セクション1）で詳しく説明されています。
• 「自己紹介」セクション（上から2番目）。 このセクションの手順は、チュートリアル[CSSを使用してWebサイトのAbout Meセクションを構築する方法（セクション2）]（ how-to-build-the-about-me-section-of-your-website）で詳しく説明されています。 -with-css-section-2 ）
• 「プロジェクト」セクション（上から3番目）。 このセクションの手順は、チュートリアル CSSを使用してタイルレイアウトを作成する方法（セクション3）で詳しく説明されています。
• 「エクスペリエンス」セクション（上から4番目）。 このセクションの手順は、チュートリアル[CSSを使用してWebサイトに履歴書または作業履歴セクションを追加する方法（セクション4）]で詳しく説明されています。（ how-to-add-a-resume-or-work-history- section-to-your-website-with-css-section-4 ）
• 「教育」と「スキル」のセクション（上から5番目）。 このセクションの手順は、チュートリアル CSSを使用してWebサイトに教育履歴とスキルを追加する方法（セクション5）で詳しく説明されています。
• 注目の見積もりセクション（上から6番目）。 このセクションの手順は、チュートリアル CSSを使用してWebサイトに注目の見積もりボックスを作成する方法（セクション6）で詳しく説明されています。
• ページの下部に「貼り付く」静的フッター。 このセクションの手順は、チュートリアル CSSを使用して静的フッターを作成する方法（セクション7）で詳しく説明されています。

これらの各セクションは、チュートリアルシリーズの前半で調べたHTML要素のCSSプロパティを使用して作成されています。 このチュートリアルシリーズの残りの部分では、これらの各セクションを独自の個別のチュートリアルで再構築します。 CSSを学び始めたばかりの場合は、サイズ、色、背景画像などのスタイルの選択をチュートリアルで複製して、各チュートリアルで作業するときに例との一貫性を保つことをお勧めします。

このチュートリアルシリーズの最後に、Webサイトのスタイルとレイアウトを試すための提案があります。 これらの提案は、コンテンツをパーソナライズし、これらのチュートリアルをリミックスして、サイトの新しいスタイルと配置の可能性を作成する方法を示します。

結論

このチュートリアルでは、デモンストレーションWebサイトの構造と、それを再作成するための計画の概要について説明しました。 次のチュートリアルでは、CSSルールを作成して、Webページの全体本文のスタイルを設定し、このルールが重要な最初のステップである理由を学習します。