コーディングの練習をしてみましょう。ヘッダーとナビの部分を作ってみる練習課題です。
下記の図のようにHTMLとCSSでレイアウトを組んでみよう。
条件
- 新規フォルダ「layout_2」に、index.html、style.css を作成
- 下図の通りにHTMLとCSSでレイアウトしてください
- 細かな数値にはこだわらず自由に記述してください、ただし「Corporate」と「お問い合わせ」の径は1000pxとします
構 図

コーディングする時に…
このレイアウトにどれくらいの時間がかかるか計測してください。
ポートフォリオなどにその制作したものと時間を掲載していると、技量がわかりやすいのでオススメです。
コード例
<header>
<div class="inner">
<p class="logo"><a href="index.html">Coporate</a></p>
<p class="header_btn">
<a href="">お問い合わせ</a>
</p>
</div>
</header>
<nav class="gnav">
<ul>
<li><a href="">ホーム</a></li>
<li><a href="">サービス内容</a></li>
<li><a href="">料金</a></li>
<li><a href="">会社概要</a></li>
<li><a href="">採用情報</a></li>
</ul>
</nav>
.inner {
width: 1000px;
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 30px 0;
}
.logo a {
color: #1e3ba3;
text-decoration: none;
font-size: 32px;
font-weight: bold;
}
.header_btn a {
border: 1px solid #1e3ba3;
border-radius: 6px;
color: #1e3ba3;
text-decoration: none;
padding: 10px 30px;
}
.gnav{
background-color: #1e3ba3;
}
.gnav ul{
display: flex;
justify-content: center;
}
.gnav a{
color: #fff;
padding: 20px 40px;
display: block;
text-decoration: none;
}

助手
けっこう思ったより時間がかかりました!コーディングって一個がうまく行ったと思っても後から見直すと余分なCSSを書いてしまっていたりします!

スキルアップ先生
そうね〜、難しいですがたくさんのコードを書いてください。どんどん慣れてどんどんスマートな書き方が身についてきたらとっても楽しくなりますよ!
引き続きがんばってください★