<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>段組風レイアウト</title>
<style>
figure.base{
border:1px solid black;
width:25em;height:20em;
}
.base figcaption::before{
content:"■";
}
.base figcaption::after{
content:"■";
}
figure header,figure footer{
background:lightsteelblue;
}
figure article{
width:15em;
height:10em;
background:lavender;
}
figure aside{
width:5em;
}
figure aside.a{
background:royalblue;
color:white;
}
figure aside.b{
background:seagreen;
color:white;
}
</style>
</head>
<body>
<h1>段組風レイアウト</h1>
<article>
<h2>基本問題</h2>
<div style="display:flex;flex-wrap:wrap;">
<figure class="base">
<figcaption>初期</figcaption>
<header>
大見出し
</header>
<main>
<article style="">コンテンツ</article>
<aside class="b" style="">補足情報B</aside>
<aside class="a" style="">補足情報A</aside>
</main>
<footer>
著者情報
</footer>
</figure>
<figure class="base">
<figcaption>疑似テーブル</figcaption>
<header>
大見出し
</header>
<main>
<article style="">コンテンツ</article>
<aside class="b" style="">補足情報B</aside>
<aside class="a" style="">補足情報A</aside>
</main>
<footer>
著者情報
</footer>
</figure>
<figure class="base">
<figcaption>float</figcaption>
<header>
大見出し
</header>
<main>
<article style="">コンテンツ</article>
<aside class="b" style="">補足情報B</aside>
<aside class="a" style="">補足情報A</aside>
</main>
<footer style="clear:left">
著者情報
</footer>
</figure>
<figure class="base">
<figcaption>position</figcaption>
<header>
大見出し
</header>
<main style="">
<article style="left:5em;">コンテンツ</article>
<aside class="b" style="left:20em;">補足情報B</aside>
<aside class="a" style="">補足情報A</aside>
</main>
<footer style="top:10em;">
著者情報
</footer>
</figure>
<figure class="base">
<figcaption>flexbox</figcaption>
<header>
大見出し
</header>
<main style="">
<article style="">コンテンツ</article>
<aside class="b" style="">補足情報B</aside>
<aside class="a" style="">補足情報A</aside>
</main>
<footer style="">
著者情報
</footer>
</figure>
</div>
</article>
</body>
</html>