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>
<h3>ヘルセムからのお知らせ</h3>
<dl>
<dt>2018.03.01</dt>
<dd>
3月下旬からお昼のお弁当プランに期間限定「お花見セット」が登場
</dd>
<dt>2018.02.01</dt>
<dd>
梅の花も咲き始め、いよいよ春メニューの登場
</dd>
</dl>
</div>
<p>
<a href="#">いますぐ問い合わせてみる</a>
</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>
reset.css
@charset "UTF-8";
*{/*全称セレクタ セレクタとしての点数は0*/
margin: 0;
padding: 0;
font-size: 100%;
list-style-type: none;/*ulの中黒とかを無しに*/
text-decoration: none;/*aの下線とかを無しに*/
color: #000;/*フォントカラー黒*/
line-height: 1;
font-weight: normal;
}
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%;/*自分自身のもっているサイズを最大とする。また小さくなる時は親要素にあわせて小さくなる*/
}
.flex{/*横並びにしたいものは全部これで管理できる*/
display: flex;/*横並び*/
}
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 .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;は必要ないのか*/
}
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;
}
.white{
color: #fff;
}
.gray{
color: #555;
}
.serif{
font-family: serif;/*明朝体が出てきたらこのクラス名を付けてやる*/
}
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;
}
/*
//このあと自分で作ったコードの名残
.hero_bg{
height: 480px;
background-image: url('../images/hm-Content-HomeHero.jpg');
background-size: cover;
background-repeat: no-repeat;
backgound-position: center;
position: relative;
}
.hoge{
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 4rem;
}
.hoge h2{
color: #fff;
font-size: 3rem;
line-height: 5rem;
}
.hoge p{
color: #fff;
line-height: 5rem;
}
.hoge2{
width: 80%;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.hoge2 p{
color: #777;
line-height: 3rem;
}
*/
