デイトラWeb制作コース中級編DAY30〜32 中級総復習編⑥CSSのコーディング(SP)

ひとつ前のエントリーでチャプターのタイムスタンプをリストアップしましたが、今回は初出の情報をピンポイントでピックアップしていきます。もう出てきている情報もあると思いますがあしからず。

目次

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

次は総復習編のラスボス、コンタクトフォームです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次