html,cssコーディングでの細かい疑問を解決しよう

実際に業務で使用した解決方法を、自身の振り返り用としても、同じような対応を行いたい人にも利用していただけるよう記録しておく。

cssでの修正

1. 背景色付きのテキストを改行しても左右のpaddingを保持したい場合
   解決に用いた参考サイト

2. CSSで要素を中央寄せしたい場合
   解決に用いた参考サイト

3. メディアクエリをよりスマートに記述したい場合
   解決に用いた参考サイト
   ・「未満」や「より大きい」の表現ができる
   ・記述を短くできる

jsでの修正

1. スクロールでのフェードインをjsで実装したい場合
   解決に用いた参考サイト

2. ローディング画面を実装したい場合
   表示するロゴや文字、秒数や色などで実装方法は異なりますが、下記参考サイトの組み合わせで実装しました。

   1. 画像の表示非表示をjsで切り替える
      解決に用いた参考サイト1

   2. 待機処理をしたい場合のsetTimeout関数について
      解決に用いた参考サイト2
      解決に用いた参考サイト3
      解決に用いた参考サイト4

3. iOSでsafariのみ一部javascriptが実行されない場合
   原因解明に用いた参考サイト1

   ※ iOS9.0でアニメーション動かない場合の対処方法
   ・let→varにする
   ・addEventListener(scrollの前後でconsole.log(slideInTarget[i].getBoundingClientRect().top)を実施
   →値が取れているかを判断する
   ・for文の外に発火要因（scroll）を持ってくる

4. スライダーにおいて、画像を連動してスライドさせたい場合
   解決に用いた参考サイト1
   解決に用いた参考サイト2
   ・上記のサイトには様々なスライダーの記述方がまとめてあります

---

※簡易的なjsの実装において参考にしたサイト

---

以上のように、コーディングを進めていくなかで様々な種類の修正が発生する。人によって対処法は異なるが、できるだけ早く、スマートなコーディングができるようにしたい。