CRI BOOT CAMP
作成日：2021/04/12 更新日：2022/08/29
#7 レスポンシブコーディングでサイト制作①
サイトのトップページのコーディングにチャレンジ
仮にCBCのサイトを作ってみました。そのトップページをコーディングしてみましょう。XDでレイアウトしたサイトデータから枠で囲ってセクションやクラス名を決めていきます。 慣れてくれば書かなくても頭の中で枠名が作れるようになります。
まずはPC用レイアウトのアウトラインを作ります。
紙に鉛筆書きで枠線を作り、答えを見ないでhtmlで文章構造を作り、cssでレイアウトしてみてください。
完成形のデザインです
枠のおおよそのエリアを適当に書き出す
下にある参考画像のようにクラス名をつけてみましょう。枠とレイアウト用のcssをなんとなく頭のなかで描きます。
↓
下にある参考画像のようにクラス名をつけてみましょう。枠とレイアウト用のcssをなんとなく頭のなかで描きます。
↓
まずはhtmlの文章構造を作る（単純な枠だけ）
まずはhtml構文を作りたいので、CSSには枠線のborderプロパティのみ適応させておき、まずは大枠を組みます。大枠で使うタグはセクションタグを使います。※divは使わない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Responsive Site Sample</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>
@charset "utf-8";
body{
font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
color: #7BC2BA;
}
a{
text-decoration: none;
}
/* ===========================
よく使われる枠（後で削除）
=========================== */
/*大枠*/
header,footer,nav,main{
margin:2px;
border: 2px solid #F00;
}
/*小枠*/
div,ul{
margin:2px;
border: 2px solid #00F;
}
li,form,img,h1,h2{
margin:2px;
border: 1px solid #0f0;
}
/* ===========================
header
=========================== */
header{
}
/* ===========================
nav
=========================== */
nav{
}
/* ===========================
footer
=========================== */
footer{
}
/* ===========================
コンテンツ
=========================== */
main{
}
大枠の中の要素のタグはひとまずdivで組んでいきましょう。
cssにはhtmlで使ったクラス名だけ入れておきましょう。
reset.cssをダウンロードして、cssフォルダに入れます。ブラウザの画面に出てきたものを⌘+Sで保存しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Responsive Site Sample</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header__contents">
<div class="header__contents--text">
テキスト
</div>
<div class="header__contents--logo">
<p><img src=""></p>
<p><img src=""></p>
</div>
<div class="header__contents--text">
テキスト
</div>
</div>
<div class="header__image">
<img src="">
</div>
</header>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">beginner</a></li>
<li><a href="">basic</a></li>
<li><a href="">advanced</a></li>
<li><a href="">design</a></li>
<li><a href="">performance</a></li>
<li><a href="">kids</a></li>
</ul>
</nav>
<main>
<section class="menu">
<div class="menu__content">
<div class="menu__content--text">
<img src="">
<h1>タイトル</h1>
<p>テキスト</p>
<div class="btn">MENU</div>
</div>
<div class="menu__content--image">背景画像が入る</div>
</div>
<div class="menu__content">
<div class="menu__content--image">背景画像が入る</div>
<div class="menu__content--text">
<img src="">
<h1>Title</h1>
<p>テキスト</p>
<div class="btn">MENU</div>
</div>
</div>
</section>
<section class="vision">
<div class="vision__image">
<h1>タイトル</h1>
<p><img src=""></p>
</div>
<div class="vision__column">
<div class="vision__column--item">
<p class="vision__column--item-img"><img src=""></p>
<p>
ここはコンテンツの説明を入力していきます。
</p>
</div>
<div class="vision__column--item">
<p class="vision__column--item-img"><img src=""></p>
<p>
ここはコンテンツの説明を入力していきます。
</p>
</div>
<div class="vision__column--item">
<p class="vision__column--item-img"><img src=""></p>
<p>
ここはコンテンツの説明を入力していきます。
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer">
<div class="footer__image"></div>
<h2>タイトル</h2>
<div class="footer__column">
<div class="footer__column--form">
フォーム説明文
<form action="send.php" method="POST">
お名前<br>
<input type="text" name="inputName">
メールアドレス<br>
<input type="text" name="inputMail">
問い合わせ内容<br>
<textarea name="toiawase"></textarea>
<input type="submit" value="送信">
</form>
</div>
<div class="footer__column--map">
Googlemapが入ります。
<div>
住所情報が入ります
</div>
</div>
</div>
</div>
<div class="footer__copy">© 2019 Created by CBC</div>
</footer>
</body>
</html>
@charset "utf-8";
body{
font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
color: #7BC2BA;
}
a{
text-decoration: none;
}
/* ===========================
よく使われる枠（後で削除）
=========================== */
/*大枠*/
header,footer,nav,main{
margin:2px;
border: 2px solid #F00;
}
/*小枠*/
div,ul{
margin:2px;
border: 2px solid #00F;
}
li,form,img,h1,h2{
margin:2px;
border: 1px solid #0f0;
}
/* ===========================
header
=========================== */
header{
}
.header__contents{
}
.header__contents--text{
}
.header__contents--logo{
}
.header__image{
}
/* ===========================
nav
=========================== */
nav{
}
nav ul{
}
nav ul li{
}
nav ul li a{
}
/* ===========================
footer
=========================== */
footer{
}
.footer{
}
.footer h2{
}
.footer__image{
}
.footer__column{
}
.footer__column--form{
}
.footer__column--form form{
}
.footer__column--form form p{
}
.footer__column--form form input[type="text"]{
}
.footer__column--form form textarea{
}
.footer__column--map{
}
.footer__copy{
}
/* ===========================
コンテンツ
=========================== */
main{
}
.menu{
}
.menu__content{
}
.menu__content--text{
}
.menu__content--text h1{
}
.menu__content--text p{
}
.menu__content--image{
}
/* ※ 今回 .btn は後ほどまとめて記述します */
.vision{
}
.vision__image{
}
.vision__image h1{
}
.vision__image p{
}
.vision__column{
}
.vision__column--item{
}
.vision__column--item-img{
}
枠だけのレイアウトを作る（枠線コーディング）
枠線だけのレイアウトに幅や高さやflexを使い、枠としてのレイアウトをやってみましょう。また、テキストをコピーして入れてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Responsive Site Sample</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header__contents">
<div class="header__contents--text text-right">
This curriculum creates <br>professional engineers.
</div>
<div class="header__contents--logo">
<p><img src="" alt="CBC logo"></p>
<p><img src="" alt="CRI BOOT CAMP"></p>
</div>
<div class="header__contents--text">
プロフェッショナルになるための<br>“挫折しない”トレーニングメソッド
</div>
</div>
<div class="header__image">
<img src="">
</div>
</header>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">beginner</a></li>
<li><a href="">basic</a></li>
<li><a href="">advanced</a></li>
<li><a href="">design</a></li>
<li><a href="">performance</a></li>
<li><a href="">kids</a></li>
</ul>
</nav>
<main>
<section class="menu">
<div class="menu__content">
<div class="menu__content--text">
<img src="" alt="coding">
<h1>Title</h1>
<p>ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。</p>
<div class="btn"><a href="">MENU</a></div>
</div>
<div class="menu__content--image"></div>
</div>
<div class="menu__content">
<div class="menu__content--image"></div>
<div class="menu__content--text">
<img src="" alt="design">
<h1>Title</h1>
<p>ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。</p>
<div class="btn"><a href="">MENU</a></div>
</div>
</div>
</section>
<section class="vision">
<div class="vision__image">
<h1>ブラウザやテキストエディタ等ツールのインストールや、<br>html・CSSとはなにかを学び、<br>簡単なサイトを作りながらコーダーを目指します。</h1>
<p><img src="" alt="Be Professional"></p>
</div>
<div class="vision__column">
<div class="vision__column--item">
<p class="vision__column--item-img"><img src="" alt="coding image"></p>
<p>
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
</p>
</div>
<div class="vision__column--item">
<p class="vision__column--item-img"><img src="" alt="design image"></p>
<p>
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
</p>
</div>
<div class="vision__column--item">
<p class="vision__column--item-img"><img src="" alt="analytics image"></p>
<p>
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer">
<div class="footer__image"></div>
<h2>Location & Contact</h2>
<div class="footer__column">
<div class="footer__column--form">
<form action="send.php" method="POST">
<p>ご予約やお問い合わせはこちらのフォームを<br>ご利用ください。個人情報保護方針について</p>
お名前<br>
<input type="text" name="inputName">
メールアドレス<br>
<input type="text" name="inputMail">
問い合わせ内容<br>
<textarea name="toiawase"></textarea>
<input type="submit" value="送信">
</form>
</div>
<div class="footer__column--map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d810.4161765212042!2d139.66673032925627!3d35.660631688388975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f4ab6ef28945%3A0xed98990ae6e1597b!2z5qCq5byP5Lya56S-44Kv44Oq44Ko44Kk44OG44Kj44OW44Oq44K944O844K544Kk44Oz44K544OG44Kj44OB44Ol44O844OI!5e0!3m2!1sja!2sjp!4v1571382479874!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
<div>
〒000-0000 東京都世田谷区 0-0-0<br>
TEL. 03-0000-0000<br>
OPENING HOURS: 12:00 PM – 20:00 PM
</div>
</div>
</div>
</div>
<div class="footer__copy">© 2022 Created by CBC</div>
</footer>
</body>
</html>
@charset "utf-8";
body{
font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
color: #7BC2BA;
}
a{
text-decoration: none;
}
/* ===========================
よく使われる枠（後で削除）
=========================== */
/*大枠*/
header,footer,nav,main{
margin:2px;
border: 2px solid #F00;
}
/*小枠*/
div,ul{
margin:2px;
border: 2px solid #00F;
}
li,form,img,h1,h2{
margin:2px;
border: 1px solid #0f0;
}
/* ===========================
header
=========================== */
header{
border-top:20px solid #7BC2BA;
}
.header__contents{
width:1200px;
margin:43px auto 88px;
display:flex;
justify-content:center;
}
.header__contents--text{
align-self:flex-end;
margin:0 30px;
}
.text-right{ /* ←追加 */
text-align:right;
}
.header__contents--logo{
text-align:center;
}
.header__image{
height:600px;
}
/* ===========================
nav
=========================== */
nav{
background-color:#7BC2BA;
}
nav ul{
width:1200px;
margin:0 auto;
display:flex;
justify-content: space-around;
}
nav ul li{
width:120px;
height:50px;
}
nav ul li a{
display:flex;
justify-content: center;
align-items: center;
height:100%;
color:#fff;
}
/* ===========================
footer
=========================== */
footer{
text-align:center;
}
.footer{
color:#fff;
background-color:#7BC2BA;
}
.footer h2{
font-size:50px;
margin:30px auto 80px;
}
.footer__image{
width:100%;
height:600px;
}
.footer__column{
width:1200px;
display:flex;
margin:40px auto 100px;
}
.footer__column--form{
flex:1;
width:60%;
}
.footer__column--form form{
width:60%;
margin:10px auto 0;
display:flex;
flex-direction:column;
text-align:left;
}
.footer__column--form form p{
margin-bottom:15px;
}
.footer__column--form form input[type="text"]{
margin: 0 0 20px 0;
padding:5px 10px;
font-size:1.2em;
border-radius:5px;
border:none;
}
.footer__column--form form textarea{
height:8em;
font-size:1.3em;
border-radius:5px;
margin: 0 0 20px 0;
border:none;
}
.footer__column--map{
flex:1;
text-align:left;
}
.footer__copy{
font-size:0.8em;
padding:20px 0;
color:#aaa;
}
/* ===========================
コンテンツ
=========================== */
main{
}
.menu{
width:1200px;
margin:0 auto;
}
.menu__content{
display:flex;
text-align:center;
}
.menu__content--text{
flex:1;
}
.menu__content--text h1{
margin:20px 0 50px;
font-size:1.3em;
}
.menu__content--text p{
width:65%;
margin:0 auto 20px;
}
.menu__content--image{
flex:1;
}
.vision{
}
.vision__image{
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
border-top: 60px solid #7BC2BA;
height:600px;
}
.vision__image h1{
font:bold 32px/2.3em sans-serif;
text-align:center;
}
.vision__image p{
margin-top:75px;
}
.vision__column{
width:1200px;
margin:80px auto 150px;
display:flex;
justify-content: space-between;
}
.vision__column--item{
width:30%;
text-align:center;
}
.vision__column--item-img{
}
/* ↓追加 */
/* ===========================
共有
=========================== */
.btn a,
input[type="submit"]{ /* inputタグの属性タグtypeが"submit"である場合 */
display:inline-block;
margin:0 auto;
padding:10px 0;
width:130px;
cursor:pointer; /* マウスオーバーしたときのアイコン */
font-size:1.3em;
color:#58847F;
text-align:center;
border: 10px solid #58847F;
background-color:transparent;
}
枠に画像を入れ込む（PCコーディング完成）
枠の中に、画像やテキストデータを入れていき、PC版をコーディングしてみましょう。htmlに追記するのは画像のパスや、調整用のクラス名などです。
次に画像をダウンロードします
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Responsive Site Sample</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header__contents">
<div class="header__contents--text text-right">
This curriculum creates <br>professional engineers.
</div>
<div class="header__contents--logo">
<p class="header__contents--logo-mark"><img src="./images/logo.png" alt="CBC logo"></p>
<p><img src="./images/logo-bagde.png" alt="CRI BOOT CAMP"></p>
</div>
<div class="header__contents--text">
プロフェッショナルになるための<br>“挫折しない”トレーニングメソッド
</div>
</div>
<div class="header__image">
<img src="./images/badge.png">
</div>
</header>
<nav>
<ul>
<li><a href="">home</a></li>
<li><a href="">beginner</a></li>
<li><a href="">basic</a></li>
<li><a href="">advanced</a></li>
<li><a href="">design</a></li>
<li><a href="">performance</a></li>
<li><a href="">kids</a></li>
</ul>
</nav>
<main>
<section class="menu">
<div class="menu__content">
<div class="menu__content--text">
<img src="./images/title_coding.png" alt="coding">
<h1>Title</h1>
<p>ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。</p>
<div class="btn"><a href="">MENU</a></div>
</div>
<div class="menu__content--image img-coding"></div>
</div>
<div class="menu__content">
<div class="menu__content--image img-design"></div>
<div class="menu__content--text">
<img src="./images/title_design.png" alt="design">
<h1>Title</h1>
<p>ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。</p>
<div class="btn"><a href="">MENU</a></div>
</div>
</div>
</section>
<section class="vision">
<div class="vision__image">
<h1>ブラウザやテキストエディタ等ツールのインストールや、<br>html・CSSとはなにかを学び、<br>簡単なサイトを作りながらコーダーを目指します。</h1>
<p><img src="./images/be-pro.png" alt="Be Professional"></p>
</div>
<div class="vision__column">
<div class="vision__column--item">
<p class="vision__column--item-img"><img src="./images/contents_coding.png" alt="coding image"></p>
<p>
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
</p>
</div>
<div class="vision__column--item">
<p class="vision__column--item-img"><img src="./images/contents_design.png" alt="design image"></p>
<p>
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
</p>
</div>
<div class="vision__column--item">
<p class="vision__column--item-img"><img src="./images/contents_analytics.png" alt="analytics image"></p>
<p>
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
ここはコンテンツの説明を入力していきます。魅力的な文章を追加して、ユーザーにコンテンツの内容を理解してもらいましょう。
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer">
<div class="footer__image"></div>
<h2>Location & Contact</h2>
<div class="footer__column">
<div class="footer__column--form">
<form action="send.php" method="POST">
<p>ご予約やお問い合わせはこちらのフォームを<br>ご利用ください。個人情報保護方針について</p>
お名前<br>
<input type="text" name="inputName">
メールアドレス<br>
<input type="text" name="inputMail">
問い合わせ内容<br>
<textarea name="toiawase"></textarea>
<input type="submit" value="送信">
</form>
</div>
<div class="footer__column--map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d810.4161765212042!2d139.66673032925627!3d35.660631688388975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f4ab6ef28945%3A0xed98990ae6e1597b!2z5qCq5byP5Lya56S-44Kv44Oq44Ko44Kk44OG44Kj44OW44Oq44K944O844K544Kk44Oz44K544OG44Kj44OB44Ol44O844OI!5e0!3m2!1sja!2sjp!4v1571382479874!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
<div>
〒000-0000 東京都世田谷区 0-0-0<br>
TEL. 03-0000-0000<br>
OPENING HOURS: 12:00 PM – 11:00 PM
</div>
</div>
</div>
</div>
<div class="footer__copy">© 2019 Created by CBC</div>
</footer>
</body>
</html>
@charset "utf-8";
body {
font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
color: #7BC2BA;
}
a {
text-decoration: none;
}
/* ===========================
header
=========================== */
header {
border-top:20px solid #7BC2BA;
}
.header__contents{
width:1200px;
margin:43px auto 88px;
display:flex;
justify-content:center;
}
.header__contents--text{
align-self:flex-end;
margin:0 30px;
width:25%;
border-top:1px solid #7BC2BA;
border-bottom:1px solid #7BC2BA;
}
.text-right{
text-align:right;
}
.header__contents--logo{
text-align:center;
}
.header__contents--logo-mark{
margin-bottom:20px;
}
.header__image{
position:relative;
height:600px;
background:#7BC2BA url('../images/bg_header.jpg') no-repeat right center / cover;
}
.header__image img{
position:absolute;
top:-60px;
right:5vw;
}
/* ===========================
nav
=========================== */
nav {
background-color:#7BC2BA;
}
nav ul{
width:1200px;
margin:0 auto;
display:flex;
justify-content: space-around;
}
nav ul li{
width:120px;
height:60px;
}
nav ul li a{
display:flex;
justify-content: center;
align-items: center;
height:100%;
color:#fff;
}
/* ===========================
footer
=========================== */
footer {
text-align:center;
}
.footer {
color:#fff;
padding:60px 0 70px;
background-color:#7BC2BA;
}
.footer h2{
font-size:50px;
margin:30px auto 80px;
}
.footer__image{
width:100%;
height:600px;
background:#7BC2BA url('../images/bg_footer.jpg') no-repeat center center / cover;
}
.footer__column{
width:1200px;
display:flex;
margin:40px auto 100px;
}
.footer__column--form{
flex:1;
width:60%;
}
.footer__column--form form{
width:60%;
margin:10px auto 0;
display:flex;
flex-direction:column;
text-align:left;
}
.footer__column--form form p{
margin-bottom:15px;
}
.footer__column--form form input[type="text"]{
margin: 0 0 20px 0;
padding:5px 10px;
font-size:1.2em;
border-radius:5px;
border:none;
}
.footer__column--form form textarea{
margin: 0 0 20px 0;
padding:10px;
height:8em;
font-size:1.3em;
border-radius:5px;
border:none;
}
.footer__column--map{
flex:1;
text-align:left;
}
.footer__column--map iframe{
width:500px;
height:450px;
}
.footer__copy{
font-size:0.8em;
padding:20px 0;
color:#aaa;
}
/* ===========================
コンテンツ
=========================== */
main {
}
.menu {
width:1200px;
margin:0 auto;
}
.menu__content{
display:flex;
text-align:center;
}
.menu__content--text{
flex:1;
}
.menu__content--text img{
margin-top:80px;
text-align:center;
}
.menu__content--text h1{
margin:20px 0 50px;
font-size:1.3em;
}
.menu__content--text p{
width:65%;
margin:0 auto 20px;
}
.menu__content--image{
flex:1;
height:600px;
}
.img-coding{
background:url('../images/menu_coding.jpg') no-repeat center center / cover;
}
.img-design{
background:url('../images/menu_design.jpg') no-repeat center center / cover;
}
.vision {
position: relative;
}
.vision__image{
border-top: 60px solid #7BC2BA;
height:600px;
background:#7BC2BA url('../images/bg_contents.jpg') no-repeat center center / cover;
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
/*背景画像に黒いカバーをかける方法*/
.vision__image::before{
height:600px;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 60px;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
.vision__image h1{
font:bold 31px/2.3em sans-serif;
text-align:center;
color:#fff;
z-index:99;
}
.vision__image p{
margin-top:75px;
z-index:99;
}
.vision__column{
width:1200px;
margin:80px auto 150px;
display:flex;
justify-content: space-between;
}
.vision__column--item{
width:30%;
text-align:left;
}
.vision__column--item-img{
margin:0 0 50px;
text-align:center;
}
.vision__column--item-img img{ /* ←追加 */
height:200px;
}
/* ===========================
共有
=========================== */
.btn a,
input[type="submit"]{
display:inline-block;
margin:0 auto;
padding:10px 0;
width:130px;
cursor:pointer;
font-size:1.3em;
color:#58847F;
text-align:center;
border: 10px solid #58847F;
background-color:transparent;
}
レスポンシブ化してみる（レスポンシブコーディング完成）
PC版ができたらレスポンシブ化していきましょう。htmlに変更はありませんが、
<head>
・・・
<meta name="viewport" content="width=device-width, initial-scale=1">
・・・
</head>
CSSのポイントとしては、
1. widthをpx指定している箇所をメディアクエリ内で **px → **% と変更する。
2. ブラウザのレスポンシブモード機能でスマホ表示にして position 、 各種flex 、 font プロパティを追加・変更しながらレイアウトを微調整していきます。
続いて、 margin, padding, height などをメディアクエリで上書きしていきます。 このとき幅や高さの範囲を“vw”（vw = 表示幅からの%での割合）などにすると良いでしょう。
ブレイクポイントの設定はデザインによって変わりますが今回は、幅1,215pxと、幅768pxと2パターンのブレイクポイントを設定し、 このポイントを下回ると要素のうごきが変わるように設定しました。
ブレイクポイントに対してメディアクエリを設定した部分を写して書いていきましょう。
@media screen and (max-width:1215px){}最大1,215pxまでの場合
@media screen and (max-width:768px){}さらに最大768pxまでの場合
@charset "utf-8";
body {
font:normal 16px/1.8em Arial,Helvetica,sans-serif;;
color: #7BC2BA;
}
a {
text-decoration: none;
}
/* ===========================
header
=========================== */
header {
border-top:20px solid #7BC2BA;
}
/* widthをpx指定している部分がレスポンシブ化のポイントになります */
.header__contents{
width:1200px;
margin:43px auto 88px;
display:flex;
justify-content:center;
}
.header__contents--text{
align-self:flex-end;
margin:0 30px;
width:25%;
border-top:1px solid #7BC2BA;
border-bottom:1px solid #7BC2BA;
}
.text-right{
text-align:right;
}
.header__contents--logo{
text-align:center;
}
.header__contents--logo-mark{
margin-bottom:20px;
}
.header__image{
position:relative;
height:60vh;
background:#7BC2BA url('../images/bg_header.jpg') no-repeat right center / cover;
}
.header__image img{
position:absolute;
top:-60px;
right:5vw;
}
@media screen and (max-width:1215px){
.header__contents{
width:100%;
}
}
@media screen and (max-width:768px){
.header__contents{
display:block;
margin-top:240px;
position:relative;
}
.header__contents--text{
margin:0 auto;
width:90%;
}
.text-right{
text-align:left;
border-bottom:none;
}
.header__contents--logo{
/* position: absolute;で要素をセンターにする方法 */
position: absolute;
top:-228px;
left: 0;
right: 0;
margin: auto;
}
.header__image{
position:relative;
height:40vh;
background:#7BC2BA url('../images/bg_header.jpg') no-repeat right center / cover;
}
}
/* ===========================
nav
=========================== */
nav {
background-color:#7BC2BA;
}
nav ul{
width:1200px;
margin:0 auto;
display:flex;
justify-content: space-around;
}
nav ul li{
width:120px;
height:60px;
}
nav ul li a{
display:flex;
justify-content: center;
align-items: center;
height:100%;
color:#fff;
}
@media screen and (max-width:1215px){
nav ul{
width:100%;
}
}
@media screen and (max-width:768px){
nav ul{
flex-wrap:wrap;
}
nav ul li{
margin:6px 0;
}
nav ul li a{
border:1px solid #fff;
}
}
/* ===========================
footer
=========================== */
footer {
text-align:center;
}
.footer {
color:#fff;
padding:60px 0 70px;
background-color:#7BC2BA;
}
.footer h2{
font-size:50px;
margin:30px auto 80px;
}
.footer__image{
width:100%;
height:600px;
background:#7BC2BA url('../images/bg_footer.jpg') no-repeat center center / cover;
}
.footer__column{
width:1200px;
display:flex;
margin:40px auto 100px;
}
.footer__column--form{
flex:1;
width:60%;
}
.footer__column--form form{
width:60%;
margin:10px auto 0;
display:flex;
flex-direction:column;
text-align:left;
}
.footer__column--form form p{
font-size:0.9em;
margin-bottom:15px;
}
.footer__column--form form input[type="text"]{
margin: 0 0 20px 0;
padding:5px 10px;
font-size:1.2em;
border-radius:5px;
border:none;
}
.footer__column--form form textarea{
margin: 0 0 20px 0;
padding:10px;
height:8em;
font-size:1.3em;
border-radius:5px;
border:none;
}
.footer__column--map{
flex:1;
text-align:left;
width:500px;
height:450px;
}
.footer__column--map iframe{
width:500px;
height:450px;
}
.footer__copy{
font-size:0.8em;
padding:20px 0;
color:#aaa;
}
@media screen and (max-width:1215px){
.footer__column{
width:100%;
}
.footer__column--map{
margin:0 auto;
width:97%;
}
.footer__column--map iframe{
width:40vw;
height:450px;
}
}
@media screen and (max-width:768px){
.footer h2{
font-size:2em;
}
.footer__image{
height:40vh;
}
.footer__column{
display:block;
}
.footer__column--form{
flex:1;
width:100%;
}
.footer__column--form form{
width:80%;
}
.footer__column--map iframe{
width:90%;
margin:50px auto 0;
text-align:center;
}
}
/* ===========================
コンテンツ
=========================== */
main {
}
.menu {
width:1200px;
margin:0 auto;
}
.menu__content{
display:flex;
text-align:center;
}
.menu__content--text{
flex:1;
}
.menu__content--text img{
margin-top:80px;
text-align:center;
}
.menu__content--text h1{
margin:20px 0 50px;
font-size:1.3em;
}
.menu__content--text p{
width:65%;
margin:0 auto 20px;
}
.menu__content--image{
flex:1;
height:600px;
}
.img-coding{
background:url('../images/menu_coding.jpg') no-repeat center center / cover;
}
.img-design{
background:url('../images/menu_design.jpg') no-repeat center center / cover;
}
@media screen and (max-width:1215px){
.menu{
width:100%;
}
}
@media screen and (max-width:768px){
.menu {
margin:30px auto 0;
}
.menu__content{
display:block;
position:relative;
}
.menu__content--text{
position: absolute;
top:30px;
left: 0;
right: 0;
margin: auto;
z-index:99;
}
.menu__content--image{
position: relative;
margin-bottom:2px;
}
/*背景画像に黒いカバーをかける方法*/
.menu__content--image::before{
height:600px;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
}
.vision {
position: relative;
}
.vision__image{
border-top: 60px solid #7BC2BA;
height:600px;
background:#7BC2BA url('../images/bg_contents.jpg') no-repeat center center / cover;
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
/*背景画像に黒いカバーをかける方法*/
.vision__image::before{
height:600px;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 60px;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
.vision__image h1{
font:bold 31px/2.3em sans-serif;
text-align:center;
color:#fff;
z-index:99;
}
.vision__image p{
margin-top:75px;
z-index:99;
}
.vision__column{
width:1200px;
margin:80px auto 150px;
display:flex;
justify-content: space-between;
}
.vision__column--item{
width:30%;
text-align:left;
}
.vision__column--item-img{
margin:0 0 50px;
text-align:center;
}
.vision__column--item-img img{
height:200px;
}
@media screen and (max-width:1215px){
.vision__column{
width:97%;
}
}
@media screen and (max-width:768px){
.vision {
margin-top:50px;
}
.vision__image h1{
font:bold 1.6em/1.9em sans-serif;
}
.vision__column{
width:90%;
margin:10px auto;
display:block;
}
.vision__column--item{
width:90%;
margin-top:40px;
text-align:left;
}
.vision__column--item-img{
margin:0 0 10px;
text-align:center;
}
}
/* ===========================
共有
=========================== */
.btn a,
input[type="submit"]{
display:inline-block;
margin:0 auto;
padding:10px 0;
width:130px;
cursor:pointer;
font-size:1.3em;
color:#58847F;
text-align:center;
border: 10px solid #58847F;
background-color:transparent;
}
#8 レスポンシブコーディングでサイト制作②
レストランのトップページのコーディング
仮のレストランのトップページをコーディングしてみましょう。まずはPC用レイアウトのアウトラインを作ってみましょう。 紙に鉛筆書きで枠線を作り、答えを見ないでhtmlで文章構造を作り、cssでレイアウトしてみてください。
PC完成形
SP完成形
枠線コーディングで構造を作る
レスポンシブ①の課題と同じく、まずはHTML構造を書いて、枠線だけをつけてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CBC | レスポンシブ2</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<ul class="header__sns">
<li><a href="#">画像</a></li>
<li><a href="#">画像</a></li>
</ul>
<ul class="header__navi">
<li><a href="#">PHILOSOPHY</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</header>
<section class="logo">
<h1>画像</h1>
</section>
<section class="philosophy">
<div class="philosophy__left">
<div>
<h2 class="philosophy__left-title">PHILOSOPHY</h2>
<p class="philosophy__left-top">
たまには、贅沢を<br>
たまには、わがままを<br>
たまには、ごちそうを
</p>
<p class="philosophy__left-bottom">
その日仕入れた新鮮な食材を、お好きな調理法で、<br>
ジャンルを超えた様々な料理をおとどけいたします。<br>
美容や健康のもととなるお食事を、<br>
楽しく、おいしくお召し上がりください。
</p>
<div class="philosophy__button">
<a href="#">MORE</a>
</div>
</div>
</div>
<div class="philosophy__right">CSSで背景画像を指定</div>
</section>
<section class="news">
<h2 class="news__title">NEWS<span>今日のおすすめ食材などニュースを発信</span></h2>
<ul class="news__list">
<li>
<a href="#">
<div class="news__list-img">
画像
</div>
<div class="news__list-txt">
<dl>
<dt>夏季休業のお知らせ</dt>
<dd>Jul 18,2019</dd>
</dl>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news__list-img">
画像
</div>
<div class="news__list-txt">
<dl>
<dt>夏季休業のお知らせ</dt>
<dd>Jul 18,2019</dd>
</dl>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news__list-img">
画像
</div>
<div class="news__list-txt">
<dl>
<dt>夏季休業のお知らせ</dt>
<dd>Jul 18,2019</dd>
</dl>
</div>
</a>
</li>
</ul>
<div class="news__button">
<a href="#">MORE</a>
</div>
</section>
<section class="instagram">
<h2 class="instagram__title">INSTAGRAM</h2>
<ul class="instagram__list">
<li>
<a href="#">
<div class="instagram__list-img">
画像が入ります
</div>
</a>
</li>
<li>
<a href="#">
<div class="instagram__list-img">
画像が入ります
</div>
</a>
</li>
<li>
<a href="#">
<div class="instagram__list-img">
画像が入ります
</div>
</a>
</li>
<li>
<a href="#">
<div class="instagram__list-img">
画像が入ります
</div>
</a>
</li>
</ul>
<div class="instagram__button">
<a href="#">FOLLOW US</a>
</div>
</section>
<section class="access">
<h2 class="access__title">ACCESS</h2>
<div class="access__map">
GoogleMapが入ります。
</div>
<div class="access__detail">
<dl>
<dt>住所</dt>
<dd>〒155-0031 東京都世田谷区北沢２丁目１９−５</dd>
</dl>
<dl>
<dt>アクセス</dt>
<dd>
<div>井の頭線「下北沢駅」東口より徒歩1分</div>
<div>小田急小田原線「下北沢駅」東口より徒歩1分</div>
</dd>
</dl>
<dl>
<dt>営業時間</dt>
<dd>平日：10:30〜19:30</dd>
</dl>
<dl>
<dt>定休日</dt>
<dd>土曜・日曜・祝日</dd>
</dl>
</div>
</section>
<footer class="footer">
<div class="footer__inner">
<ul class="footer__inner-navi">
<li><a href="#">PHILOSOPHY</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="footer__inner-sns">
<ul>
<li><a href="#">画像</a></li>
<li><a href="#">画像</a></li>
</ul>
<div class="copyright">© 2019 CRI Inc</div>
</div>
</div>
</footer>
</body>
</html>
@charset "utf-8";
/************************
* 初期設定
************************/
body{
}
/************************
* 枠線と余白 あとで削除します
************************/
*{
padding: 4px 6px !important;
}
section,footer {
border: 1px solid #00f;
margin: 10px 0;
}
div,ul,li,dl,dt,dd,p,h1,h2{
border: 1px solid #f00;
margin: 10px 0;
}
li {
margin: 20px 0;
}
/* 枠線と余白 ここまで*/
/*******************
* header footer
*******************/
.header{
}
.header__navi {
}
.header__navi li a {
}
.header__sns {
}
.header__sns li {
}
.logo{
}
.footer {
}
.footer__inner {
}
.footer__navi {
}
.footer__navi li {
}
.footer__sns{
}
.footer__sns ul {
}
.footer__sns ul li {
}
.copyright {
}
/*******************
* philosophy
*******************/
.philosophy {
}
.philosophy__right {
}
.philosophy__left{
}
.philosophy__left-title {
}
.philosophy__left-top {
}
.philosophy__left-bottom {
}
.philosophy__button {
}
/*******************
* NEWS
*******************/
.news {
}
.news__title {
}
.news__list {
}
.news__list li {
}
.news__list-img {
}
.news__list-txt {
}
.news__list-txt dd {
}
.news__button {
}
/*******************
* INSTAGRAM
*******************/
.instagram {
}
.instagram__title {
}
.instagram__list {
}
.instagram__list li {
}
.instagram__button {
}
/*******************
* ACCESS
*******************/
.access {
}
.access__title {
}
.access__map {
}
.access__detail {
}
.access__detail dl {
}
.access__detail dl dt {
}
.access__detail dl dd {
}
幅や高さ、flexを使ってレイアウトする
枠線が完成したら、レイアウトをします。
@charset "utf-8";
/************************
* 初期設定
************************/
body{
font-weight: 500;
letter-spacing : 0.04em;
-webkit-font-smoothing: antialiased;
word-break: break-word;
box-sizing: border-box;
}
img{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
a {
display: block;
text-decoration: none;
}
/************************
* 枠線と余白 あとで削除します
************************/
*{
padding: 4px 6px !important; /** あとで削除 **/
}
section,footer {
border: 1px solid #00f;
margin: 10px 0;
}
div,ul,li,dl,dt,dd,p,h1,h2{
border: 1px solid #f00;
margin: 10px 0;
}
li {
margin: 20px 0;
}
/* 枠線と余白 ここまで*/
/*******************
* header footer
*******************/
.header{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1;
padding: 10px 20px;
}
.header__navi {
display: flex;
}
.header__navi li:not(:last-child) { /* 最後の子要素ではないもの */
margin-right: 14px;
}
.header__navi li a {
font-size: 12px;
}
.header__sns {
display: flex;
}
.header__sns li {
width: 45px;
height: 45px;
}
.logo{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80vh;
}
.footer {
}
.footer__inner {
width: 80%;
margin: auto;
padding: 50px 0;
}
.footer__navi {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.footer__navi li {
margin: 0 10px;
}
.footer__navi li a {
font-size: 12px;
}
.footer__sns{
border-top: 1px solid #7c7c7c;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
}
.footer__sns ul {
display: flex;
}
.footer__sns ul li {
width: 40px;
height: 40px;
}
.copyright {
font-size: 12px;
}
/*******************
* philosophy
*******************/
.philosophy {
display: flex;
height: 680px;
}
/* 共通のCSS */
.philosophy__left,
.philosophy__right {
width: 50%;
}
.philosophy__right {
}
.philosophy__left {
display: flex;
justify-content: center;
align-items: center;
padding: 0px 10px;
}
.philosophy__title {
}
.philosophy__left-top,
.philosophy__left-bottom {
line-height: 1.6;
}
.philosophy__left-top {
margin-top: 40px;
}
.philosophy__left-bottom {
margin-top: 20px;
}
.philosophy__button {
margin-top: 50px;
border: 1px solid #fff;
width: 180px;
}
.philosophy__button a {
text-align: center;
padding: 16px 0;
font-size: 14px;
}
/*******************
* NEWS
*******************/
.news {
padding: 100px 0;
}
.news__title {
font-size: 24px;
}
.news__title span {
font-size: 16px;
margin-left: 16px;
}
.news__list {
width: 90%;
margin: 0 auto;
display: flex;
margin-top: 40px;
}
.news__list li {
width: calc(100% / 4 - 15px);
}
.news__list li:not(:last-child) {
margin-right: 30px;
}
.news__list-img {
}
.news__list-txt {
margin-top: 10px;
font-size: 14px;
}
.news__list-txt dd {
margin-top: 10px;
}
.news__button {
border: 1px solid #242424;
width: 180px;
margin: 60px auto 0;
text-align: center;
font-size: 14px;
}
.news__button a {
padding:16px 0;
}
/*******************
* INSTAGRAM
*******************/
.instagram {
background: #fff;
padding: 100px 0;
}
.instagram__title {
font-size: 24px;
}
.instagram__list {
width: 90%;
margin: 0 auto;
display: flex;
margin-top: 40px;
}
.instagram__list li {
width: calc(100% / 4 - 15px);
}
.instagram__list li:not(:last-child) {
margin-right: 30px;
}
.instagram__button {
border: 1px solid #242424;
width: 180px;
margin: 60px auto 0;
}
.instagram__button a {
text-align: center;
padding: 16px 0;
font-size: 14px;
}
/*******************
* ACCESS
*******************/
.access {
padding: 100px 0;
}
.access__title {
font-size: 24px;
text-align: center;
}
.access__map {
margin-top: 50px;
}
.access__map iframe {
width: 100%;
}
.access__detail {
width: 50%;
margin: 0 auto;
margin: 40px auto 0;
}
.access__detail dl {
display: flex;
}
.access__detail dl:not(:first-child) {
margin-top: 30px;
}
.access__detail dl dt {
flex: 1;
font-size: 14px;
}
.access__detail dl dd {
flex: 2;
font-size: 14px;
}
.access__detail dl dd div:not(:first-child) {
margin-top: 10px;
}
画像を入れこむ
枠のレイアウトが完成したら、画像を入れ込んで行きましょう。画像をダウンロードします
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CBC | レスポンシブ2</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<ul class="header__sns">
<li><a href="#"><img src="./img/sns01.png" alt=""></a></li>
<li><a href="#"><img src="./img/sns02.png" alt=""></a></li>
</ul>
<ul class="header__navi">
<li><a href="#">PHILOSOPHY</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">ACCESS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</header>
<section class="logo">
<h1><img src="./img/cbc_logo_white.svg" alt="cbc"></h1>
</section>
<section class="philosophy">
<div class="philosophy__left">
<div>
<h2 class="philosophy__left-title">PHILOSOPHY</h2>
<p class="philosophy__left-top">
たまには、贅沢を<br>
たまには、わがままを<br>
たまには、ごちそうを
</p>
<p class="philosophy__left-bottom">
その日仕入れた新鮮な食材を、お好きな調理法で、<br>
ジャンルを超えた様々な料理をおとどけいたします。<br>
美容や健康のもととなるお食事を、<br>
楽しく、おいしくお召し上がりください。
</p>
<div class="philosophy__button">
<a href="#">MORE</a>
</div>
</div>
</div>
<div class="philosophy__right"></div>
</section>
<section class="news">
<h2 class="news__title">NEWS<span>今日のおすすめ食材などニュースを発信</span></h2>
<ul class="news__list">
<li>
<a href="#">
<div class="news__list-img">
<img src="./img/news01.jpg" alt="">
</div>
<div class="news__list-txt">
<dl>
<dt>夏季休業のお知らせ</dt>
<dd>Jul 18,2019</dd>
</dl>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news__list-img">
<img src="./img/news02.jpg" alt="">
</div>
<div class="news__list-txt">
<dl>
<dt>夏季休業のお知らせ</dt>
<dd>Jul 18,2019</dd>
</dl>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news__list-img">
<img src="./img/news03.jpg" alt="">
</div>
<div class="news__list-txt">
<dl>
<dt>夏季休業のお知らせ</dt>
<dd>Jul 18,2019</dd>
</dl>
</div>
</a>
</li>
</ul>
<div class="news__button">
<a href="#">MORE</a>
</div>
</section>
<section class="instagram">
<h2 class="instagram__title">INSTAGRAM</h2>
<ul class="instagram__list">
<li>
<a href="#">
<div class="instagram__list-img">
<img src="./img/news01.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="#">
<div class="instagram__list-img">
<img src="./img/news02.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="#">
<div class="instagram__list-img">
<img src="./img/news03.jpg" alt="">
</div>
</a>
</li>
<li>
<a href="#">
<div class="instagram__list-img">
<img src="./img/news03.jpg" alt="">
</div>
</a>
</li>
</ul>
<div class="instagram__button">
<a href="#">FOLLOW US</a>
</div>
</section>
<section class="access">
<h2 class="access__title">ACCESS</h2>
<div class="access__map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.66553052196!2d139.66499671495762!3d35.66061138019912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f36bdb70683b%3A0x243faef2e21a3270!2z44CSMTU1LTAwMzEg5p2x5Lqs6YO95LiW55Sw6LC35Yy65YyX5rKi77yS5LiB55uu77yR77yZ4oiS77yV!5e0!3m2!1sja!2sjp!4v1569944678065!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
<div class="access__detail">
<dl>
<dt>住所</dt>
<dd>〒155-0031 東京都世田谷区北沢２丁目１９−５</dd>
</dl>
<dl>
<dt>アクセス</dt>
<dd>
<div>井の頭線「下北沢駅」東口より徒歩1分</div>
<div>小田急小田原線「下北沢駅」東口より徒歩1分</div>
</dd>
</dl>
<dl>
<dt>営業時間</dt>
<dd>平日：10:30〜19:30</dd>
</dl>
<dl>
<dt>定休日</dt>
<dd>土曜・日曜・祝日</dd>
</dl>
</div>
</section>
<footer class="footer">
<div class="footer__inner">
<ul class="footer__inner-navi">
<li><a href="#">PHILOSOPHY</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<div class="footer__inner-sns">
<ul>
<li><a href="#"><img src="./img/sns01.png" alt=""></a></li>
<li><a href="#"><img src="./img/sns02.png" alt=""></a></li>
</ul>
<div class="copyright">© 2019 CRI Inc</div>
</div>
</div>
</footer>
</body>
</html>
@charset "utf-8";
/************************
* 初期設定
************************/
body{
font-weight: 500;
letter-spacing : 0.04em;
-webkit-font-smoothing: antialiased;
word-break: break-word;
box-sizing: border-box;
}
*{
padding: 8px;
}
a{
display: block;
text-decoration: none;
}
img{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
/*******************
* header footer
*******************/
.header{
position: fixed;
top:0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1;
padding: 10px 20px;
background: rgba(0, 0, 0, .6);
}
.header__navi {
display: flex;
}
.header__navi li:not(:last-child) {
margin-right: 14px;
}
.header__navi li a {
color: #fff;
font-size: 12px;
}
.header__sns {
display: flex;
}
.header__sns li {
width: 45px;
height: 45px;
}
.logo{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80vh;
position: relative;
background: url(../img/mv.jpg) center/cover no-repeat;
}
.logo h1 {
width: 150px;
}
.footer {
background-color: #242424;
}
.footer__inner {
width: 80%;
margin: auto;
padding: 50px 0;
}
.footer__inner-navi {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.footer__inner-navi li {
margin: 0 10px;
}
.footer__inner-navi li a {
color: #ffffff;
font-size: 12px;
}
.footer__inner-sns{
border-top: 1px solid #7c7c7c;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
}
.footer__inner-sns ul {
display: flex;
}
.footer__inner-sns ul li {
width: 40px;
height: 40px;
}
.copyright {
color: #ffffff;
font-size: 12px;
}
/*******************
* philosophy
*******************/
.philosophy {
display: flex;
height: 680px;
background-color: #242424;
}
.philosophy__left,
.philosophy__right {
width: 50%;
}
.philosophy__right {
background: url(../img/philosophy_bg.jpg) center/cover no-repeat;
}
.philosophy__left {
display: flex;
justify-content: center;
align-items: center;
padding: 0px 10px;
color:#fff;
}
.philosophy__left-title {
font-size: 24px;
}
.philosophy__left-top {
margin-top: 40px;
line-height: 1.6;
}
.philosophy__left-bottom {
margin-top: 20px;
line-height: 1.6;
}
.philosophy__button {
margin-top: 50px;
border: 1px solid #fff;
width: 180px;
}
.philosophy__button a {
text-align: center;
padding: 16px 0;
font-size: 14px;
color: #fff;
}
.philosophy__button a:hover {
color: #242424;
background: #fff;
}
/*******************
* NEWS
*******************/
.news {
background: #F0F0F0;
padding: 100px 0;
}
.news__title {
width: 90%;
margin: 0 auto;
font-size: 24px;
}
.news__title span {
font-size: 16px;
margin-left: 16px;
}
.news__list {
width: 90%;
margin: 0 auto;
display: flex;
margin-top: 40px;
}
.news__list li {
width: calc(100% / 4 - 15px);
}
.news__list li:not(:last-child) {
margin-right: 30px;
}
.news__list-txt {
margin-top: 10px;
font-size: 14px;
}
.news__list-txt dd {
margin-top: 10px;
}
.news__button {
border: 1px solid #242424;
width: 180px;
margin: 60px auto 0;
}
.news__button a {
text-align: center;
padding: 16px 0;
font-size: 14px;
color: #242424;
}
.news__button a:hover {
color: #fff;
background: #242424;
}
/*******************
* INSTAGRAM
*******************/
.instagram {
background: #fff;
padding: 100px 0;
}
.instagram__title {
width: 90%;
margin: 0 auto;
font-size: 24px;
}
.instagram__list {
width: 90%;
margin: 0 auto;
display: flex;
margin-top: 40px;
}
.instagram__list li {
width: calc(100% / 4 - 15px);
}
.instagram__list li:not(:last-child) {
margin-right: 30px;
}
.instagram__button {
border: 1px solid #242424;
width: 180px;
margin: 60px auto 0;
}
.instagram__button a {
text-align: center;
padding: 16px 0;
font-size: 14px;
color: #242424;
}
.instagram__button a:hover {
color: #fff;
background: #242424;
}
/*******************
* ACCESS
*******************/
.access {
background: #f0f0f0;
padding: 100px 0;
}
.access__title {
font-size: 24px;
text-align: center;
}
.access__map {
margin-top: 50px;
}
.access__map iframe {
width: 100%;
}
.access__detail {
width: 50%;
margin: 0 auto;
margin: 40px auto 0;
}
.access__detail dl {
display: flex;
}
.access__detail dl:not(:first-child) {
margin-top: 30px;
}
.access__detail dl dt {
flex: 1;
font-size: 14px;
}
.access__detail dl dd {
flex: 2;
font-size: 14px;
}
.access__detail dl dd div:not(:first-child) {
margin-top: 10px;
}
レスポンシブ化する
最後にレスポンシブ化してみましょう！
@charset "utf-8";
/************************
* 初期設定
************************/
body{
font-weight: 500;
letter-spacing : 0.04em;
-webkit-font-smoothing: antialiased;
word-break: break-word;
box-sizing: border-box;
}
a{
display: block;
text-decoration: none;
}
img{
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
/*******************
* header footer
*******************/
.header{
position: fixed;
top:0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1;
padding: 10px 20px;
background: rgba(0, 0, 0, .6);
}
@media screen and (max-width:480px){
.header {
padding: 20px 0 20px;
justify-content: center;
}
}
.header__navi {
display: flex;
}
.header__navi li:not(:last-child) {
margin-right: 14px;
}
.header__navi li a {
color: #fff;
font-size: 12px;
}
.header__sns {
display: flex;
}
@media screen and (max-width:480px){
.header__sns {
display: none;
}
}
.header__sns li {
width: 45px;
height: 45px;
}
.logo{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80vh;
position: relative;
background: url(../img/mv.jpg) center/cover no-repeat;
}
@media screen and (max-width:480px){
.logo{
height: 467px;
}
}
.logo h1 {
width: 150px;
}
.footer {
background-color: #242424;
}
.footer__inner {
width: 80%;
margin: auto;
padding: 50px 0;
}
.footer__inner-navi {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
@media screen and (max-width:480px){
.footer__inner-navi {
display: flex;
flex-direction: column;
align-items: center;
}
}
.footer__inner-navi li {
margin: 0 10px;
}
@media screen and (max-width:480px){
.footer__inner-navi li:not(:last-child) {
margin-bottom: 10px;
}
}
.footer__inner-navi li a {
color: #ffffff;
font-size: 12px;
}
@media screen and (max-width:480px){
.footer__inner-navi li a {
padding: 10px 0;
}
}
.footer__inner-sns {
border-top: 1px solid #7c7c7c;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
}
.footer__inner-sns ul {
display: flex;
}
.footer__inner-sns ul li {
width: 40px;
height: 40px;
}
.copyright {
color: #ffffff;
font-size: 12px;
}
/*******************
* philosophy
*******************/
.philosophy {
display: flex;
height: 680px;
background-color: #242424;
}
@media screen and (max-width:480px){
.philosophy {
flex-direction: column;
}
}
.philosophy__left,
.philosophy__right {
width: 50%;
}
@media screen and (max-width:480px){
.philosophy__left,
.philosophy__right {
width: 100%;
}
}
.philosophy__right {
background: url(../img/philosophy_bg.jpg) center/cover no-repeat;
}
@media screen and (max-width:480px){
.philosophy__right {
height: 230px;
}
}
.philosophy__left {
display: flex;
justify-content: center;
align-items: center;
padding: 0px 10px;
}
@media screen and (max-width:480px){
.philosophy__left {
padding: 0 20px;
width: 100%;
height: 450px;
}
}
.philosophy__left-top,
.philosophy__left-bottom {
line-height: 1.6;
}
.philosophy__left-title {
color: #fff;
font-size: 24px;
}
@media screen and (max-width:480px){
.philosophy__left-title {
text-align: center;
font-size: 16px;
}
}
.philosophy__left-top {
margin-top: 40px;
color: #fff;
}
@media screen and (max-width:480px){
.philosophy__left-top {
font-size: 12px;
line-height: 1.8;
}
}
.philosophy__left-bottom {
margin-top: 20px;
color: #fff;
}
@media screen and (max-width:480px){
.philosophy__left-bottom {
font-size: 12px;
line-height: 1.8;
}
}
.philosophy__button {
margin-top: 50px;
border: 1px solid #fff;
width: 180px;
}
@media screen and (max-width:480px){
.philosophy__button {
width: 100%;
}
}
.philosophy__button a {
text-align: center;
padding: 16px 0;
font-size: 14px;
color: #fff;
}
.philosophy__button a:hover {
color: #242424;
background: #fff;
}
/*******************
* NEWS
*******************/
.news {
background: #F0F0F0;
padding: 100px 0;
}
@media screen and (max-width:480px){
.news {
padding: 50px 0;
}
}
.news__title {
width: 90%;
margin: 0 auto;
font-size: 24px;
}
@media screen and (max-width:480px){
.news__title {
font-size: 16px;
display: flex;
flex-direction: column;
text-align: center;
}
}
.news__title span {
font-size: 16px;
margin-left: 16px;
}
@media screen and (max-width:480px){
.news__title span {
font-size: 12px;
margin-top: 10px;
}
}
.news__list {
width: 90%;
margin: 0 auto;
display: flex;
margin-top: 40px;
}
@media screen and (max-width:480px){
.news__list {
flex-wrap: wrap;
}
}
.news__list li {
width: calc(100% / 4 - 15px);
}
@media screen and (max-width:480px){
.news__list li {
width: calc(100% / 2 - 2%);
}
}
.news__list li:not(:last-child) {
margin-right: 30px;
}
@media screen and (max-width:480px){
.news__list li:not(:last-child) {
margin-right: 0;
}
.news__list li:nth-child(odd) {
margin-right: 4%;
}
.news__list li:nth-child(n+3) {
margin-top: 24px;
}
}
.news__list-txt {
margin-top: 10px;
font-size: 14px;
}
.news__list-txt dd {
margin-top: 10px;
}
.news__button {
border: 1px solid #242424;
width: 180px;
margin: 60px auto 0;
}
@media screen and (max-width:480px){
.news__button {
width: 90%;
}
}
.news__button a {
text-align: center;
padding: 16px 0;
font-size: 14px;
color: #242424;
}
.news__button a:hover {
color: #fff;
background: #242424;
}
/*******************
* INSTAGRAM
*******************/
.instagram {
background: #fff;
padding: 100px 0;
}
@media screen and (max-width:480px){
.instagram {
width: 100%;
padding: 50px 0;
}
}
.instagram__title {
width: 90%;
margin: 0 auto;
font-size: 24px;
}
@media screen and (max-width:480px){
.instagram__title {
display: flex;
flex-direction: column;
text-align: center;
font-size: 16px;
}
}
.instagram__list {
width: 90%;
margin: 0 auto;
display: flex;
margin-top: 40px;
}
@media screen and (max-width:480px){
.instagram__list {
flex-wrap: wrap;
}
}
.instagram__list li {
width: calc(100% / 4 - 15px);
}
@media screen and (max-width:480px){
.instagram__list li {
width: calc(100% / 2 - 2%);
}
}
.instagram__list li:not(:last-child) {
margin-right: 30px;
}
@media screen and (max-width:480px){
.instagram__list li:not(:last-child) {
margin-right: 0;
}
.instagram__list li:nth-child(odd) {
margin-right: 4%;
}
.instagram__list li:nth-child(n+3) {
margin-top: 24px;
}
}
.instagram__button {
border: 1px solid #242424;
width: 180px;
margin: 60px auto 0;
}
@media screen and (max-width:480px){
.instagram__button {
width: 90%;
}
}
.instagram__button a {
text-align: center;
padding: 16px 0;
font-size: 14px;
color: #242424;
}
.instagram__button a:hover {
color: #fff;
background: #242424;
}
/*******************
* ACCESS
*******************/
.access {
background: #f0f0f0;
padding: 100px 0;
}
@media screen and (max-width:480px){
.access {
padding: 50px 0;
}
}
.access__title {
text-align: center;
font-size: 24px;
}
.access__map {
margin-top: 50px;
}
.access__map iframe {
width: 100%;
}
.access__detail {
width: 50%;
margin: 0 auto;
margin: 40px auto 0;
}
@media screen and (max-width:480px){
.access__detail {
width: 80%;
}
}
.access__detail dl {
display: flex;
}
@media screen and (max-width:480px){
.access__detail dl {
flex-direction: column;
}
}
.access__detail dl:not(:first-child) {
margin-top: 30px;
}
@media screen and (max-width:480px){
.access__detail dl:not(:first-child) {
margin-top: 40px;
}
}
.access__detail dl dt {
flex: 1;
font-size: 14px;
}
@media screen and (max-width:480px){
.access__detail dl dt {
font-weight: bold;
font-size: 14px;
margin-bottom: 8px;
}
}
.access__detail dl dd {
flex: 2;
font-size: 14px;
}
.access__detail dl dd div:not(:first-child) {
margin-top: 10px;
}
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ