① https://chat.openai.com/share/4828cb24-f047-4d1c-aa76-61b92a5eac46
Chat GPTの回答①
ヘッダーとフッターの部分を紺色にし、お洒落なデザインにするためのHTMLとCSSを組み合わせたコードを以下に示します。ヘッダーにはページタイトルを、フッターにはコピーライト情報を配置することで、よりプロフェッショナルな見た目になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>
<style>
/* ページ全体の基本スタイル設定 */
body {
font-family: Arial, sans-serif; /* フォント設定 */
margin: 0;
padding: 0;
color: white; /* 文字色 */
}
/* ヘッダー部分のスタイル設定 */
header {
background-color: #003366; /* 紺色 */
padding: 10px 20px; /* 内側の余白 */
text-align: center; /* テキストを中央揃え */
}
/* フッター部分のスタイル設定 */
footer {
background-color: #003366; /* 紺色 */
padding: 10px 20px; /* 内側の余白 */
text-align: center; /* テキストを中央揃え */
position: fixed;
bottom: 0;
width: 100%; /* 幅を画面全体に */
}
</style>
</head>
<body>
<header>
<h1>Dashboard</h1>
</header>
<p>Welcome to your Dashboard!</p>
<footer>
<p>© 2024 Company, Inc.</p>
</footer>
</body>
</html>
このコードでは以下の要素が含まれています：
1．ヘッダー (<header>): ページの上部に配置し、背景色を紺色に設定しています。
2．フッター (<footer>): ページの下部に配置し、背景色を紺色にして固定表示にし、ページの最下部に常に表示されるように設定しています。
この構成により、ユーザーがページをスクロールしてもフッターが表示され続け、デザインの一貫性が保たれます。