CRI BOOT CAMP
作成日：2021/04/12 更新日：2022/01/27
#17 完成したレイアウトを拡張する
先程作ったサイトを拡張してみたいと思います。
- headerにナビゲーションを追加する
- コンテンツ内容を増やす
- footerにリンク集を追加
サンプルサイト02
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header_contents">
<div class="logo">
<img src="images/cbc_icon.svg">
CRI BOOT CAMP
</div>
<!-- ナビゲーション追加 -->
<div class="navi">
<ul>
<li><a href="page1.html">ホーム</a></li>
<li><a href="page2.html">レッスン</a></li>
<li><a href="page3.html">入門</a></li>
<li><a href="page4.html">基礎</a></li>
<li><a href="page5.html">応用</a></li>
<li><a href="page6.html">実践</a></li>
</ul>
</div>
<!-- /ナビゲーション追加 -->
</div>
</div>
<div class="contents">
<div class="visual">
<h1 class="copy">
楽しく習得。<br>
もっと学習。
</h1>
</div>
<div class="text_wrapper">
<div class="text">
html+cssを習得するには、実際に作りながら覚えるのが一番！
英語でも文法を学ぶより、話すことが上達への近道なように。
</div>
<div class="menu">
<ul>
<li><a href="page1.html">ホームページの作り方</a></li>
<li><a href="page2.html">htmlとcssをつかう</a></li>
<li><a href="page3.html">htmlで枠を作る</a></li>
<li><a href="page4.html">htmlの枠の使い方</a></li>
<li><a href="page5.html">cssでデザインする</a></li>
</ul>
</div>
</div>
</div>
<!-- コンテンツ追加 -->
<div class="lesson">
<div class="lesson_item">
<img src="images/01.jpg">
<h2>HTML & CSS</h2>
<p>This is the last step, after finalizing and approving we LAUNCH! Your favorite part of the project! It’s time to launch in order to see how everything works in making the world’s reality.</p>
</div>
<div class="lesson_item">
<img src="images/02.jpg">
<h2>JavaScript</h2>
<p>Time to make all of your project dreams reality! After agreeing on the strategy, look, and vibe, and needs for the project – we start our engines. We build, we tweak, we build some more. </p>
</div>
<div class="lesson_item">
<img src="images/03.jpg">
<h2>PHP</h2>
<p>Now it’s time to chat over the muses and plans! Coming together on what we found for inspiration, we map-out the path we think would be best for your brand.</p>
</div>
</div>
<div class="catchcopy">
<div class="readcopy">Work</div>
<div class="bodycopy">
From start-ups to thriving businesses, our clients are our backbone – our personal inspiration to get out of bed every morning. Branding is a company’s conduit to achieve their mission and vision. Branding is our forte. Our work enables our clients to create the solid brand and experience they need for their success.
</div>
</div>
<!-- /コンテンツ追加 -->
<!-- リンク集追加 -->
<div class="footer">
<div class="footer_contents">
<div class="footer_company">
<h3>会社案内</h3>
<ul>
<li><a href="#">経営理念</a></li>
<li><a href="#">企業理念</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">事業紹介</a></li>
</ul>
</div>
<div class="footer_menu">
<h3>トレーニング</h3>
<ul>
<li><a href="#">HTML & CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<div class="footer_menu">
<h3>トレーニング</h3>
<ul>
<li><a href="#">SCSS</a></li>
<li><a href="#">Git</a></li>
<li><a href="#">API</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</div>
</div>
<div class="copyright">©cri</div>
</div>
<!-- /リンク集追加 -->
</body>
</html>
/* ブラウザ特有の余白などをリセットしたりする箇所 */
body{
margin:0; /*ブラウザの初期設定の余白を削除*/
}
ul{
list-style: none; /*リストタグの最初の中黒を削除*/
}
a{
color:#666;
text-decoration: none;
}
a:hover{ /*疑似クラス(セレクタ) 後日説明*/
color:#00F;
}
.header{
height:150px;
margin-bottom:20px;
background-color:#d9e021;
display: flex;
align-items: center;
}
.header_contents{
margin:0 auto;
width:980px;
display: flex;
}
.logo{
width:200px;
color:#52b6ac;
font-size:12px;
display: flex;
align-items: center;
}
.logo img{
width:50px;
margin-right:10px;
}
/*ナビゲーション*/
.navi{
margin-left:auto;
}
.navi ul{
display: flex;
}
.navi li{
margin-left:40px;
}
.contents{
margin:0 auto;
width:980px;
}
.visual{
height:400px;
background: url("../images/top_bg.jpg") no-repeat center center;
display: flex;
align-items: center;
}
.copy{
color:#FFF;
margin-left:100px;
font:normal 32px/2em sans-serif;
}
.text_wrapper{
margin:0 auto;
height:200px;
display:flex;
justify-content: center;
}
.text{
width:280px;
height:160px;
margin-top:20px;
padding-right:15px;
border-right:8px solid #000;
font:normal 18px/2em sans-serif;
display:flex;
align-items: center;
}
.menu{
width:300px;
font:normal 18px/1.6em sans-serif;
display:flex;
align-items: center;
}
/* 追加コンテンツ */
.lesson{
display:flex;
}
.lesson_item{
width:33%;
height:500px;
margin-top:100px;
padding:0 15px;
text-align:center;
}
.lesson_item img{
width:300px;
}
.catchcopy{
width:980px;
margin:80px auto 100px;
display:flex;
}
.readcopy{
color:#9941D8;
font: bold 36px/1 sans-serif;
text-align:right;
flex:1; /* flexボックスプロパティ 後日説明 幅は1:3の割合で配置*/
}
.bodycopy{
padding-left:20px;
font: normal 1em/1.4 serif;
flex:3; /* 幅は1:3の割合で配置 */
}
.footer{
height:280px;
margin-top:30px;
background-color:#bec9c9;
}
.footer_contents{
width:980px;
margin:0 auto;
display:flex;
justify-content: space-around;
}
/*リンク集*/
.footer_contents ul{
padding:0;
line-height:2;
}
.copyright{
text-align:center;
margin-top:30px;
}
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ