basic
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ポートフォリオサイト</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
</head>
<body>
<section>
<h1>ドットインストール</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</section>
</body>
</html>
heder
<body>
<header>
<div class="container">
<div>
<img src="img/taro.png" alt="アイコン"
class="icon"
width="120"
height="120">
</div>
<div>
<h1>山田太郎</h1>
<p>UI/UXデザイナー見習いです</p>
<ul>
<li><a href="#"><img src="img/blog.png" alt="blog icon" width="20" height="20"></a></li>
<li><a href="#"><img src="img/photos.png" alt="photo icon" width="20" height="20"></a></li>
</ul>
</div>
</div>
</header>
@charset "utf-8";
body {
margin: 0;
}
h1,
p {
margin: 0;
}
img {
vertical-align: bottom;
}
header {
background: #efefef;
}
header .container {
width: 400px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 32px 0;
/* outline: 1px solid red; */
}
header .container div + div {
margin-left: 32px;
}
header h1 {
font-weight: normal;
font-size: 24px;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
header ul li + li {
margin-left: 8px;
}
header .icon {
border-radius: 50%;
}
main
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ポートフォリオサイト</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
</head>
<body>
<header>
<div class="container">
<div>
<img
src="img/taro.png"
alt="太郎のアイコン"
width="120"
height="120"
class="icon">
</div>
<div>
<h1>山田太郎</h1>
<p>UI/UXデザイナー見習いです</p>
<ul>
<li>
<a href="#">
<img
src="img/blog.png"
alt="ブログアイコン"
width="20"
height="20">
</a>
</li>
<li>
<a href="#">
<img
src="img/photos.png"
alt="写真アイコン"
width="20"
height="20">
</a>
</li>
</ul>
</div>
</div>
</header>
<main>
<div class="container">
<h1>WORKS</h1>
<section>
<img
src="img/work1.png"
alt="勇者ゲーム"
width="400"
height="225">
<h2>勇者ゲーム</h2>
<p>すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。</p>
</section>
<section>
<img
src="img/work2.png"
alt="宝探しゲーム"
width="400"
height="225">
<h2>宝探しゲーム</h2>
<p>すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。</p>
</section>
<section>
<img
src="img/work3.png"
alt="神経衰弱"
width="400"
height="225">
<h2>神経衰弱</h2>
<p>すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。すごいゲームです。</p>
</section>
</div>
</main>
</body>
</html>
@charset "utf-8";
body {
margin: 0;
}
h1,
h2,
p {
margin: 0;
}
img {
vertical-align: bottom;
}
header {
background: #efefef;
}
header .container {
width: 400px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 32px 0;
/* outline: 1px solid red; */
}
header .container div + div {
margin-left: 32px;
}
header h1 {
font-weight: normal;
font-size: 24px;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
header ul li + li {
margin-left: 8px;
}
header .icon {
border-radius: 50%;
}
main .container {
width: 400px;
margin: 0 auto;
/* outline: 1px solid red; */
}
main h1 {
font-size: 24px;
font-weight: normal;
text-align: center;
/* padding, marginどちらでもOKなばあいはpaddingを選ぶことが多い */
padding: 60px 0;
}
main h2 {
font-weight: normal;
font-size: 20px;
margin-top: 16px;
}
main p {
line-height: 1.8;
margin-top: 16px;
}
main section + section {
margin-top: 60px;
}
footer
<footer>
<small>(c) dotInstall.com</small>
</footer>
</body>
</html>
footer {
padding: 60px 0;
text-align: center;
color: #aaa;
}