ポイント
１.フレキシブルボックスを使用。
２.リスト（メニュー、トピックス、アーカイブ）を追加
３.フッターにコピーライトを追加
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset ="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
headerブロック
</header>
<div class="contents">
<div class="conteiner">
<aside class="menu">
<h1>メニュー</h1>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
<ul>
</aside>
<article>
articleブロック
</article>
<div class="rightside">
<aside class="topix">
<h1>トピックス</h1>
<ul>
<li><a href="#">トピックス1</a></li>
<li><a href="#">トピックス2</a></li>
<li><a href="#">トピックス3</a></li>
<li><a href="#">トピックス4</a></li>
<li><a href="#">トピックス5</a></li>
<ul>
</aside>
<aside class="month">
<h1>アーカイブ</h1>
<ul>
<li><a href="#">2019年1月</a></li>
<li><a href="#">2019年2月</a></li>
<li><a href="#">2019年3月</a></li>
<li><a href="#">2019年4月</a></li>
<li><a href="#">2019年5月</a></li>
<ul>
</aside>
</div>
</div>
</div>
<footer>
<small>Copyright © 2019 サンプルサイト</small>
</footer>
</body>
</html>CSS
body,
.contents .conteiner {background-color: #dcdcdc;
box-sizing: border-box;
}
header,
aside.menu,
article,
aside.topix,
aside.topix,
aside.month,
footer {background-color: #ffffff;}
.conteiner {
margin-left: auto;
margin-right: auto;
}
.contents .conteiner {display: flex;
justify-content: space-around;
}
/* ヘッダーの設定 */
header {border: solid 1px #000000;
margin-bottom: 5px;
}
/* menuの設定 */
aside.menu {flex: none;
width: 15%;
border: solid 1px #000000;
}
/* articleの設定 */
article {flex: none;
width: 68%;
border: solid 1px #000000;
}
/* topixの設定 */
aside.topix {border: solid 1px #000000;
margin-bottom: 5px;
}
/* monthの設定 */
aside.month {border: solid 1px #000000;}
/* 右サイドの設定 */
.rightside {flex: none;
width: 15%;
}
/* フッターの設定 */
footer {border: solid 1px #000000;
margin-top: 5px;
}
/* menu、topix、monthの見出しの設定 */
.menu h1, .topix h1, .month h1 {margin-top: 0;
margin-bottom: 0;
font-size: 18px;
color: #ffffff;
background-color: #f91800;
padding: 14px 10px;
}
/* menu、topix、monthのリストの設定 */
ul {padding: 0;
margin-top: 0;
}
ul li {list-style-type: none!important; /* リストのマークを非表示にする */
margin: 0px 5px;
}
ul li a {display: block;
padding: 15px;
font-size: 14px;
color: #000000;
text-decoration: none;
}
ul li a:hover {background-color: #FFF0F5}