うにょママ 
Day17：マウスホバー時の動きを付ける
ホバーの基本的ルール
メニューは『現在のページ＋ホバーしてるメニュー』にスタイルを付ける
ホバー時のアクションに指定がないときは透過する
アクション要素にはホバーアニメーションを付与する
transitionプロパティ
transitionは「時間的変化」を表現するCSSプロパティ。
アニメーションをつけた時にどれぐらいのスピードでどれぐらい時間をかけるか指定できる。
| 値 | 説明 |
|---|---|
| ease | 開始と完了を滑らかにする |
| linear | 一定 |
| ease-in | ゆっくり始まる |
| ease-out | ゆっくり終わる |
| ease-in-out | ゆっくり始まってゆっくり終わる |
transformプロパティ
transformは「変形」させるためのCSSプロパティ。
- 移動(translate、translateX、translateY、translateZ、translate3d）
- 縮尺(scale、scaleX、scaleY、scaleZ、scale3d)
- 回転(rotate、rotateX、rotateY、rotateZ、rotate3d)
- 傾斜(skew、skewX、skewY)
- 遠近効果(perspective ※rotateと組み合わせて使う)
など、色々な変形をさせることができる
Day18 Webフォント、デバイスフォントを理解する
font-familyに複数のフォントを書く理由
Windowsなのか、Macなのか、iPhone/iPadなのかで搭載されているフォントが違うから。
Macにしか入っていないフォントを指定しても、Windowsパソコンからはそのフォントでウェブページを見れない。
だから複数のフォントを書いて対応する。
記載する順番の意味
複数のフォントのうち、前に書かれたものから優先的に適用される。
英語フォントを前に書く
英語だけを表示できる「英語フォント」と、英語＋日本語を表示できる「日本語フォント」がある。
font-familyを書くときは、基本的に英語フォントは前に書く。
そうすればアルファベットには英語フォントで、日本語の文字には日本語フォントが使われる。
もしアルファベットも日本語フォントで表示したいときは、日本語フォントを前に書けば良い。
総称フォントファミリー名を書く
総称フォントファミリー名(どの系統のフォントか)をfont-familyの一番最後に書く。
ページを開いたパソコンに指定したフォントが全く入っていなかった場合に対応するため。
【総称ファミリー名】
- sans-serif : ゴシック体フォント
- serif : 明朝体フォント
- monospace : 等幅系フォント
- cursive : 筆記体系フォント
- fantasy : 装飾系フォント
Googleフォント
完全無料でWebフォントを使用できる。
Googleフォントを使うとどのデバイスでも同じ文字を表示できる。
日本語はひらがな・カタカナに加えて無数の「漢字」まで読み込むので表示速度が多少遅くなる。
表示速度を少しでも早くしたい場合は、日本語は通常のフォント、アルファベットだけWebフォントという指定もあり。
Chrome拡張機能「WhatFont」
「WhatFont」はWEBサイトのフォントを簡単に調べることができるChrome拡張機能。
参考サイトで使われているフォントを調べたり、制作中のサイトに正しくフォントが適応されているかチェックできる。
雰囲気に合ったフォントを試しながら探せる「TypeSquare」
Webフォント配信サービス TypeSquare。
トライアウトからサイトのURLを入力すると、いろんなフォントを試しながら、再作中のサイトの雰囲気にあったフォントを探せる。
公式サイト→TypeSquare
フォントファミリーは変数管理しておく
フォントファミリーは、仮のフォントで適応することが多かったり、あとから修正が発生しやすい部分。
なのでSassの変数で管理しておくと修正時に非常に便利。
Day19 コーディング後の品質を担保するテスト
納品前に確認必須の6項目
- W3Cチェック（HTML、CSS）
- 見出し構造が不自然ではないか
- altが正しく設定されているか
- 閉じタグチェック
- 水平スクロールしないか
- Chrome、Firefox、IE、Safari、Edgeで表示崩れが起きていないか
完成度の高い状態で納品するためにコーディング後のチェックは超重要！！
※他にも誤字脱字、フォント、色、リンク切れがないか等の確認をする
W3Cチェック（HTML、CSS）
W3CはWebに関する技術を標準化する機関。HTMLやCSSの標準規格を決めている。
W3Cの規格に沿っていれば「書き方としては正しい」ということになる。
見出し構造が不自然ではないか
見出し構造の指示は基本ない。見出しをどう設定するかの裁量は完全にコーダーに委ねられてる。
ブックマークレットで見出し構造を確認する。
altが正しく設定されているか
画像のaltも基本的に指定はされない。コーダーが自分の判断により記述する。
ロゴ画像や文字が書いてあるバナーは必須。altを記述してGoogleが読み込めるようにしておく。
alt属性自体の記述が無いと、nullと表示される。alt属性はあって、値が空だと何も表示されない。
Crome拡張機能の「Alt & Meta viewer」またはalt属性を確認するブックマークレットで確認する。
閉じタグチェック
HTMLの閉じタグが足りなかったり多すぎたりしないかチェックする。
Crome拡張機能の「HTMLエラーチェッカー」で確認する。
水平スクロールしないか
目視で確認する。
スマホサイズ(320px)、タブレットサイズ(786px)で水平スクロールが発生しないか見ておく。
Chrome、Firefox、IE、Safari、Edgeで表示崩れが起きていないか
日本で利用されているTOP5のブラウザでデザイン崩れが起きていないか、目視で確認しておく。
まとめ
フォント指定の意味などを改めて学習し、よく理解できました！
制作サイトの最終チェック方法の知識は実際に仕事を始めた時にとても役立つと思います。
デイトラはやはり実践よりの勉強ができますね。
中級編も中盤、中だるみしないように気合入れなおして挑みたいと思います！！