こうなった
aタグはインライン要素だから、（領域を持っていない）
仮に横幅の指定をしても無駄
文字のとこだけクリックできる状態
ブロックレベルにしてやればいい
display: block;
親要素の領域の100％の領域をもつ具合に変更される
これではじめてwidthが掛けられる
高さも欲しい
height: 6rem;
上に文字がくっついてしまった
こういうときはline-heightを使えば「上下に」伸びる
しかしもし2行あったらこうなる可能性も
もしこういう2行なりそうなときはpaddingなどで調整するらしい
ここまで
main .btn a{
font-size: 2rem;
background-color: #1b5901;
display: block;
width: 48%;
line-height: 6rem;
text-align: center;
margin: 0 auto;/*中央揃え*/
border-radius: 0.5rem;
}
a.hoverも調節しましょう
main .btn a:hover{
background-color: #257a01;
text-decoration: underline;/*アンダーライン*/
}
その下の隙間に関しては、
「mainの下だ」と考えてもいいし、
「ボタン部分の下だ」と考えてもいい
今回はmainの下と考えて、
main{
margin-bottom: 10rem;
}
最後に全体のaにこれを掛ける
a:hover{
color:#257a01;
text-decoration: underline;
}
逆に、いますぐお問い合わせの部分は白いままであるように
下線も必要なくなった
main .btn a:hover{
color: #fff;
background-color: #257a01;
}
一応これで出来上がり
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Now, Healthem アナタの健康サポート</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!--
<link rel="stylesheet" href="css/test.css">
-->
</head>
<body>
<header class="flex">
<h1><a href="index.html"><img src="images/hc-Header_Logo.svg" alt="Healthem アナタの健康サポート"></a></h1>
<nav>
<ul class="flex">
<li><a href="index.html">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">news</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</header>
<main>
<div class="main_visual">
<div>
<h2 class="white">
毎日の食事、<br>
カラダに優しいものを
</h2>
<p class="white">
日々の食事がおろそかになりがちな働き盛りのあなたへ
</p>
</div>
</div><!--main_visual END-->
<p class="message serif gray">
毎日いろいろなことに追われて食事がおろそかになっていませんか? <br>
ヘルセムは、そんな忙しいあなたのための健康サポート、日々の食事をお届けするサービスです。個人でのご利用はもちろん、会社の福利厚生としてのご利用も可能。朝食と夕食のセットや昼食のみなど、お客様のニーズに合わせたプランをご用意しています。
</p>
<div class="column">
<section class="col_01 flex"><!--1つめのセクション-->
<div class="col_img">
<figure>
<img src="images/hm-Content-Images-01.jpg" alt="コラムイメージ01">
<figcaption>毎日の食事は大事なもの</figcaption>
</figure>
</div>
<div class="col_text">
<h3>ある日突然不調をきたさないために</h3>
<h4>未来のカラダは今の食事が作る</h4>
<p>
あなたの今のカラダはそこから遡ること数年前の生活が作ると言われているのをご存知でしょうか。忙しい毎日を乗り切るためにいい加減に食事を済ませたり、偏った食生活をしていると、数年後のカラダに不調をきたすことにもなりかねません。未来の自分を作るため、日々の食事にも心配りを。
</p>
</div>
</section>
<section class="col_02 flex"><!--2つめのセクション-->
<div class="col_img">
<figure>
<img src="images/hm-Content-Images-02.jpg" alt="コラムイメージ02">
<figcaption>面倒なカロリー計算もおまかせ</figcaption>
</figure>
</div>
<div class="col_text">
<h3>個人でのご利用、組織でのご利用も</h3>
<h4>働き盛りのアナタをサポート</h4>
<p>
ヘルセムは働き盛りのあなたに必要な栄養をギュッと閉じ込めるべく栄養士が考えてメニューを構成しています。毎日に必要な摂取カロリーを考慮した和洋中のメニューからご自身の好みでチョイス、また会社の福利厚生として昼食のみのデリバリープランもご用意。働き盛りの世代をサポートします。
</p>
</div>
</section>
</div>
<div class="news">
<h3 class="serif">ヘルセムからのお知らせ</h3>
<dl class="flex">
<dt>2018.03.01</dt>
<dd>
3月下旬からお昼のお弁当プランに期間限定「お花見セット」が登場
</dd>
<dt>2018.02.01</dt>
<dd>
梅の花も咲き始め、いよいよ春メニューの登場
</dd>
</dl>
</div>
<p class="btn"><!--ボタンの要素もたせたい-->
<a class="white" href="#">いますぐ問い合わせてみる</a>
</p>
</main>
<footer class="flex">
<nav>
<ul>
<li><a href="#">会社概要 </a></li>
<li><a href="#">お問い合わせ </a></li>
<li><a href="#">サイトマップ </a></li>
<li><a href="#">プライバシーポリシー </a></li>
</ul>
</nav>
<dl>
<dt>株式会社ヘルセム </dt>
<dd><address>東京都千代田区神田神保町1-105 </address></dd>
<dd>contact@healthem.info</dd>
</dl>
</footer>
<script src="test1.js"></script>
</body>
</html>
style.css
@charset "UTF-8";
*{
box-sizing: border-box;/*borderまでコミコミでサイズを計算*/
}
html{
font-size:62.5%;/*こうやってルートのサイズを実質10pxにしておくとremの計算がらく*/
}
body{
font-size: 1.5rem;
font-family: sans-serif;/*全体はゴシック体*/
}
img{
max-width: 100%;/*自分自身のもっているサイズを最大とする。また小さくなる時は親要素にあわせて小さくなる*/
}
a:hover{
color:#257a01;
text-decoration: underline;
}
.flex{/*横並びにしたいものは全部これで管理できる*/
display: flex;/*横並び*/
}
.white{
color: #fff;
}
.gray{
color: #555;
}
.serif{
font-family: serif;/*明朝体が出てきたらこのクラス名を付けてやる*/
}
header{
justify-content: space-between;/*子要素の横に並ぶ時の余白。外の余白は無視する。アイテムが均等に並ぶが今回アイテムが2つしかないからそれぞれが左右に存在。3つあったらそれぞれの間隔が同じになる*/
align-items: center;/*縦方向に中心をそろえる*/
padding: 1rem 2rem;/*余白*/
}
header nav ul li{/*このliの3項目に余白がついているとよさそう*/
margin-right: 2rem;
}
header nav ul li:last-child{/*でもliの最後のやつには余白いらないや*/
margin-right: 0;
}
header nav ul li a{
color: #555;/*ちょっと灰色*/
text-transform: capitalize;
}
main{
margin-bottom: 10rem;
}
main .main_visual{
height: 520px;/*高さ*/
background-image: url('../images/hm-Content-HomeHero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*上下方向の中心ぞろえ*/
display:flex;
align-items: center;
}
main .main_visual div{
padding-left: 4rem;
}
main .main_visual div h2{
font-size: 3rem;
line-height: 1.2;
}
main .main_visual div p{
line-height: 1.2;
padding-top: 1rem;
}
main p.message{
width: 60%;
margin: 8rem auto;/*上下方向8rem、autoというのは「親要素の横幅の真ん中」*/
line-height: 1.8;
}
main .column{
width: 80%;
margin: auto;
}
main .column .col_02{
flex-direction: row-reverse;
}
main .column section .col_img{
flex-basis: 40%;/*横並びになったときにその子供がどれだけの領域を持つか*/
padding: 3%;
}
main .column section .col_text{
flex-basis: 60%;/*横並びになったときにその子供がどれだけの領域を持つか*/
padding: 3%;
}
main .column section{
align-items: center;/*縦方向を中央に揃える なんでここにdisplay:flex;は必要ないのか→表（html）でこの部分にclass flexがすでに当たっているので乗せ乗せになっている*/
}
main .column section .col_img figcaption{
padding-top: 1rem;
}
main .column section .col_text h3{
border-bottom: 1px solid #333;/*文字に下線*/
line-height: 1.5;
}
main .column section .col_text h4{
font-size: 2.2rem;
margin-top: 2em;
}
main .column section .col_text p{
font-size: 1.5rem;
line-height: 1.5;
margin-top: 1.5em;
}
main .news{
width: 60%;
margin: 5rem auto;/*中央揃え 上下にmargin*/
}
main .news h3{
font-size: 2.5rem;
text-align: center;
margin-bottom: 3rem;
}
main .news dl.flex{/*この指定のやり方もはじめてでは*/
flex-wrap: wrap;/*折り返し設定*/
}
main .news dl.flex dt{
flex-basis:25%;
line-height: 2;/*こっちにもこれをつけないと高さがずれるよ*/
}
main .news dl.flex dd{
flex-basis:75%;
margin-bottom: 1.5rem;
line-height: 2;
}
main .btn a{
font-size: 2rem;
background-color: #1b5901;
display: block;
width: 48%;
line-height: 6rem;
text-align: center;
margin: 0 auto;/*中央揃え*/
border-radius: 0.5rem;
}
main .btn a:hover{
color: #fff;
background-color: #257a01;
}
footer{
justify-content: space-between;/*2アイテムを均等に左右ぞろえ*/
flex-direction: row-reverse;/*アイテムを逆順で表示*/
padding: 6rem 4rem;
background-color: #f4f4f4;/*余白が消されているのでぴっちり背景色が塗られる*/
}
footer ul{
text-align: right;/*右揃え*/
}
footer ul li a{/*footerの右側の要素のブロック*/
line-height: 1.5;
}
footer dl dt,footer dl dd{/*footerの左側のブロック*/
line-height: 1.5;
}
