20-2 働くぐんまちゃんを 1カラムに変更する

２カラムのレスポンシブデザインページを1カラムのページに変更します。

01　メイン、サイドのタグを消し、section のCSSを変更する

<main></main><aside></aside>を削除、CSSの記述も消す。
CSSの section を書き換える

HTML

<main></main>←Delete

<aside></aside>←Delete

CSSの記述も消して大丈夫です。

CSS

section {
padding:50px;
}

02　ページ下部にあるリストをヘッダーの下へ移す

ページ下部の<ul>～</ul>を</header>下に移す
<h3>どもだち</3>は削除する

HTML

</header>

<ul class="btn">
<li><a href="#g1">ぐんまちゃん</a></li>
<li><a href="#g2">みーみ</a></li>
<li><a href="#g3">あおま</a></li>
</ul>

<section>

03　ナビゲーションタグを入れる<nav>～</nav>

ナビゲーションタグで<ul>を囲み、CSSで背景カラーの設定をする

HTML

<nav>
<ul class="btn">
<li><a href="#g1">ぐんまちゃん</a></li>
<li><a href="#g2">みーみ</a></li>
<li><a href="#g3">あおま</a></li>
</ul>
</nav>

CSS

nav {
background: #ff6347;
}

04　CSSでナビゲーションのボタンを横並びにする

.btnを横並びにするために display: flex; を追加
.btn li aの margin-bottom: 15px; を margin: 10px; に変更する

CSS

.btn {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
.btn li a {
display: block;
background: #ff6347;
padding: 10px 8px;
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 10px;
margin: 10px;
}
.btn li a:hover {
background: #b22222;
color: #fff;
}

ナビゲーションボタンの並びを変更する場合
justify-content で指定
（CSS-例）
.btn {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
justify-content: center;
}

センター寄せ　justify-content: center;
右寄せ　justify-content:flex-end;
均等配置1　justify-content:space-around;
均等配置2　justify-content:space-between;

05　上にある大きな画像をセンター揃えにして完成

<p class="naka"><img src="img/hiroba.jpg" alt="県庁広場"></p>