ランディングページ作成2
スタイルシートの書き方を復習しながら作っていきましょう。
最終目標は自由にレイアウトをデザインして、それに合わせてコードを書いていくことが出来るようになることが目標です。
まずは<head>内に「gesui.css」をリンクさせる
あらかじめ、bodyやhead、contentsなどスタイルシートの設定済みです。
設定内容を確認しておきましょう。
HTML
<link rel="stylesheet" href="gesui.css">
CSS
/* 画像レスポンシブ*/
img{
max-width:100%;
height:auto;
}
HTML
<h1><ruby>下水処理場<rt>げすいしょりじょう</rt></ruby>のしくみ</h1>
CSS
/* 斜めBG */
.slant-bg {
width: 100%;
padding: 50px 0;
clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
background-image:url("img/water.jpg");
background-size: cover;
text-align: center;
font-size: 18px;
}
HTML
<div class="slant-bg">
<div class="container">
<h2>下水道の役割</h2>
<p>～</p>
<div class="fuwafuwa"></div>
</div>
</div>
HTML
<h3 id="g1">1 沈砂池（ちんさち）</h3>
<h3 id="g2">2 最初沈殿池（さいしょちんでんち）</h3>
<h3 id="g3">3 エアレーションタンク</h3>
<h3 id="g4">4 最終沈殿池（さいしゅうちんでんち）</h3>
<h3 id="g5">5 消毒設備（しょうどくせつび）（塩素混和池）</h3>
CSS
/* ナビゲーション */
.menu {
margin: 40px 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.menu li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
text-align: center;
background: #ed6d35;
margin: 7px;
border-radius: 5px;
}
.menu li a:hover {
background: #ff8c00;
color: #fff;
}
HTML
<ul class="menu">
<li><a href="#g1">1 沈砂池</a></li>
～
<li><a href="#g5">5 消毒設備</a></li>
</ul>
ここでは特殊文字を入れていきます
❶ → ❶ ❷ → ❷ ❸ → ❸
❹ → ❹ ❺ → ❺
HTML
<ul class="menu">
<li><a href="#g1">❶ 沈砂池</a></li>
<li><a href="#g2">❷ 最初沈殿池</a></li>
<li><a href="#g3">❸ エアレーションタンク</a></li>
<li><a href="#g4">❹ 最終沈殿池</a></li>
<li><a href="#g5">❺ 消毒設備</a></li>
</ul>
HTML
<h3 id="g1">1 沈砂池（ちんさち）</h3>
↓
<h3 id="g1">❶ 沈砂池（ちんさち）</h3>
CSS
/* スムーススクロール */
html{
scroll-behavior: smooth;
}
CSS
/* 回り込み指定 */
.migi{
margin:0 0 25px 25px;
float:right;
}
.hidari{
margin: 0 25px 25px 0;
float: left;
}
@media only screen and (max-width:767px){
img.migi, img.hidari{
display:block;margin:5px auto;
}
.migi,.hidari{
float:none;
}
}
HTML
ここではすでにマークアップしてあります。画像を右側にしたい場合はclass="migi"に変更してください。
<img src="img/p01.jpg" alt="" class="hidari">
CSS
/* 逆三角 */
.sankaku {
width: 60px;
height: 40px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
background-color: #82cddd;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}
HTML
<p class="aomoji">▼</p>
↓
<div class="sankaku"></div>
CSS
/* Page Top*/
.pagetop {
display: none;
position: fixed;
bottom: 10px;
right: 0px;
}
.pagetop a {
display: block;
text-align: center;
color: #fff;
font-size: 12px;
text-decoration: none;
padding: 10px 10px 5px;
filter: alpha(opacity=90);
-moz-opacity:0.9;
opacity:0.9;
}
.pagetop a:hover {
display: block;
text-align: center;
color: #fff;
font-size: 12px;
text-decoration: none;
padding:10px 10px 5px;
}
HTML <head>～</head>内に入れる
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var pagetop = $('.pagetop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
HTML <footer>の上に入れる
<p class="pagetop"><a href="#wrapper"><img src="img/page-top.png" width="80" height="100" alt=""/></a></p>
ここでは同じh3のスタイルで色だけ変えてみました
CSS
h3.green {
padding: 5px 20px;
border-radius: 10px;
background-color:#65ab31;
color: #ffffff;
margin: 30px 0;
}
HTML
<h3 class="green">汚泥処理（おでいしょり）</h3>
CSS
.box1{
background-color: #c6ffc6;
padding: 20px;
margin: 30px 0;
}
HTML
<div class="box1">
<p> ~ <br style="clear:both;">
</div>