【ソースコード】中級編：ブログサイト／2カラム
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Blog</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキス">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
<h1 class="site-title wrapper">
<a href="#"><img src="img/logo.svg" alt="Travel Blog"></a>
</h1>
<nav id="navi">
<ul class="wrapper">
<li><a href="#">NEW</a></li>
<li><a href="#">COLUMN</a></li>
<li><a href="#">SERIES</a></li>
<li><a href="#">Q&A</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<div id="pickup" class="wrapper">
<article>
<img src="img/pickup1.jpg" alt="テキストテキストテキスト">
<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
<article>
<img src="img/pickup2.jpg" alt="テキストテキストテキスト">
<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
<article>
<img src="img/pickup3.jpg" alt="テキストテキストテキスト">
<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
</div>
<div id="container" class="wrapper">
<main>
<article>
<h2 class="article-title"><a href="#">タイトルテキストテキストテキストテキストテキスト</a></h2>
<ul class="meta">
<li><a href="#">2020/01/01</a></li>
<li><a href="#">カテゴリ1</a></li>
</ul>
<a href="#"><img src="img/main1.jpg" alt="テキストテキストテキスト"></a>
<p class="text">
本文テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
<article>
<h2 class="article-title"><a href="#">タイトルテキストテキストテキストテキストテキスト</a></h2>
<ul class="meta">
<li><a href="#">2020/01/01</a></li>
<li><a href="#">カテゴリ1</a></li>
</ul>
<a href="#"><img src="img/main2.jpg" alt="テキストテキストテキスト"></a>
<p class="text">
本文テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
<article>
<h2 class="article-title"><a href="#">タイトルテキストテキストテキストテキストテキスト</a></h2>
<ul class="meta">
<li><a href="#">2020/01/01</a></li>
<li><a href="#">カテゴリ1</a></li>
</ul>
<a href="#"><img src="img/main3.jpg" alt="テキストテキストテキスト"></a>
<p class="text">
本文テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<div class="readmore"><a href="#">READ MORE</a></div>
</article>
</main>
<aside id="sidebar">
<section class="author">
<img src="img/author.jpg" alt="テキストテキストテキスト">
<h3 class="side-title">Name Name</h3>
<p class="profile">
プロフィールテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</section>
<section class="ranking">
<h3 class="side-title">Ranking</h3>
<article>
<a href="#">
<img src="img/ranking1.jpg" alt="テキストテキストテキスト">
<h4 class="article-title">タイトルテキストテキストテキストテキストテキストテキスト</h4>
</a>
</article>
<article>
<a href="#">
<img src="img/ranking2.jpg" alt="テキストテキストテキスト">
<h4 class="article-title">タイトルテキストテキストテキストテキストテキストテキスト</h4>
</a>
</article>
<article>
<a href="#">
<img src="img/ranking3.jpg" alt="テキストテキストテキスト">
<h4 class="article-title">タイトルテキストテキストテキストテキストテキストテキスト</h4>
</a>
</article>
</section>
<section class="archive">
<h3 class="side-title">Archive</h3>
<ul>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
<li><a href="#">XXXX年XX月</a>(XX)</li>
</ul>
</section>
</aside>
</div>
<footer id="footer">
<div class="content wrapper">
<section class="item">
<h3 class="footer-title">About</h3>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<ul class="about-list">
<li><a href="#" class="arrow">プロフィール詳細</a></li>
<li><a href="#" class="arrow">お仕事の依頼</a></li>
<li><a href="#" class="arrow">お問い合わせ</a></li>
</ul>
</section>
<section class="item">
<h3 class="footer-title">Menu</h3>
<ul class="menu-list">
<li><a href="#">NEW</a></li>
<li><a href="#">CATEGORY</a></li>
<li><a href="#">COLUMN</a></li>
<li><a href="#">SERIES</a></li>
<li><a href="#">Q&A</a></li>
</ul>
</section>
<section class="item">
<h3 class="footer-title">Twitter</h3>
<a class="twitter-timeline" data-height="315" href="https://twitter.com/X?ref_src=twsrc%5Etfw">Tweets by X</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</section>
</div>
<p class="copyright">© Travel & Blog</p>
</footer>
</body>
</html>