教科書サンプル、ヘルセム
11/6版を精製していきましょう
その前に
box-shadowについて
参照：
https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow
>CSS の box-shadow プロパティは、要素のフレームの周囲にシャドウ効果を追加します。
コンマで区切ることで、複数の効果を指定することができます。
ボックスの影は要素からの相対的な X および Y のオフセット、
ぼかしと拡散の半径、色で記述します。
box-shadow: 10px 5px 5px red;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
box-shadow: inset 5em 1em gold;
box-shadow: 3px 3px red, -1em 0 .4em olive;
などなど
X,Y,ぼかしの程度,ぼかしの威力、色
rgba
R,G,B,Alpha
括弧の中にカンマで区切って記述する
Alphaは0-1の値で指定する（0が薄い）
色は0-255？までで指定する
opacity
中に入っている要素まで透過する
文字と背景ごとにする(opacity)か、背景だけにするか(rgba)で使い方が違ってくる
デザインカンプからcssを付けていこう
デザインカンプ
>このワイヤーフレームを元に色をつけ、画像やテキストを挿入して、
Webサイトの完成イメージとなるものを指します。
デザインカンプを作るポイントは、Webサイトの目的や狙いを決めることです。
①モバイルファーストにするかPCファーストにするか決める
最近はモバイルファーストにする方が多いらしい。どっちでもいいらしい
モバイルのほうがCSSの指定が少なので楽っちゃ楽かもしれないらしい
②とりあえず今回はPC版で作っていきます
クロームの「検証」でここを押すと一応はモバイルの見え方は確認できる
ここで機種も変えられる
ただし実際はサーバーに上げて
モバイル実機で確認する作業が必要になってくる
今回、主にheader,main,footerで構成されている
画像は
\html_css教科書サンプルダウンロード\NewText2_Kaitei\Lesson12\public_html\images
をフォルダごとをコピーして使う
では画像を付けていきましょう
クラス名やid名も付けていく
--->作業前の形
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Healthem アナタの健康サポート</title>
<link rel="stylesheet" href="css/style.css">
<!--
<link rel="stylesheet" href="css/test.css">
-->
</head>
<body>
<header>
<h1><a href="index.html">Healthem アナタの健康サポート</a></h1>
<nav>
<ul>
<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">
<h2>
毎日の食事、<br>
カラダに優しいものを
</h2>
<p>
日々の食事がおろそかになりがちな働き盛りのあなたへ
</p>
</div><!--main_visual END-->
<p>
毎日いろいろなことに追われて食事がおろそかになっていませんか? <br>
ヘルセムは、そんな忙しいあなたのための健康サポート、日々の食事をお届けするサービスです。個人でのご利用はもちろん、会社の福利厚生としてのご利用も可能。朝食と夕食のセットや昼食のみなど、お客様のニーズに合わせたプランをご用意しています。
</p>
<div>
<section>
<h3>ある日突然不調をきたさないために</h3>
<h4>未来のカラダは今の食事が作る</h4>
<p>
あなたの今のカラダはそこから遡ること数年前の生活が作ると言われているのをご存知でしょうか。忙しい毎日を乗り切るためにいい加減に食事を済ませたり、偏った食生活をしていると、数年後のカラダに不調をきたすことにもなりかねません。未来の自分を作るため、日々の食事にも心配りを。
</p>
</section>
<section>
<h3>個人でのご利用、組織でのご利用も</h3>
<h4>働き盛りのアナタをサポート</h4>
<p>
ヘルセムは働き盛りのあなたに必要な栄養をギュッと閉じ込めるべく栄養士が考えてメニューを構成しています。毎日に必要な摂取カロリーを考慮した和洋中のメニューからご自身の好みでチョイス、また会社の福利厚生として昼食のみのデリバリープランもご用意。働き盛りの世代をサポートします。
</p>
</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>
<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>
ではこの部分を編集していきましょう
