【ソースコード】番外編：行数が異なる画像の横並びの練習
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキスト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
<h2 class="title">PROJECT</h2>
<div class="flex">
<div class="left">
<img src="img/project1.jpg" alt="">
</div>
<ul class="right">
<li><img src="img/project2.jpg" alt=""></li>
<li><img src="img/project3.jpg" alt=""></li>
<li><img src="img/project4.jpg" alt=""></li>
<li><img src="img/project5.jpg" alt=""></li>
<li><img src="img/project6.jpg" alt=""></li>
<li><img src="img/project7.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
</html>