読者です 読者をやめる 読者になる 読者になる

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

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

【いまさらスマホ対応?っていうときのCSS】

サイト制作実務の話

PC専用サイトって言ってたのに、後から
スマホでもちゃんと見れるようにしたいんですけど」
って言われることありませんか?
 
 
スマホ対応は最初の段階で想定しておくからこそ
「レスポンシブ」という言葉は現実味を帯びることができます。
 
 
でも残念ながら、WEB制作を仕事にする人以外でそこまで考えて
デザインを決めることは皆無ではないかと感じます。
 
 
で、どうしてもスマホ対応にしたいって言われたときに
真っ先に検討すべき方針はCSSのみで対応できるかどうかです。
 
 
レスポンシブと言っても、HTMLの構造を変更しないとどうにもならないことは
多いので、なるべく大工事は避けたいところ。
 
 
基本方針はこうでしょう。
 
 
・画像はmax-width:100%;などで自動伸縮
・テキストはメディアクエリで分岐するか、単位をvwに変更
・邪魔なものは割り切ってdisplay:none;
・左右入れ替えは float:left / right を逆転
・テーブルは display:block / inline-blockで縦並びに変更

 
 
あとは、大きく配置を入れ替える場合は
「JSでレスポンシブな条件分岐」
を使うと良いでしょう。
 
 
参考)
767px以下なら要素Aを要素Bの先頭に移動。
768px以上なら要素Aを要素Cの先頭に移動。

$(function(){
 if($(window).width()<768) {
   $('A').prepend('B');
 } else {
   $('A').prepend('C');
 }
});

 
レスポンシブな条件分岐は、上記のように
ウィンドウサイズを調べる以外にも
 

window.matchMedia('(max-width:768px)').matches

 
を使う方法もあります。
 
 
Mozilla Developer Network
developer.mozilla.org

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【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購入ページはこちら!