こんにちは、アルパカ（@engineeraru）です。
デイトラのWeb制作コース中級編『実務でよく使うアニメーションの付け方編』を学習するときに役立つ情報をまとめました。
目次
デイトラ Web制作コース中級編『実務でよく使うアニメーションの付け方編』の学習記録
【DAY17】マウスホバー時の動きをつける
POINT
アニメーションの種類を把握する
私同様に英語が苦手で、迷う人のために、transitionとtransformの覚え方を簡単に書きました。
覚え方は「 trans+～～」
英語の接頭辞「trans」は「向こう側へ」とか「変換」という意味ですね。
この後に付いた言葉によって単語が作られていますね
- 【Transition】→ it「行く」-ion「こと、もの」 →推移、遷移
- 【Transform】→ form「形」 →変形する
受験勉強の英語みたいですが、こうやって覚えると忘れづらいですｗ
transitionとtransformの整理
個人的に間違えそうなのが「transition＝動的＝hover側に書く」と思ってしまうこと
- transition：動的 / 動かし方 / 通常クラスに書く
- transform：静的 / 変形のやり方 / hover側に書く
やっているうちに慣れるはず…
transitionとは何か？CSSアニメーションについて
そもそもtransitionとは何か？
「CSSアニメーション」という機能の1つのようです。
CSSアニメーションは、JavaScriptを使わずに、アニメーション（動き）を実装できるので「手軽」＆「システム負荷が少ない」なのが特徴です。
ちなみにCSSアニメーションは2つしか無くて
- Transition→簡単な動きを作れる！
- Animation→複雑な動きも作れる！
という感じです。
とりあえずTransition覚えておけば良さそうですね。
※transitionで設定できないような細かなアニメーションを設定したいなら「Animation」を使えばいいということですね
このスライドが分かりやすかったです。
transitionのトリガー
今回使ったのは「:hover」だけでしたが、transitionのトリガー（変化のキッカケ）は他にもあります。
- :hover → マウスオン
- :active → リンクをクリック中
- :target → ページ内リンク
- :focus → フォーカス時（inputなど）
- :checked → チェック時（CheckBox, RadioButtonなど）
こちらも「こういう部分も変更できるんだ」と知っておくと、いつか役に立つかもなあ、という程度です。
【DAY18】Webフォント、デバイスフォントを理解する
POINT
フォントの全体像を理解する
WEBページのフォントの種類
まず、フォントについての全体像を理解していなかったので、学びました。
Webページを表示する時に「文字を表示」したい。
→文字を表現するための方法が2つある。
それが、HTMLフォントと画像フォントです。
※厳密には「画像フォント」という言葉ではないかも…
イメージ的には
- HTMLフォントはテキストデータ
- 画像フォントは画像ファイルで作られたデータ
って感じ。
で、HTMLフォントの中の種類としても、デバイスフォントとWEBフォントの2つがあります。
この2つは「データの置き場所」が違います。
デバイスフォントは文字通り「PC」や「スマホ」の中にあるフォント。
一方でWEBフォントは、「WEB上（どこかのサーバ）」にあるフォントです。
一方で画像フォントとはどんなものか？
「HELLO」という文字を表示する時に「H」「E」「L」「O」の4つの画像を組み合わせて、表示するような仕組みです。
HTMLフォント（デバイスフォント、WEBフォント）と画像フォント
ということで、
- デバイスフォント（デバイス内にある）
- WEBフォント（WEB上のどこかにある）
- 画像フォント
と整理できますね。
使い分けに関しては、WEBページを表示する時のコンピュータの気持ちに立って考えると、わかりやすいと思います
- デバイスフォント→デバイス内にあるので持ってくるのが楽。表示もただの文字だから楽
- WEBフォント→WEB上からいちいち持ってくるから面倒。表示はただの文字だから楽
- 画像フォント→WEB上から画像を持ってくるのは面倒。表示も画像だから重たいし面倒
という感じ。
画像フォントは「ここぞ」という所で使われている印象です（ページのファーストビューの目立たたせたい文言とか）
WEBフォントの中の1つがGoogleフォント
「Googleフォント」はWEBフォントの1つです。
- デバイスフォント
- WEBフォント ※Googleフォントも含む
- 画像フォント
Googleが用意したサーバー（遠くにあるコンピュータ）からフォントデータを持ってきます。
こういう全体像を把握しておけば、後はその名詞を使ってググればOKですね。
下記の記事も見ておくと良いかもです！！
復習用に読むべき記事
【DAY19】コーディング後の品質を担保するテスト
POINT
用語をしっかり理解する
品質保証、テストに関する用語の確認です。
W3Cとは？
W3Cとは、WEB関連のルールを決める団体です。
HTML、CSSのルールも彼らが決めています
※例えば「どういうタグを使うと、ウェブブラウザでどう表示するか」とか
正式名称は「World Wide Web Consortium」。WWWで用いられる技術の標準化、相互運用性の確保を目的とする団体です。HTML、URI、XML等の技術もW3Cで標準化されました。
1994年10月に発足し、現在はマサチューセッツ工科大学計算機科学研究所（MIT／LCS）、慶應義塾大学、欧州情報処理数学研究コンソーシアム（ERCIM）がホスト機関として共同運営しています。世界各国のベンダー、プロバイダ、研究機関、政府など、約450の組織が会員として活動に参加しています。
Validation（バリデーション）は2種類ある
Validation（バリデーション）という言葉は、プログラミング（テスト）をやっているとよく聞く言葉ですので、覚えておくと良いです。
文脈によって使われ方が違うのですが、
「ルールに沿っているか確認すること」
あるいは
「ユーザが何かを入力した時の内容をチェックすること」
です。
【バリデーション1】ルールに沿っているか確認すること
今回使ったW3Cチェックツールは前者ですね。
W3Cのルールに沿っているか確認するものでした。
【バリデーション2】ユーザが何かを入力した時の内容をチェックすること
前者の「ルールに沿っているか確認する」の延長線上の考え方として、後者の「ユーザが何かを入力した時の内容をチェックすること」があります。
以下の内容は今回の品質担保には関係ないと思いますが、知識として覚えておくと良いと思います！😃
プログラミング言語（JavaScript、PHP、Pythonとか）の時に使う「バリデーション」という言葉はこちらを指すことが多いです。
例えば、何らかの入力をした時に、使ってはいけない文字をチェックする…みたいな話です。
HTMLで考えると、フォーム（ユーザ入力欄）にバリデーションを入れるべきです。
例えば、メールアドレス欄に「@も入っていないただの文章」を入れられても困りますよね。
なので、ユーザ入力に対して「入力した内容が問題ないか」を確認するための処理（バリデーション）を入れます。
＞参考：HTML5のバリデーション
画像のAltは設定しておきましょう（SEO的にも）
画像のAlt属性（オルト属性）は設定が必要です。
「Alternative」＝「代替」という意味ですね。
検索エンジンは画像の中身を理解していないので、「この画像は○○だよ」と伝えるために必要です。
※あと、視覚障害者の方がサイトを読む時にも使われます。サイト内の情報をテキストで読み上げるので、Altに書かれた内容が読み上げられます
Googleの公式サイトではこのように書かれています。
悪い例（代替テキストがない）: <img src=”puppy.jpg” alt=””/>
悪い例（キーワードの乱用）: <img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>
良い例: <img src=”puppy.jpg” alt=”puppy”/>
最も良い例: <img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”/>
例えば、犬の画像なら「子犬」と書くべき。
更に言うならば「ダルメシアン子犬のフェッチ」とまで書くべきです。
今回の「WEBコーディング」ではマストではありませんが、SEO的には必要になりますね。
【DAY20】スライダー（カルーセル）を作る
POINT
ライブラリの使い方を理解する
スライダーとカルーセルの定義の確認
スライダー、カルーセルはほぼ同じ意味で使われることが多いようです。
一応、言葉の定義を確認しておきます。
スライダーは厳密には、現在位置を表す印のことらしいです
※厳密さにこだわってお客さんと話す必要はないと思いますけどね
現在位置を表す印をスライダー、スライダーが移動できる棒状の領域をスライダーバー（slider bar）
スライダーバーは、ウィンドウの表示領域を指し示すものはスクロールバー（scroll bar）とも呼ばれる
カルーセルは「回転木馬」という英単語です。
右端と左端が繋がっているので、裏側で「回転している」ということですね
コンピュータの操作画面を構成する要素の一つで、写真など複数の項目が横に並んでおり、これをマウスやタッチ操作で左右にスライドして項目を入れ替えることができる表示領域をカルーセルという。
アローボタン、アローアイコン
アローボタン、アローアイコンについては、はにわまんさんの記事が参考になります。
以下のようなものが「アローアイコン」ですね
- ▶
- →
- ＞
そのアイコンを使っているものが「アローボタン」という解釈で良いと思います
CSSで表現できるボタンの基本パターン（※ Font Awesomeを使うものもあり） | HPcode
ページネーション
ページネーション（ページ割り）は
- 内容の多いページを複数のページに分割する
- 各ページ間をつなげるためのリンクを設置する
ことで実現できます。
Googleの検索結果もページネーションが使われていますね
- 検索結果を10ページごと に分ける
- 検索結果の一番下で別ページ（例：検索結果2ページ目）へのリンクを設置する
という感じ！
ライブラリのちょっとした解説【Swiper】
「ライブラリを初めて使う＆何やっているか分からない」という人向けに簡単な解説をします。
</body>の直前に<script src=”~~/swiper.js”>を書かない理由は？
今まで、progateなどでも</body>の前に<script src=”~~.js”>を書くように！
と言われていました。
今回は、</body>の直前ではなく、JavaScriptの処理の前に書いていました。
↓
<body>
<script src=“dist/js/swiper.js”></script>
<script> var swiper = （省略）; </script>
</body>
これは、 src=“dist/js/swiper.js”でライブラリを読込をして、それからライブラリを使っているからです。
JavaScriptは上から順番に処理が読まれるので、先に「このライブラリを使いますよ」と言う必要があります。
new Swiperって何？
「new Swiper」という書き方は、まだ学んでいない気がします（多分）。
とりあえずは、Swiperの初期設定をしているんだなーという理解でOKです。
色々と細かく書かれていますが、
var swiper = new Swiper( 省略 );
という記述で、スライドショーの設定をしているだけです。
Swiperの中身の記述は？
Swiperの中身の記述については、大きく分けると2つのことをやっているだけです
- 【A】swiperを適用するクラスを指定する
- 【B】オプションを使って、挙動を設定する
簡略化して書くと以下のように、Swiperに2つの引数（A、B）を与えています。
var swiper = new Swiper( ‘【A】クラスの指定’, {【B】オプション処理} );
swiperを適用するクラスの指定は？
前者の【A】swiperを適用するクラスの指定では、
‘.swiper-container’
という風に書いています。
これは、HTMLで事前に定義しているクラスですね。
この「swiper-container」というクラスを対象にするよ！ということ。
swiperのオプション設定は？
【B】のオプション設定が分かりづらいです。
まずオプション設定は、2つ目の引数として、連想配列を使っています。
※連想配列は「KeyとValueの組み合わせ」が集まったものです。
なので、書き方は 中括弧{} になっています。
以下の赤い部分ですね。
new Swiper( ‘【A】クラスの指定’, {【B】オプション処理} );
あとは、連想配列の書き方に沿って
Key1 : Value1,
Key2 : Value2,
Key3 : Value3,
と書いていけばOKです。
例えば、
loop: true,
speed: 100,
autoHeight: true,
みたいな感じです。
ここで、分かりづらくしているのがKey「navigation」です。
これも結局はKeyとValueの組み合わせです。
しかし「loop : true」などと違うのは、Valueが連想配列である点です。
よく見ると分かりますが
navigation : { }
という形で、Value部分が連想配列（中括弧{}）になっています。
ということで、骨組みとしては
navigation : { nextEl: ~~, prevEl: ~~ },
loop: true,
speed: 100,
となっています。
…以上のような感じで、やっていることの骨組みがつかめることが重要かと思います。
あとは、ドキュメントを読みつつ、何か設定したい値があればそれを設定すれば大丈夫です。
英語で読むこと＆書き方に慣れるのは、ある程度慣れが必要なので、最初のうちは、皆うまくいかないと思います…！
復習用に読むべき記事
【DAY21】スクロールで「フワッ」とさせる
POINT
ライブラリを読み込んで使うだけ
Wowの使い方
アニメーション用のライブラリWowを使うと、かなり簡単に「フワッ」と表示できました。
- GitHubからダウンロード
- ライブラリ読込
- Wowの設定をする
- Wowを実行する記述を書く（Init)
という方法でOKでした。
ライブラリの使い方に慣れたら簡単に出来ると思います。
アニメーションについては、色々な種類があるので、ホームページを見てみるのがオススメ
MITライセンスとは？
MITライセンス（エムアイティーライセンス）は、オープンソースソフトウェアのライセンスのひとつ。
特徴は以下の通り
- 無料
- ほぼ自由に使える（制限がほんの少し）
- 改変、再配布、商用利用、有料販売できる
- 著作権表示 & MITライセンスの全文記載が必要
自由に使っていいけど、しっかり「MITライセンス」」だいうことは書く必要があります。
また、このソフトを使って出た問題は、ソフトウェア作成者は一切関与しないよ！というもの。
この辺りは実際の仕事になると非常にシビアな部分なので、しっかり理解しておくと良いと思います。
復習用に読むべき記事
- MITライセンスを1行1行読んでいく ※詳しいけど難しい…
【DAY22】スマホ時のドロワーメニューを作る
POINT
ライブラリを使えばOK!
そもそもドロワーメニューとは？
そもそもドロワーメニューとはなにか？
ページ端っこにある「3本線（2本線）のアイコン」を押すと、ぬるっと出てくるメニューのことです。
英単語の「ドロワー（drawer）」とは「引き出し」という意味。
※名前の由来は「引き出しのように出し入れできる」ことっぽい
【余談】ハンバーガーメニュー、ハンバーガーボタン
ちなみに、3本線のアイコンは「ハンバーガーボタン（アイコン）」や「ハンバーガーメニュー」と呼ばれることも多いようです。
- バンズ（パン）
- ハンバーグ
- バンズ（パン）
の3層構造から来ているっぽい？
ボタンだと気づかない人も多そうなので、私はあまり好きではないですけど…
復習用に読むべき記事
【DAY23】スムーススクロール&フローティングアイテム
POINT
jQueryで躓かないようにする
指示されたとおりにやればOKですが、JavaScriptの理解に少し躓くかもです。
三項演算子
let target = jQuery(“#” == id ? “html” : id);
例えばこちらのソースコードの赤字部分は、三項演算子と呼ばれるものです。
これの意味しているところは、
- “#” と idが同じなら、”html”を返す
- “#” と idが同じじゃないなら、idを返す
というもの。
条件分岐のIf文などを使っても書けますが、こういう書き方をしたら一文なのでスマートですよね。
詳しくはMDNの説明を見てもらえればOKです。
※こういった「用語」を知っていれば、自力でググれるはず！
【DAY24】クリックで下線を引く（イベント処理）
POINT
イベント処理をマスターする！
ちょっと分かりづらいところを解説します。
- ホバー : カーソルを乗せているときだけ下線が引かれる
- クリックイベント : クリック後、下線が引かれたまま
という理解で良いはずです(多分)
ここはそんなに難しくないはずなので、語ることがないですw
【DAY25】Q and Aをアコーディオンでコーディング
POINT
ライブラリに頼らず自力でまず作る
アコーディオンは、ナビゲーションメニューの一種です。
項目のクリックやマウスオーバーで詳細を表示する(展開表示する)ような動きをします。
少ないスペースに情報を詰め込めるので、テキスト分量が多いときなどに便利ですね。
※当然ながら楽器の「アコーディオン」が元になっているはず
この課題もココまで来た人なら、問題なく出来るはず😊
【DAY26】モーダルを作る
POINT
data()関数を使いこなす
ここまで課題を進めてきた方には、お伝えできることがもうほとんどありませんw
一応、私がやっていて忘れていた「基本的なところ」を紹介だけしますね。
モーダルとは？
一応復習です。
モーダルは前面にポップアップしてくるウィンドウです。
元々の画面を「親ウィンドウ」として、ポップアップして出てくる画面が「子ウィンドウ」ですね。
この時の注意点は「子ウィンドウが閉じるまで、親ウィンドウの操作が出来ない」ことです。
ただ単に小さな画面を表示するだけではなく「子ウィンドウ以外の場所で操作を受け付けないようにする」処理も組み込むことに注意しましょう！
※子ウィンドウが開いていても、親ウィンドウが操作できる場合は「モーダレス」と言います
z-index
今さらながらの確認ですが、z-indexは「画面の手前 / 奥」を指定する方法です。
手前に表示する画面を設定するときは通常よりも「画面の手前」に表示しなければなりません。
初期値は0( or 親要素と同じ)で、取れる値は以下の通り
- 最小値：-2147483647
- 最大値：2147483647
プラスだけじゃなく、マイナス方面にも指定できます。
気になるのが業務のときにどういう値を指定するかなのですが、こちらのQ&Aを見るとテキトーっぽいですw
適当です、すいません。
通常はz-index自体、ほとんど使いません。
ポップアップウィンドウやダイアログなんかで使うことがありますが、大抵はライブラリ任せです。
自前で使うときは「絶対に上に表示してほしい」って時なので、65530～あたりを使います。
でも、本当に使うことはほとんありません。
チームとして働くときには、その場のルールに従えば良いだけ。あまり深く考えなくても良さそうです。
あと、data属性はdata属性をjQueryで使ってみるのサンプルがわかりやすかったです。
デイトラ Web制作コース初級編『実務でよく使うアニメーションの付け方編』まとめ
DAY21くらいまでできれば、かなりの事ができますね！
あとは、ライブラリを呼び出す方法さえわかれば、だいたいのことが出来る気がします。
下記の記事が個人的には理解するのに役立ちました。
以上、アルパカ(@engineeraru)でした。
役立つ情報まとめ 
【Web制作】学習に役立つサイト・記事・本まとめ【HTML&CSS編】