HTML プロジェクト構造をセットアップする
このステップでは、固定位置のレイアウトのデモ用のプロジェクト構造を作成します。CSSの位置指定の練習の基礎となる、~/project
ディレクトリに簡単なHTMLプロジェクトをセットアップします。
まず、プロジェクトディレクトリに移動して必要なファイルを作成します。
cd ~/project
mkdir fixed-positioning-demo
cd fixed-positioning-demo
次に、基本的なHTMLファイル構造を作成します。
touch index.html
touch styles.css
index.html
ファイルを開いて、次の基本的なHTML構造を追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fixed Positioning Layout Demo</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="content">
<h1>Fixed Positioning Layout</h1>
<p>This is a sample page to demonstrate fixed positioning in CSS.</p>
<!-- 後続のステップでさらにコンテンツを追加します -->
</div>
</body>
</html>
初期のスタイリング付きで基本的なCSSファイル styles.css
を作成します。
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
.content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
例の出力構造:
~/project/fixed-positioning-demo/
├── index.html
└── styles.css
このセットアップは、固定位置の技術をデモするための、クリーンで簡単なプロジェクト構造を提供します。これを基にして、次のステップで固定位置の技術を展開していきます。