スマホ対応・レスポンシブデザインのコツマンガでわかるホームページ作成ホームへスマホ対応・レスポンシブデザインのコツ2020年07月17日レンタルサーバーとは何か、なぜ必要かホームページ開設に必要なものの一つに「レンタルサーバー」があります。このレンタルサーバーとは何か、なぜ必要なのかを説明します。この記事を読む「スマホ対応・レスポンシブデザインが必要なのわかったけど、実際問題具体的にどうやればいいの?」というあなたへ、スマホ対応・レスポンシブデザインサイトを作る具体的な方法とコツを説明します。文字サイズは一回り小さく画像は2倍を用意し半分に縮小メニューの工夫ハンバーガーメニューメリットデザイン的に領域の節約ができるハンバーガーメニューデメリットハンバーガーメニューをタップしないとメニューが表示されないメニュー推奨使い方ハンバーガーメニューを使う場合:トップページにてハンバーガーメニューを開かなくても各メニュートップに行けるハンバーガーメニュー非推奨まとめスマホ化定義スマートフォンからアクセスしたときに、以下の条件を満たすサイトの作成を目標とします。文字サイズが適切リンクのタップミスが発生しないスマホ対応・レシポンシブデザインとはスマホ対応とはスマホでも利用しやすいようにWebサイトを調整することです。この記事を読むCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。基本的には下記を実施すればスマホ対応したサイトを作ることができます。以下から一つずつ説明します。port以下のコードをhead内に記述しましょう。/>これがないと、たとえスマホ用のCSSを用意してメディアクエリで切り替えて、パソコン上でスマホ幅にしてOKでも、実機ではスマホ幅に表示されません。スマホ対応するなら何はともあれ上記viewportをheadタグ内に記述しましょう。今どきレスポンシブ・スマホ対応が当たり前。portの書き方について説明します。この記事を読むメディアクエリパソコンとスマホではブラウザ幅が違うためデザインを切り替える必要があります。メディアクエリを使うことでブラウザの幅に応じてデザインを変えることができます。メディアクエリの使い方は以下の通りです。media="(min-width:751px)">パソコン用とスマホ用のCSSファイルを用意しブラウザの幅によって切り替える方法です。CSS内記述の場合@media(max-width:750px){}@media(min-width:751px){}一つのファイル内にてブラウザの幅によって切り替える方法です。今やスマホ対応があたり前、レスポンシブデザインがあたり前の時代です。やって対応させればいいのかわからない!そんなレスポンシブ・スマホ対応させる「メディアクエリ」の使い方について、基本的な書き方、ブレイクポイント、入れ子、印刷時対応、オススメの書き方を説明します。この記事を読む横スクロールをなくすまず、ブラウザの幅をスマホ幅にしましょう。PCでスマホ表示に切り替える方法【Chromeを使おう】スマホサイト開発や他社のスマホ対応動向確認のときPCで確認できれば楽です。PCのchromeでスマホ画面を表示する方法を紹介します。この記事を読むおそらく横スクロールが発生するか縮小された表示になっているでしょう。縮小されていない状態になれば拡大不要のスマホデザインになります。パソコンとスマホではブラウザの幅が違います。パソコンが1000px(~1920px)程度に対し、スマホは360px前後です。パソコン版に合わせてpx指定している場合、スマホサイズ(360px)になったとき、横スクロールが発生しています。この横スクロールをなくす方法を説明します。widthでpx指定しない(しても300px)pxで固定すると横スクロールが発生してしまうためまずpx指定をなくしましょう。スマホで一番小さいブラウザ幅は320pxであるため、320pxまでは大丈夫です。あとはpaddingの兼ね合いもあるので、概ね300pxまでは大丈夫と考えておきましょう。%を使う(calcを利用)ではpxを使わないなら何を使えばいいかというと%またはautoを使いましょう。%を使うとブラウザ幅を基準にできます。100%にすると横幅いっぱいになります。paddingなどあるとはみ出てしまうためautoを使うこともあります。autoでは最小幅になってしまうときはcalcを使いましょう。CSSで使う長さの単位【px・em・%・vw・vh/calc】CSSにはwidth等で大きさ・長さを指定するための単位が複数存在します。それらを計算できる仕組みがあります。これらをマスターしてイメージ通りのデザインを作成しましょう。この記事を読むmax-widthを利用そもそもパソコン版でもpxを使わず、widthを100%にしておくという方法もあります。その場合横幅が1920pxまで広がってしまい、かえって利用しづらくなる場合があります。そこでmax-widthを使います。width:100%;max-width:1000px;例えば上記のように指定するとブラウザ幅が1000px以上の時は横幅が1000pxになります。1000px以下の時は横幅はブラウザ幅になります。画像でも利用できます。auto;}このように指定すると画像が親の幅より小さいときはそのままのサイズが表示され、幅が狭くなったときはその幅に合わせて小さくなります。height:autoを指定すると横幅に応じて縦横比を保った高さになります。※IEではtableやflexの中の要素はmax-widthが効かず、はみ出てしまうためwidth:100%を使いましょう。縦並びにするパソコンは横幅が広いため要素を横並びにすることがしばしばあります。スマホは横幅が狭いため横並びでは利用しづらくなることがあります。そのためスマホでは縦並びにすることが多々あります。横並びにする方法は主に、tableタグ、display:flex、floatです。これを解除または縦並びにしましょう。tableタグの縦並び方法tableタグを縦並びにするにはdisplay:blockなどを使います。table,table>tbody,table>tbody>tr,table>tbody>tr>th,table>tbody>tr>td{display:block;}display:blockを使うとtableもdivのように縦並びになります。一部だけ横並びにしたいときはdisplay:inline-blockを使うのもありです。display:flexの縦並び方法display:flexを縦並びにする方法は2つあります。.flex{display:flex;flex-wrap:wrap;}.flex>*{width:100%;}display:flexを指定した要素に「flex-wrap:wrap」を指定するとその子要素を改行することができるようになります。これだけでは子要素のサイズによって横並びになってしまうので子要素の幅を100%にして縦並びにします。.flex{display:block;}もう一つの方法はdisplay:blockを指定してflexを解除するというものです。floatの縦並び方法.float{float:none;}floatはnoneを指定すると解除でき、横並びでなくなります。ここまでの方法で横スクロールと横並びがなくなり拡大しなくてもスマホ幅で見られる状態になったでしょう。ここからはスマホで使いやすくする方法です。リンクの縦幅は40px以上パソコンではマウスで1px単位でクリックできますが、スマホは指でタップするためクリック範囲が大きく、リンク同士が近いと間違ってクリックしてしまうことがあります。そのためリンク同士をある程度離す必要があります。リンクはaタグですが、aタグはインライン要素であり、幅を指定できません。この状態でリンクが縦に複数かつ連続で並んでいると誤タップの恐れがあります。aタグにdisplay:blockまたはdisplay:inline-blockを指定し、幅を指定できるようにします。displayの書き方を23種デモ付きで全部説明します!この記事を読むこの状態でpaddingを使ってリンクの縦幅を確保します。縦幅は40px以上が望ましいでしょう。heightを使うと文字数によってはみ出ることがあるのでheightの利用は非推奨です。(min-heightはあり)なお、aタグが連続で並んでいないとき(記事中にチラッとあるとき)は必ずしも高さを保つ必要はありません。文字サイズは一回り小さく※これについては必須ではないため必要に応じて適用してください。私はパソコン版のとき文字サイズを100%、スマホ版のとき文字サイズを85%にすることがしばしばあります。}}スマホはパソコンより1画面あたりの面積が小さくなります。パソコンでもスマホでもスクロールが多いとユーザーは面倒に感じる場合があります。よって1画面あたりの情報量を少しだけ増やす方法として文字サイズを一回り小さくする、という方法があります。スマホはパソコンに比べてユーザーの目と画面の距離が近くなります。遠近法によって距離が近いものは大きく見えるため文字サイズが少し小さくなってもパソコン版と同程度の読みやすさを維持できます。50代あたりから老眼になると近くても文字が読みづらくなることがあります。文字を一回り小さくするかはサイトの対象が若いか全年齢かでご判断ください。画像は2倍を用意し半分に縮小スマホのブラウザ幅は360pxでも解像度は倍あります。そのため360pxの画像を360px幅のスマホで見るとぼやけてしまいます。画像がぼやけていると低品質に見えたり、画像内にある文字が読みづらかったりしてしまうため、高画質の画像を表示させることはとても大事です。これを解決するには720pxの画像をブラウザ上で360pxに縮小して見ることです。ちなみにぴったり倍である必要はありません。概ね倍であれば大丈夫です。メニューの工夫スマホ版のメニューといえば「三」のようないわゆる「ハンバーガーメニュー」があります。これのメリット・デメリット・推奨の使い方を説明します。ハンバーガーメニューメリットデザイン的に領域の節約ができるパソコン版サイトでは多くの場合、メニューがページ上部に横並びで表示されます。パソコンでは画面が大きいためこれでもいいのですが、スマホは画面が小さいためメニューが邪魔になることがあります。普通に上部にメニューを置くとその分スクロールする必要があり、ファーストビュー(スクロールしなくても見える範囲)にコンテンツが見えなくなることがあります。これを解決するため「三」ハンバーガーメニューを使い、メニューの領域を節約するというものです。ハンバーガーメニューデメリットハンバーガーメニューをタップしないとメニューが表示されないメニューというのはサイトの回遊のために必要なものであり、サイト運営側としてはゼヒとも見てほしいコンテンツである場合が多いですよね。それを「1回タップする」という動作をはさまないと表示されないということが問題です。ユーザーはわざわざハンバーガーメニューをタップしないかもしれません。そもそもハンバーガーメニューがなんなのかわからないかもしれません。「一番クリックしてほしいところ」をわざわざ「隠して気付きにくくさせる」という矛盾が生じているわけです。メニュー推奨使い方ハンバーガーメニューを使う場合:トップページにてハンバーガーメニューを開かなくても各メニュートップに行ける最近のサイトのトップページは縦に長いのにお気づきでしょうか。そのトップページにある各コンテンツはメニュー項目と一致しており、リンクもはっていることがしばしばあります。トップページはインデックスページであり、インデックスとは目次。トップページは各目次へ遷移できるページであるべきという考え方です。これによってハンバーガーメニューに気付かなくても各コンテンツへ遷移することができます。上記の逆でトップページにお知らせやバナーくらいしかないサイトの場合はハンバーガーメニューにメニューを隠さず、メニューをしっかり表示させることをオススメします。まとめスマホ対応・レスポンシブデザインのコツは以下の通りです。上記に気を付けてスマホ対応・レスポンシブデザインサイトを作っていきましょう。次の記事>レンタルサーバーとは何か、なぜ必要かこの記事を読む「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。