第 6 回では、コーポレートサイト作成の練習をします。
よく用いられるページ機能を実装するため、まずは
CSS アニメーションについて学習して行きましょう。
HTML 要素に対してアニメーション(動きや変化)を与える機能の事。
ライブラリなどのインストールが不要で、軽いという特徴があります。
以下の 4 つのプロパティがあります。
・transition
・@keyframes
・animation
・transform
それぞれについて、1 つずつ解説して行きましょう。
「変化」を意味するプロパティで、以下の設定項目を含みます。
(1) transition-property ：プロパティの設定
(2) transition-duration ：時間の設定
(3) transition-timing-function ：タイミングの設定
(4) transition-delay ：開始時間の設定
(5) transition ：上記の一括指定(ショートハンド・プロパティ)
HTML 要素に対してトリガーとなる操作を割り当て、
その操作が行われた際の挙動を上記のプロパティで指定します。
次の演習でアニメーションの基礎を体験しましょう。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="../css/animation.css" />
<title>Document</title>
</head>
<body>
<div class="box1"></div>
<br />
<div class="box2"></div>
</body>
</html>
[CSS]
.box1 {
width: 100px;
height: 100px;
background: tomato;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 1s;
/*transition: all 0.5s ease 1s;*/
}
.box1:hover {
background: skyblue;
width: 500px;
}
.box2 {
width: 100px;
height: 100px;
background: palegreen;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-out;
transition-delay: 0s;
/*transition: all 0.5s ease-out 0s;*/
}
.box2:active {
background: khaki;
height: 500px;
}
キーフレームとは、プロパティを指定した経過地点の事を指します。
アニメーションの開始(0%)から終了(100%)までの任意の地点に
プロパティを指定できるため、animation プロパティと組み合わせて
細かい動きのアニメーションを実装できます。
記述例は以下になります。
@keyframes 任意の名前 {
0% {
cssプロパティ1: 値;
cssプロパティ2: 値;
}
100% {
cssプロパティ3: 値;
cssプロパティ4: 値;
}
}
@keyframes と組み合わせる事で、アニメーションを設定できます。
指定可能なものに、以下のプロパティがあります。
(1) animation-name ：@keyframes で指定した任意の名前
(2) animation-duration ：開始から終了までの時間
(3) animation-timing-function ：変化のタイミング
(4) animation-delay ：開始までの時間
(5) animation-iteration-count ：繰り返し回数
(6) animation-direction ：再生方向
(7) animation-fill-mode ：開始前と終了後のスタイル指定
(8) animation-play-state ：アニメーションの再生/停止の指定
(9) animation ：上記の一括指定(ショートハンド・プロパティ)
上記プロパティは、必要な値だけ指定すればよいです。
次の課題で実際のコードを確認しましょう。
[html]
<!--ここからは手打ち-->
<div class="box"></div>
<!--ここからはコピー-->
<script>
(() => {
"use strict";
document.querySelector("body").addEventListener("click", () => {
document.querySelectorAll(".box").forEach((box) => {
box.classList.add("moved");
});
});
})();
</script>
[CSS]
/*ここからはコピー*/
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background: skyblue;
cursor: pointer;
}
/*ここからは手打ち*/
.box.moved {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*rotate：回転の角度、scale：図形のサイズ倍率、border-radius：角の丸み*/
@keyframes spin {
0% {
transform: none;
}
50% {
transform: rotate(270deg) scale(0.8);
border-radius: 50%;
}
80% {
transform: rotate(320deg) scale(1.8);
}
100% {
transform: rotate(360deg);
}
}
マテリアルデザイン(直感的に理解しやすいよう工夫されたデザイン)や、
3D アニメーションに用いられるプロパティです。
2D(XY 方向)と 3D(XYZ 方向)のプロパティを指定する事が可能です。
transition や @keyframes と一緒に使われる事が多いです。
マテリアルデザインについては、以下の記事が分かりやすいです。
マテリアルデザインとは？
マテリアルデザインについて少し調べる
今回、transform プロパティについては紹介までに留め、
次の演習で 3D アニメーションを体験しましょう。
[html]
<div id="demo-1">
<div class="cube">
<div class="front"></div>
<div class="left"></div>
<div class="right"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
[CSS]
#demo-1 {
margin: 80px 0;
}
#demo-1 .cube {
animation: rotateCube 5s infinite linear;
height: 200px;
margin: 0 auto;
position: relative;
transform: perspective(1000px);
transform-origin: 50% 50% -100px;
transform-style: preserve-3d;
width: 200px;
}
@keyframes rotateCube {
0% {
transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}
100% {
transform: perspective(1000px) rotateX(-360deg) rotateY(-360deg);
}
}
#demo-1 .cube div {
background-color: rgba(162, 176, 206, 0.1);
border: 1px solid #a2b0ce;
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 200px;
}
#demo-1 .cube .front {
position: relative;
}
#demo-1 .cube .left {
transform: rotateY(-90deg) translate3d(-100px, 0, 100px);
}
#demo-1 .cube .right {
transform: rotateY(90deg) translate3d(100px, 0, 100px);
}
#demo-1 .cube .back {
transform: translate3d(0, 0, -200px);
}
#demo-1 .cube .top {
transform: rotateX(-90deg) translate3d(0, 100px, -100px);
}
#demo-1 .cube .bottom {
transform: rotateX(90deg) translate3d(0, -100px, -100px);
}
概ね、以下 5 つの内容が含まれています。
(1) 会社案内
(2) 製品・サービス情報
(3) お知らせ情報
(4) 採用情報
(5) 問い合わせフォーム
サイトマップの設計時は、上記の内容を軸にしてページを作成して行きます。
今回は計装エンジニアリングの HP を例題として学習を進めます。
上記の基本構成を当てはめると、以下の構造が一例となります。
TOP ├─会社案内 │ └─会社名、所在地、設立、代表取締役、資本金、沿革 │
├─お知らせ情報 │ └─★イベント紹介ページ │ ├─サービス情報 │ └─事業内容 │ ├─SES事業
│ ├─プラント関連事業 │ └─受託開発事業 │ ├─採用情報 │ └─外部サイトへのリンク │
└─問い合わせフォーム
上記の内、「イベント紹介ページ」が実際の HP には実装されて
いませんので、こちらを作成すると仮定し、ページに必要な
パーツを学習して行きましょう。
コーポレートサイトでは派手な装飾や動きの構成は少ないですが、
スペースを取らないメニューや操作を補助する機能がよく用いられます。
代表的なものについて、学習して行きましょう。
ボタンにカーソルが当たると、ボタンの表示が変わる機能です。
変化する表示は、文字やボタンの色、下線や大きさなど、
たくさんのパターンがあります。またカーソルの表示も変わる事で、
ユーザーがクリック出来る箇所を認識しやすくなります。
[html]
<a class="button1" href="#">ボタン</a>
[CSS]
.button1 {
background-color: #333;
color: #fff;
display: inline-block;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
line-height: 54px;
outline: none;
}
.button1:hover {
background-color: #59b1eb;
}
サイト内で必要なコンテンツを探していると、TOP ページから
次々と遷移して行く事になります。この時、ユーザーがどの
階層にいるのかすぐ把握できるように表示する情報を、
パンくずリストと言います。(引用元は童話ヘンゼルとグレーテル)
サイト内でコンテンツを巡回する場合、リンクは同ページで開くため、
元のページに戻れるよう、パンくずリストは必須となります。
また、国内サイトではほとんどの場合、ページ上部に設置されます。
[html]
<ul class="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://saruwakakun.com" itemprop="url">
<span itemprop="title">TOP</span>
</a>
</li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://saruwakakun.com/html-css" itemprop="url">
<span itemprop="title">お知らせ情報</span>
</a>
</li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://saruwakakun.com/html-css/basic" itemprop="url">
<span itemprop="title">第6回Web勉強会</span>
</a>
</li>
</ul>
[CSS]
.breadcrumb {
padding-left: 0;
margin-left: 0;
}
.breadcrumb li {
display: inline; /*横に並ぶように*/
list-style: none;
font-weight: bold; /*太字*/
}
.breadcrumb li:after {
/* >を表示*/
content: ">";
padding: 0 3px;
color: #555;
}
.breadcrumb li:last-child:after {
content: "";
}
.breadcrumb li a {
text-decoration: none;
color: gray; /*色*/
}
.breadcrumb li a:hover {
text-decoration: underline;
}
主に縦に開閉する、クリックで内容が表示されるメニューの事。
画面のスペースが節約できるので、スマートフォン対応画面にも
よく用いられます。
例) HP
[html]
<div class="cp_menu">
<label for="cp_menu_bar1">menu01</label>
<input type="radio" name="radio" id="cp_menu_bar1" class="accordion" />
<ul id="link1">
<li><a href="">link01</a></li>
<li><a href="">link02</a></li>
<li><a href="">link03</a></li>
<li><a href="">link04</a></li>
</ul>
<label for="cp_menu_bar2">menu02</label>
<input type="radio" name="radio" id="cp_menu_bar2" class="accordion" />
<ul id="link2">
<li><a href="">link01</a></li>
<li><a href="">link02</a></li>
<li><a href="">link03</a></li>
<li><a href="">link04</a></li>
</ul>
</div>
[CSS]
.cp_menu {
max-width: 360px;
margin: 0 auto;
padding: 0;
}
.cp_menu a {
display: block;
padding: 10px;
text-decoration: none;
color: #000000;
line-height: 1;
}
.cp_menu label {
display: block;
position: relative;
margin: 0 0 2px 0;
padding: 12px;
line-height: 1;
color: #ffffff;
background: #1b2538;
cursor: pointer;
}
.cp_menu label::before {
position: absolute;
content: "▼";
color: #ffffff;
right: 0.5em;
top: 25%;
}
.cp_menu input {
display: none;
}
.cp_menu ul {
margin: 0;
padding: 0;
background: #f4f4f4;
list-style: none;
}
.cp_menu li {
overflow-y: hidden;
max-height: 0;
transition: all 0.5s;
}
/*リストが増えたらULごとに追加してください*/
#cp_menu_bar1:checked ~ #link1 li,
#cp_menu_bar2:checked ~ #link2 li {
max-height: 46px;
opacity: 1;
}
通称「ハンバーガーメニュー」と呼ばれる機能で、3 本の横線が
縦に並んだアイコンが特徴です。アイコンをクリックすると、
縦長のメニューが横からスライドして表示されます。
コンテンツのスペースを節約出来るため、スマートフォン対応
画面や動画サイト等で利用されています。
例) Youtube
[html]
<input id="drawer-checkbox" type="checkbox" />
<label id="drawer-icon" for="drawer-checkbox"><span></span></label>
<label id="drawer-close" for="drawer-checkbox"></label>
<div id="drawer-content">ここがドロワーとして出てくる部分です。</div>
[CSS]
#drawer-checkbox {
display: none;
}
#drawer-icon {
cursor: pointer;
display: inline-block;
height: 50px;
position: relative;
width: 50px;
}
#drawer-icon span {
background: #333;
border-radius: 4px;
display: block;
height: 16%;
left: 50%;
margin: -8% 0 0 -42%;
position: absolute;
top: 50%;
transition: all 0.3s ease-in-out;
width: 84%;
}
#drawer-icon span::before,
#drawer-icon span::after {
-webkit-transform: rotate(0);
background: #333;
border-radius: 4px;
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -50%;
position: absolute;
top: 50%;
transform: rotate(0);
transition: all 0.3s ease-in-out;
width: 100%;
}
#drawer-icon span::before {
margin-top: -38%;
}
#drawer-icon span::after {
margin-top: 19%;
}
#drawer-checkbox:checked ~ #drawer-icon span {
background: rgba(51, 51, 51, 0);
}
#drawer-checkbox:checked ~ #drawer-icon span::before,
#drawer-checkbox:checked ~ #drawer-icon span::after {
content: "";
display: block;
height: 100%;
left: 50%;
margin: -8% 0 0 -42%;
position: absolute;
top: 50%;
width: 100%;
}
#drawer-checkbox:checked ~ #drawer-icon span::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#drawer-checkbox:checked ~ #drawer-icon span::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#drawer-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 40;
width: 250px;
max-width: 90%;
height: 100%;
background: #fff;
transition: all 0.3s ease-in-out 0s;
transform: translateX(-100%);
}
#drawer-checkbox:checked ~ #drawer-content {
transform: translateX(0);
box-shadow: 6px 0 25px rgba(0, 0, 0, 0.16);
}
#drawer-close {
display: none;
position: fixed;
z-index: 39;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: all 0.3s ease-in-out 0s;
}
#drawer-checkbox:checked ~ #drawer-close {
display: block;
opacity: 0.3;
}
元々は画面操作時に出現する警告ウインドウの機能で、
ウインドウが閉じられるまで他の操作が制限されます。
モーダルは「モードを持つ」という意味で、画面操作の入力
モードを保持している事を示しています。
警告以外に、コンテンツの詳細を表示する用途でも利用されます。
[html]
<input id="modal-checkbox" type="checkbox" />
<label id="modal-open" for="modal-checkbox">モーダルを開く</label>
<label id="modal-close" for="modal-checkbox"></label>
<div id="modal-content">ここがモーダルとして表示される部分です。</div>
[CSS]
#modal-checkbox {
display: none;
}
#modal-open {
cursor: pointer;
display: inline-block;
position: relative;
}
#modal-content {
overflow: auto;
position: fixed;
top: 50%;
left: 50%;
z-index: 40;
background: #fff;
transition: all 0.3s ease-in-out 0s;
transform: translate(-50%, -50%);
opacity: 0;
box-shadow: 0 0 24px rgba(0, 0, 0, 0.16);
padding: 1em;
}
#modal-checkbox:checked ~ #modal-content {
opacity: 1;
}
#modal-close {
display: none;
position: fixed;
z-index: 39;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
transition: all 0.3s ease-in-out 0s;
}
#modal-checkbox:checked ~ #modal-close {
display: block;
opacity: 0.6;
}
画像などのコンテンツをスライドさせて表示する機能です。
1 周してコンテンツが元に戻る事から、カルーセル(回転木馬)
とも呼ばれます。表示コンテンツが多い Web ページで利用されます。
例) Amazon
[html]
<div class="carousel-wrapper">
<span id="item-1"></span>
<span id="item-2"></span>
<span id="item-3"></span>
<div class="carousel-item item-1">
<h2>Item 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus accumsan
pretium dolor vel convallis. Aliquam erat volutpat. Maecenas lacus nunc,
imperdiet sed mi et, finibus suscipit mi.
</p>
<a class="arrow arrow-prev" href="#item-3"></a>
<a class="arrow arrow-next" href="#item-2"></a>
</div>
<div class="carousel-item item-2">
<h2>Item 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus accumsan
pretium dolor vel convallis. Aliquam erat volutpat.
</p>
<a class="arrow arrow-prev" href="#item-1"></a>
<a class="arrow arrow-next" href="#item-3"></a>
</div>
<div class="carousel-item item-3">
<h2>Item 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus accumsan
pretium dolor vel convallis. Aliquam erat volutpat.
</p>
<a class="arrow arrow-prev" href="#item-2"></a>
<a class="arrow arrow-next" href="#item-1"></a>
</div>
</div>
[CSS]
.carousel-wrapper{
height:400px;
position:relative;
width:800px;
margin:0 auto;
}
.carousel-item{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
padding:25px 50px;
opacity:0;
transition: all 0.5s ease-in-out;
}
.arrow{
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 12px;
}
.arrow-prev{
left:-30px;
position:absolute;
top:50%;
transform:translateY(-50%) rotate(135deg);
}
.arrow-next{
right:-30px;
position:absolute;
top:50%;
transform:translateY(-50%) rotate(-45deg);
}
.light{
color:white;
}
@media (max-width: 480px) {
.arrow, .light .arrow {
background-size: 10px;
background-position: 10px 50%;
}
}
}
/*Select every element*/
[id^="item"] {
display: none;
}
.item-1 {
z-index: 2;
opacity: 1;
background:url('https://static.pexels.com/photos/6526/sea-beach-holiday-vacation-large.jpg');
background-size:cover;
}
.item-2{
background:url('https://static.pexels.com/photos/6506/alcohol-bar-drinks-party-large.jpg');
background-size:cover;
}
.item-3{
background:url('https://static.pexels.com/photos/6529/lake-kajak-kayak-large.jpg');
background-size:cover;
}
*:target ~ .item-1 {
opacity: 0;
}
#item-1:target ~ .item-1 {
opacity: 1;
}
#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
}
Web 系勉強会の午前の部、お疲れ様でした。
全 6 回を通して HTML と CSS の基礎から応用まで学習して来ました。
全体像やキーワードを学べるよう、テキスト作成に努めて
参りましたが、まだまだ学習量としては物足りない状態です。
そのため、今後も Web 系の学習を進める際の有用なサイトや、
学習方法を紹介して終わりたいと思います。
・リファレンスサイトである「MDN」を体系的にまとめた記事。
・「テクノロジー」の項目より下のチュートリアルから読み進める。
・内容は堅いが、基礎の理解に繋がる。
▶リンク
・メディア団体「東京フリーランス」が公開している学習課題。
・元は Twitter のハッシュタグ企画をまとめたもの。
・30 日間を目安に、テーマ別に学習課題が紹介されている。
▶リンク
・デザインをテーマにした学習サイト。
・HTML や CSS、デザインツールの題材が多い。
・無料
▶リンク
・解説のスライドとオンラインエディタでコードを学習する。
・環境設定が一切不要。 ・初心者向けに丁寧に作られている。
・無料と有料のコンテンツがあり、有料会員は 月額 980 円
▶リンク
・動画学習サイト。
・1 コース当たり 10 ～ 20 程度の動画で構成(1 本あたり 2 ～ 3 分)
・基礎的な部分は把握している前提の解説が多い。
・言語やフレームワークなど、コンテンツの幅が広い。
・無料と有料のコンテンツがあり、有料会員は 月額 980 円
▶リンク
・有料の動画学習サイト。 ・上記 2 サイトとは異なり、コース毎に購入する。
・1 つのテーマに集中して学習したい場合に向いている。
・90% OFF セールが頻発するので、それを待って購入するように。
▶リンク
▶サルワカ