Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【レスポンシブに購入ボタンを配置するベストな方法】

f:id:wp-lesson:20160907205531p:plain

ランディングページの購入ボタンとか、
ネットショップのカートボタンとか、
 
 
「画像の上のちょうどこの場所に配置したい」
 
 
ですよね?
 
 
ここはもうデザインでそう決めてあるわけですから、
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
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!