昨日は記事執筆中に寝てしまったので今日は二本立て。
学習内容
[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門 セクション3まで完了。
レスポンシブWebデザインについて学んだ。
CSS
メディアクエリ
@mediaonlyscreenand(max-width:600px){}記述された条件下になると{}内のCSSが適用される様になる。上記の場合だと画面のピクセル幅が600ピクセル以下の場合。only screenとすると古いブラウザでの誤作動を防ぐことが出来るらしい。
width:inherit;幅を親の要素に合わせる事が出来る。今回は下線を端まで伸ばす為に用いた。
最大幅
max-width:800px;画面幅が800ピクセル以上ある時は800ピクセルを維持、それ未満の時はそれに合わせて伸縮するという設定。
不透明度
opacity:任意任意の数値を入力する事で透明度を変えられる。
アニメーション
transition-property:opacity;transition-duration:1s;transition-timing-function:ease;transition-delay:0s;上記の場合はopacityに対してこういうアニメーションをかけるというもの。durationは実行時間、timing-functionは徐々に早く遅くなどの効果、delayは開始タイミングを表す。
疑似クラス
今回はhoverを使用した。マウスカーソルを合わせると効果が発生する。
種類は多岐に渡るそう。
所感
写経ミスもあり途中手本通りの動作がされなかったりエラー部分を探して修正しなければならなかった分時間がかかってしまった。
ミスってしまうのは仕方のない事ではあるのでスムーズな対処法を身につけていきたい。