2019年08月20日CSSCMS・サイト制作デザインマイページにお気に入りCSSの勉強をスタートすると序盤に登場するのがmarginやpaddingといった余白の指定方法です。CSSの中では初歩的な部分とはいえ、勉強をはじめてまもない頃では混乱しやすい部分の一つとも言えるのではないでしょうか。余白を自由にコントロールできることで得られるメリットはとても大きいので、苦手を乗り越え、ぜひマスターしておきたいところです。そこで、今回はCSSの余白調整にスポットをあててご説明します。余白を制するとデザインのクオリティが一段上がるデザインにおいて大切な要素の一つが余白です。余白は美しさを演出するだけではなく、ユーザーの見やすさや使いやすさにおいても大きな効果を発揮します。CSSを使うとソースコードを無駄に膨らますことなく、簡潔な記述で余白をコントロールできます。余白の調整をマスターして、成果を得られるホームページ制作を実現しましょう。marginとpaddingを理解してデザインの自由度を上げるmarginとpaddingは両方とも余白を指定するプロパティです。この2つの指定する余白は位置が異なります。marginは要素の外側、paddingは要素の内側の余白を指定します。わかりやすくイメージするに、要素で線で囲んでいると考えてみましょう。要素から枠線までの余白は内側に該当しますのでpaddingです。枠線から外はmarginが制する余白です。長さを表すプロパティが2つ出てきて、widthとheightとの関係が気になった人もいることでしょう。widthとheightは要素の縦横のサイズです。画像の場合は、その縦横サイズのことを指します。外側から「margin」→「padding」→「widthとheight」という構成になります。基本的にmarginとpaddingの記述方法は同じです。書き方のパターンをご紹介します。余白はピクセル(px)でもパーセント(%)でも指定可能です。1)一行でスッキリ記述する上下左右を一行ずつ記述する方法もありますが、ソースコードが短くて見やすい4方向を一行で記述する方法を先にご説明します。以下のパターンをご覧ください。・上下左右に20pxの余白を指定します。値を1つだけ指定すると全方向に余白サイズが適用になります。20px;・上下左右すべてに任意の値を指定したいときは、上右下左という時計回りの順序で記述します。上50px、右40px、下30px、左20pxとする場合は以下になります。上下20px、左右30pxなら、以下のように書きます。上10px、下30px、左右50pxなら以下になります。今度は部分の余白だけを指定します。top(上)、right(右)、bottom(下)、left(左)に10%を指定した例が以下です。10%;※ピクセルではなくパーセントを使うと便利な場合さて、ここでは例として%(パーセント)を使ってみました。余白を指定する際、pxを指定するよりも%の方が便利な場合があるのです。ホームページの幅が1000pxと仮定してみます。真ん中に600pxの幅(width)の画像を配置し、左右のpaddingが100pxずつ、同じくmarginが100pxずつといった指定をする場合、細かく幅の計算をして配置しなければいけません。仮にページ幅を変更しようと思った際には、再計算が必要となり手間がかかります。いった場合、%で設定しておくと細かな計算をし直す必要がなく、レイアウトが楽になります。パーセントで記述すると、画像のwidthが60%、左右のpaddingが10%ずつ、marginも10%ずつとなります。それぞれのパーセントの合計は100%にならなければいけませんので注意が必要です。幅をパーセントで指定する場合は、幅に関わるすべての数値指定(width、padding、margin)はパーセントに統一することを忘れないようにしましょう。専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るレイアウトレイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。あるWebマーケティング事務所、コビトスパイス代表。各種メーカーやコンサルティング企業などで様々な分野のマーケティングを経験し独立。これまで培ったマーケティングに関するノウハウを活かしクライアント企業の業績アップに貢献しています。Webマーケティング初心者にもわかりやすい解説に定評があります。“振り返り”に役立つ5つのフレームワーク。