やりたいこと

• 画面幅が768px以下のとき、サイト内でホバーが効いているものをすべて無効化したい

ついでに調べること

• ホバーを無効化する代わりに、何かスタイルを当てたりする必要があるのか調べる

現在positionで実装しているのをflexboxでの実装に変更する

• イラストを円で囲む
• 円の線色は「設計やお見積りのご相談」で使われてる背景色と同じ

• 各コンテナー間などのmarginを揃える
• 不揃いなところの余白を調整する

発生している問題

文字と画像の重なっている部分が見づらい

スクショ

対応策

• 文字色を変える
• 画像を少し白っぽくする

リンクのデフォルトの見た目を下記の通りに変更する

• 下線無し・黒文字

ホバー時は、

• 文字色を「設計やお見積りのご相談」で使ってる背景色と同じにする
• 下線が表示されるようにする

発生している問題

画面幅に応じて画像サイズが変動している

このせいで画像が大きすぎたり小さすぎたりしている

対応策

srcsetで設定した画像の切り替えに対応させる

<img class="flex-order-sm-1"
	src="images/settings-300.png"
	alt=""
	srcset="images/settings-300.png 1500w, images/settings-200.png 768w"
	sizes="100vw" />

画面のスクショ

• 横幅1903px
  

• 横幅411px