17 ホームページ中級講座 CSSでタイトルをロゴっぽく
前回の16 ホームページ中級講座 便利なEmmet!の続きになります。
HTMLは前回のマークアップされた下記のHTMLファイルを使います。cssは外部スタイルシートになるので、style.cssを作成して、HTMLファイルと同じフォルダに入れておきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ネットワークサービス 株式会社</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<header>
<h1>NewWorkService</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Access</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>
<article class="clear_fix">
<section>
<h1>社長の挨拶</h1>
<p>
<img src="images/laptop.png" alt="パソコン" class="f_left"> 枠組みも対象文を列挙し記事ますんため、引用するられるフリーを検証毎厳格の活用内容をするれても満たすあっ、記事の原則は、利用作るメディアと陳述しこととして著作自由ないでてなりますあれ。しかし、疑義の出版作も、ペディアの決議即し前記有効ある原則を一見し、そのルールであたりてtheで依頼掲げることが決議よれれます。ただしで、引用下が利用されるている文章をそのままさ満たすことは、決議でなけれ、場合に対しては該当日の既存としてライセンス上の問題は含むことに、本投稿会は、可能の引用をするて要件に制裁さたておくますます。
</p>
<p>また、誰と問題がしものが「削除権」の禁止ない。</p>
<p><img src="images/line_chart.png" alt="グラフ" class="f_right">方針の方針が公開するれる以下を重要ます目的ですばとするから、企業を著作するます状態を文章ないを既存するて、さらにありななか。著作権が削除あるれん言語だあるば問題はたかもしなます。ただし、既存権と該当さればください文章を主題なで修正行わば、「文献が、これでも著作が明瞭」ますFree文字をしに対する条件の形式を引用示しでます。</p>
</section>
</article>
<footer>
<p><small>Copyright © 2019 NET WORK SERVICE .All rights reserved.</small></p>
</footer>
</div>
</body>
</html>Contents
動画を参照しながらCSSを書いてみましょう
nav部分の背景にグラデーションを設定 hover で反転
header nav ul li a {
color: #333;
text-decoration: none;
background-image: linear-gradient(
/*上から下へのグラデーション*/
to bottom,
/*最初の色は#ddd 真ん中の色は#fff(白) 一番下の色は#999*/
#ddd,
#fff,
#999);
display: block;
padding: 0.5em 0;
font-weight:800;
}
header nav ul li a:hover {
/*マウスが乗っかるhover状態で、グラデーションの色は変化する*/
background-image: linear-gradient( to bottom, #999, #fff, #ddd);
}header 要素の中のh1をtext-shadow を使ってロゴ風に
header h1 {
font-size: 2.25em;
padding: 1.5rem;
font-weight: 800;
text-shadow: 1px 1px 3px #000;
color:#fff;
}完成イメージ
