余白(padding,margin)をレスポンシブで可変させる方法を解説します。【結論】padding:4%迷ったら「padding:4%」を指定しましょう。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む余白の可変方法まず、余白を指定するにはpaddingとmarginがあります。paddingは要素の内側、marginは要素の外側の余白を指定できます。【CSS】marginとは?paddingとは?両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。この記事を読む余白を作りたいならpaddingがオススメです。paddingの値を指定するとき、px以外にもemや%、vwなどの単位を指定できます。CSSで使う長さの単位【px・em・%・vw・vh/calc】CSSにはwidth等で大きさ・長さを指定するための単位が複数存在します。それらを計算できる仕組みがあります。これらをマスターしてイメージ通りのデザインを作成しましょう。この記事を読むレスポンシブ対応を意識して余白を指定したいのであれば%かvwがオススメです。%は親の幅を、vwはブラウザの幅を基準とします。%もvwもスマホ幅になると当然小さくなるため、余白を小さくするという目的にかなっています。paddingの%指定は左右の余白はもちろん、上下の余白も親要素の横幅を基準とします。%を使うかvwを使うかはサイトのデザインや構成によるため一概には言えませんが、%のほうが比較的使いやすいことが多いでしょう。「padding:○%」と指定することまでは理解できたかと思いますが、この「○」部分、つまり数値はどうすればいいでしょう?これも当然デザインによるため、明確な答えはありません。よって以下は「まったく想像もつかない」というかたのためのヒントだと思ってください。基準は最大値と最小値です。最大値は一般的なデスクトップの横幅1920pxとしましょう。最小値は一般的なスマホの横幅360pxとしましょう。スマホまず、最小値、つまりスマホから考えます。スマホは横幅が小さいことが特徴です。文章を読む時、縦にスクロールします。あまりにもスクロールの頻度が多いのもメンドウに感じさせ、読みづらくなってしまいます。そこでスマホでは一行の文字数を多くして少しでもスクロール量を減らす工夫が必要です。よって、左右の余白を減らすことが読みやすくするコツになります。いえ、余白が0ではスマホを触っている指に隠れてしまったり、左右に続きがあると勘違いさせてしまい読みづらくさせてしまいます。そこでオススメが1文字分の余白です。この1文字分がpadding:4%前後です。4%=14.4pxなお、「padding:1em」と指定するのもいいでしょう。パソコンパソコンでは横幅いっぱい(1920px)に文字を並べると一行が長すぎて読みづらいです。文章であれば横幅700px程度で折り返すと読みやすいでしょう。あとはその外側に余白を用意しましょう。パソコンでも「padding:4%」にしてもいいですが、スマホと違い、横幅に余裕があります。よってもっと大きめの数値を指定してもいいでしょう。ちなみに当サイトのパソコン版の横幅のpaddingは7%です。これは余白をたっぷり持つほかに、h2やh3の頭を少し左に置くための余白を確保する目的があります。スマホとパソコンどちらも「padding:4%」にする必要はなく、メディアクエリを使って切り替えることも必要です。今やスマホ対応があたり前、レスポンシブデザインがあたり前の時代です。やって対応させればいいのかわからない!そんなレスポンシブ・スマホ対応させる「メディアクエリ」の使い方について、基本的な書き方、ブレイクポイント、入れ子、印刷時対応、オススメの書き方を説明します。}}その他必要なCSSpaddingを指定するとき、widthの指定が重要になります。「width:auto(初期値)」が指定されている場合問題ありません。「width:100%」を指定した場合、paddingの幅を含まないため、横幅がはみ出てしまいます。そんなときは「box-sizing:border-box」を指定しましょう。これを指定するとwidthにpaddingとborderが含まれるため、「width:100%」と指定してもはみ出なくなります。はみ出させない以上、レスポンシブで余白を指定する方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。