あなたたちが助けてくれるかどうか疑問に思いました。座ってゼロからウェブサイトを作成してから数年が経ちましたが、何か簡単なことをしたいと思っています。過去にブレークポイントを使用したことは承知していますが、これを行う別の方法として Flexbox があるようです (?)。私はまだそれを理解しておらず、自分のコードに適用するのが少し難しいと感じています。
私のレイアウトでは、2 つの行が積み重ねられています。ヘッダーとナビゲーション リンク用で、その下にメイン コンテンツ用の 2 つの列があり、最後にこれらの下の行がフッター用です。
私の（進行中の）html ページの body タグと以下の CSS の間のすべてを含めています。現在、すべてがピクセル単位です。私が行っている正しいことと間違っていること (たとえば、使用しているコンテナーが多すぎないかなど) と、これに Flexbox を適用する方法について何かアドバイスをいただければ幸いです。
ありがとう！
body {
background-color: #C4C4C4;
font-family: 'Roboto', serif;
/*font-size: 48px;*/
line-height: 25px;
}
#page-container {
margin: 0 auto;
width: 793px;
}
header {
background: url("../images/big-banner.jpg");
background-size: 793px 285px;
background-repeat: no-repeat;
height: 285px;
/*height: 285px;*/
}
header h1 {
padding: 70px 0 0 20px;
color: #FFFFFF;
font-size: 2.8em;
}
header p {
padding: 25px 0 0 20px;
color: #FFFFFF;
font-size: 1.4em;
}
h2 {
font-size: 1.4em;
font-weight: bold;
padding-bottom: 20px;
}
h3 {
font-size: 1em;
font-weight: bold;
padding-bottom: 20px;
}
p {
line-height: 1.7;
padding-bottom: 30px;
}
ul {
padding-left: 20px;
}
li {
list-style-type: disc;
line-height: 2em;
padding-left: 5px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #605A52;
}
nav li {
float: left;
list-style-type: none;
padding: 0;
}
nav li a {
display: block;
color: #FFFFFF;
text-align: center;
font-size: 1em;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
nav li a:hover {
color: #000000;
background-color: #FFFFFF;
}
strong {
font-weight: bold;
}
small {
font-size: 0.9em;
}
section {
}
article {
}
.contact-box {
height: 200px;
width: 200px;
background-color: #FFFFFF;
padding: 15px;
-webkit-box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
-moz-box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73);
}
summary {
}
.content-container {
width: 793px;
width: 100%;
height: 100%;
display: flex;
}
/* left col */
.left-col {
padding: 40px 20px 60px 60px;
width: 450px;
float: left;
}
/* wull-width left col for contact page */
.full {
width: 100%;
padding-right: 40px;
}
/* right col */
.right-col {
background-color:#FFFFFF;
width: 243px;
float: left;
align-items: stretch;
height: 100%;
padding: 40px 20px 10px 20px;
margin: 10px 0 0 0;
}
.zebra-1, .zebra-2 {
text-align: justify;
margin: 10px 0 10px 0;
}
.zebra-1 {
background-color: #EDEDED;
}
.zebra-2 {
background-color: #FFFFFF;
}
.list-left, .list-right {
text-align: left;
float: left;
width: 43%;
padding-right: 5px;
}
footer {
clear:both;
background-color: #605A52;
padding-left: 10px;
color:#FFFFFF;
}
footer p {
padding: 10px;
}
<div id="page-container">
<header>
<h1>Main title here</h1>
<p>Sub title</p>
</header>
<nav role="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</nav>
<div class="content-container zebra-1">
<section class="left-col" role="main">
<h2>Welcome</h2>
<p>Lorem ipsum
</p>
<p>Lorem ipsum
</p>
</section>
<div class="right-col zebra-1" role="complementary">
<aside><div class="contact-box">Contact info here</div></aside>
</div>
</div>
<div class="content-container zebra-2">
<section class="left-col" role="main">
<h2>Another header</h2>
<p>Lorem ipsum
</p>
</section>
<div class="right-col zebra-2" role="complementary">
<p>More stuff here</p>
</div>
</div>
<footer>
<p>
<small>Copyright info</small>
</p>
</footer>
</div>