解説ページ
テキストに載っていなかった部分の解説。というかコード。頭が痛くなる。左右のバランスが悪いのは仕方なし。
画像ホバー時にリンクが緩やかに変化
transitionの画像版。乗せた時に色が付くように変化したいとして配置した。logo2.pngに色が乗っています。
translate（水平移動）で重なった画像がホバーした瞬間にlogo1.pngに切り替わる設定。
HTML
<div class="logo-btn">
<a href="index.html" class="logo">
<img src="img/logo2.png" alt="くらげ">
<img src="img/logo1.png" alt="くらげ">
</a>
</div>
<a href="index.html" class="logo">
<img src="img/logo2.png" alt="くらげ">
<img src="img/logo1.png" alt="くらげ">
</a>
</div>
CSS
.logo-btn {ボタン自体の親要素
position: relative;
width: 600px;
height: 80px;
max-width: 90%;
margin: 0 auto;
display: block;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.logo img {子要素
width: 600px;
max-width: 90%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
display: block;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
.logo-btn:hover img:nth-of-type(2) {
opacity: 0;
}
position: relative;
width: 600px;
height: 80px;
max-width: 90%;
margin: 0 auto;
display: block;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
}
.logo img {子要素
width: 600px;
max-width: 90%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
display: block;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
.logo-btn:hover img:nth-of-type(2) {
opacity: 0;
}
ハンバーガーメニュー（CSS）
ブラウザサイズ800px以下での表示の際に登場。使用したのはJavascriptを使用せずCSSのみで表現したもの。
headerを起点にしているため前提としてheader内で使っている。CSSクッソ長い。
HTML
<nav>
<label>
<input type="checkbox" hidden>
<span class="menu"> <span class="hamburger"></span> </span>
<ul>
<li><a href="jf.html">くらげ</a></li>
<li><a href="photo.html">フォト</a></li>
<li><a href="ossm.html">お勧め</a></li>
<li><a href="link.html">水族館</a></li>
</ul>
</label>
</nav>
<label>
<input type="checkbox" hidden>
<span class="menu"> <span class="hamburger"></span> </span>
<ul>
<li><a href="jf.html">くらげ</a></li>
<li><a href="photo.html">フォト</a></li>
<li><a href="ossm.html">お勧め</a></li>
<li><a href="link.html">水族館</a></li>
</ul>
</label>
</nav>
CSS
header {relativeをmedia以下に入れてる
height: 200px;
padding-top: 40px;
background-color: rgba(0, 128, 128, 0.8);
position: relative;
}
label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 200;
width: 180px;
height: 180px;
background-color: rgba(0, 128, 128);
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
box-shadow: 0 0 0 0 rgba(0, 128, 128), 0 0 0 0 rgba(0, 128, 128);
cursor: pointer;
display: inline-block;
}
label .hamburger {
position: absolute;
top: 125px;
left: 40px;
width: 30px;
height: 2px;
background: #123e68;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* 起動ボタンの部分 */
label .hamburger:after,
label .hamburger:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #69d2e7;
}
label .hamburger:before {
top: -10px;
}
label .hamburger:after {
bottom: -10px;
}
label input:checked+.menu {
box-shadow: 0 0 0 100vw rgba(0, 128, 128), 0 0 0 100vh rgba(0, 128, 128);
border-radius: 0;
}
label input:checked+.menu .hamburger {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked+.menu .hamburger:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked+.menu .hamburger:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
visibility: hidden;
}
label input:checked+.menu+ul {
opacity: 1;
visibility: visible;
}
height: 200px;
padding-top: 40px;
background-color: rgba(0, 128, 128, 0.8);
position: relative;
}
label .menu {
position: absolute;
right: -100px;
top: -100px;
z-index: 200;
width: 180px;
height: 180px;
background-color: rgba(0, 128, 128);
border-radius: 50% 50% 50% 50%;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
box-shadow: 0 0 0 0 rgba(0, 128, 128), 0 0 0 0 rgba(0, 128, 128);
cursor: pointer;
display: inline-block;
}
label .hamburger {
position: absolute;
top: 125px;
left: 40px;
width: 30px;
height: 2px;
background: #123e68;
display: block;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* 起動ボタンの部分 */
label .hamburger:after,
label .hamburger:before {
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #69d2e7;
}
label .hamburger:before {
top: -10px;
}
label .hamburger:after {
bottom: -10px;
}
label input:checked+.menu {
box-shadow: 0 0 0 100vw rgba(0, 128, 128), 0 0 0 100vh rgba(0, 128, 128);
border-radius: 0;
}
label input:checked+.menu .hamburger {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
label input:checked+.menu .hamburger:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: 0;
}
label input:checked+.menu .hamburger:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
top: 0;
}
label ul {
z-index: 200;
position: absolute;
top: 50%;
left: 45%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition: .25s 0s ease-in-out;
transition: .25s 0s ease-in-out;
visibility: hidden;
}
label input:checked+.menu+ul {
opacity: 1;
visibility: visible;
}
コンテンツ部分が足りない場合の表示
コンテンツ部分が足りない場合、フッターが上に上がってしまうのを防ぐ。
これ↑がこう↓なる。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>きょうのくらげさん htmlCSS解説</title>
</head>
<body>
<div class="full">
<header>
メニューとか
</header>
<main>
コンテンツ
</main>
<footer>
<p><small>© きょうのくらげさん</small></p>
</footer>
</div>
</body>
</html>
CSS
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>きょうのくらげさん htmlCSS解説</title>
</head>
<body>
<div class="full">
<header>
メニューとか
</header>
<main>
コンテンツ
</main>
<footer>
<p><small>© きょうのくらげさん</small></p>
</footer>
</div>
</body>
</html>
.full {すべての要素をまとめている箱
height: 100%;
display: flex;
flex-direction: column;
}
main {
flex: auto;領域を自動調整
}
footer {
display: flex;
flex-direction: column;
margin-top: auto;上の空きを自動調整
}
height: 100%;
display: flex;
flex-direction: column;
}
main {
flex: auto;領域を自動調整
}
footer {
display: flex;
flex-direction: column;
margin-top: auto;上の空きを自動調整
}
おまけ・ファビコン
ブラウザタブに表示されるアイコン。今回はグーグルクロームに合わせてサイズを192*192にしている。小さすぎて見えない。
head要素内に入れよう。
HTML
<link rel="icon" href="/img/favicon.ico">
CSSはないので画像の概要
拡張子はico
