【レスポンシブに購入ボタンを配置するベストな方法】
ランディングページの購入ボタンとか、
ネットショップのカートボタンとか、
「画像の上のちょうどこの場所に配置したい」
ですよね?
ここはもうデザインでそう決めてあるわけですから、
1pxもずれないように配置したいものです。
でも、pxで場所を設定してしまうと、
スマホで見たときにボタンの位置がついてこないので
ずれてしまいます。
そんな場合は、pxを%に換算した数値を
CSSで指定するというアプローチが有効です。
タグの位置は、CSSの top や left プロパティに
数値で指定をしますが、単位を%にすると、
画面の横幅(正確にはタグを囲むタグの横幅)
に対するパーセンテージという意味になります。
だから、パソコンで見たときに px で指定するのと
同じ場所になるように%に換算しておけば、
そのままスマホで見ても同じ位置がキープされます。
「どうやって換算するの?」
と思われるかも知れませんが、
難しい理論とか計算式なんて一切いりません。
添付画像のような、「パーセント電卓」とか
「換算ツール」とか、「比例計算」なんて
小難しい面倒なこと一切いらない方法です。
それは
『ディベロッパーツールを使うこと』
です。
使い方にチョットしたコツがあります。
今日はそんなレッスンでした。
スッキリ♪
コーディングやウェブプログラミングのお悩み、
お気軽にご相談くださいね。
↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓
【1】CODEMYマンツーマンレッスン
codemy-lesson.office-ing.net⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン
▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
【2】プログラミング講座CODEMY
office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン
自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。