ひとつ前のエントリーでチャプターのタイムスタンプをリストアップしましたが、今回は初出の情報をピンポイントでピックアップしていきます。もう出てきている情報もあると思いますがあしからず。
目次
00:58 メディアクエリタグでの囲み方
⇨flexboxの記述など、PCでしか使われない部分を@mq(‘md’)に格納していく。
24:07 &の後にセレクタを書く指定方法
⇨セレクタとセレクタの間に空白を空けて対象を絞り込む指定方法
28:55 transitionのショートハンドの書き方
⇨「何」を何秒変えるか、の「何」の部分を指定するのを忘れないこと。意図しない部分にまで影響が及ぶのを防ぐ。
30:40 :not()擬似クラスの使い方
⇨-submitのクラスを持った要素のみホバーで色が変わらないようにする。
31:37 transform scale(),overflow: hidden;の組み合わせで作るブログカードの画像部分
⇨ホバーすると画像が拡大される効果をつける。固定幅に画像を収めつつ拡大させるためoverflow: hidden;をつける。
34:20 バラバラなサイズの画像が来ても同じ画角にする方法(padding-topハック)
⇨前も出てきましたが大事な事なので何回でも書きます。笑 「720(高さ) ÷ 1280(幅) × 100」で割り出したパーセンテージを、リキッドにしたい画像の親要素のパディングトップに指定します。
37:55 transformの書き方に注意
書いた順に実行されるため、順番が大切です。以下のページが詳しいです。
https://qiita.com/7note/items/f0eedc0e33677c2e5758
次は総復習編のラスボス、コンタクトフォームです。
コメント