今回からは、プロフィール画面を作成していきます。
プロフィール画面のサンプル画像とソースコード
以下の画面を作成します。
以下は、この画面のHTMLのソースコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="令和's GALLERYを運営している者のプロフィールです。">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>令和's GALLERY PROFILE</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="gallery-header" class="main-image">
<header class="header wrapper">
<h1><a href="index.html"><img class="logo" src="images/logo.png" alt="ホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="profile.html">PROFILE</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<h2 class="page-title">Profile</h2>
</div>
</div>
<div class="greeting">
<p>
<br>
皆様、この度は当サイトにご訪問頂きありがとうございます。<br>
当サイトを運営している、〇〇〇〇と申します。<br>
普段から写真撮影を趣味としており、日本の美しい景色をもっと多くの人に<br>
見てもらいたいという思いからこのサイトを作成しました。<br>
是非、楽しんで下さい。<br><br>
※このサイトは学習教材として作成されています<br><br>
</p>
</div>
<footer>
<div class="wrapper">
<p><small>© reiwasgallery</small></p>
</div>
</footer>
</body>
</html>プロフィール画面は、挨拶文のみとなっています。画像を入れたい場合は、好みでカスタマイズしてください。挨拶文とページタイトル以外は、他のページと同じ構成です。
以下の部分が主に他のページと違うところです。
<div class="greeting">
<p>
<br>
皆様、この度は当サイトにご訪問頂きありがとうございます。<br>
当サイトを運営している、〇〇〇〇と申します。<br>
普段から写真撮影を趣味としており、日本の美しい景色をもっと多くの人に<br>
見てもらいたいという思いからこのサイトを作成しました。<br>
是非、楽しんで下さい。<br><br>
※このサイトは学習教材として作成されています<br><br>
</p>
</div>サンプルは文字だけのシンプルな内容になっています。
以下は、この画面のCSSのソースコードです。
.greeting {
background-color: rgb(248, 241, 175);
text-align: center;
margin: 50px auto;
width: 70%;
font-size: 20px;
}CSSもこの記述のみです。これまで学習した内容のものしか使っていません。
お好みでカスタマイズしてください。
