ボックスモデル応用編！margin/paddingでいろいろな指示を出して、デザインを見やすくしよう

木下雄策

2016.07.04

こんにちは。エンジニア特化型Q&Aサイト「teratail」のDevRelを担当している、DevRelチャンネル外部ライターの木下です。非エンジニア目線で書くWebプログラミング超入門記事、連載7回目です。

前回の記事では、HTML/CSSの「ボックスモデル」について説明しました。marginやpaddingを調整して、デザインを整えるという内容でしたね。今回は、前回よりもmarginやpaddingをさらに掘り下げて、より見やすいサイトになるようにデザインを整えていこうと思います。

今回のゴール

こちらが今回のゴールです。黄色い枠が増え、文字が少し大きくなっています。これまでと比べると、だいぶ見やすいサイトに仕上がっているのではないでしょうか。

今回でCSSの基礎の基礎は終了しますので、頑張っていきましょう！

今回おこなうこと

文字の余白や背景色を変える
HTMLの階層構造を利用して、CSSの指示を出す
margin/paddingでいろいろな指示を出す
最後に、デザインを微調整する

前回までの完成図とコード

毎回恒例、前回のコードとブラウザの表示を確認しておきましょう。このような感じでした。

profile.html

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="profile.css">

<h1 id="main_title">Who am I !?</h1>
<div class="sub_detail">
    <div id="icon_img">
        <img src="afroscript.png" width="300px">　
    </div>
    <div id="name">
        名前:木下雄策<br>
        ニックネーム:afroscript
    </div>
</div>

<h2 class="sub_title" id="comment">コメント</h2>
<div class="sub_detail">
    全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</div>

<h2 class="sub_title">base_data</h2>
<div class="sub_detail">
    誕生日: 1988.10.10<br>
    性別: 男<br>
    趣味: スノボ(グラトリ専門),バスケ<br>
    特技: ビートボックス,フリースタイルバスケットボール<br>
</div>

<h2 class="sub_title">work</h2>
<div class="sub_detail">
    今の仕事: teratailの広報<br>
    できること: 広報,営業,プロモーション企画/ディレクション,プログラミング(少々)<br>
    職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</div>

profile.css

body {
    margin: 0;
}

#main_title {
    text-align:center;
    color:white;
    background-color:black;
    padding: 30px;
    margin: 0;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
    padding: 15px;
    margin: 0;
}

.sub_detail {
    text-align: center;
    min-height: 250px;
    width: 720px;
    margin: 0 auto;
}

#icon_img {
    width: 300px;
    height: 300px;
    float: left;
}

#name {
    width: 420px;
    height: 300px;
    float: left;
}

#comment {
    clear: both;
}

文字の余白や背景色を変えてみよう

それではさっそく始めていきます。

まずは、<div id="name">にある「名前：」や「ニックネーム：」、最後の<h2 class="sub_title">work</h2>の下にある、「今の仕事：」「できること：」「職歴：」あたりの見た目がイマイチなので、ここをイジっていきましょう。

今挙げた部分を<div>タグで囲み、class="label"を付け加えます。「:」はもう必要なくなるので、取ってください。

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="profile.css">

<h1 id="main_title">Who am I !?</h1>
<div class="sub_detail">
    <div id="icon_img">
        <img src="afroscript.png" width="300px">　
    </div>
    <div id="name">
        <div class="label">名前</div> <!-- ここを変更 -->
        木下雄策<br>
        <div class="label">ニックネーム</div> <!-- ここを変更 -->
        afroscript
    </div>
</div>

<h2 class="sub_title" id="comment">コメント</h2>
<div class="sub_detail">
    全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</div>

<h2 class="sub_title">base_data</h2>
<div class="sub_detail">
    誕生日: 1988.10.10<br>
    性別: 男<br>
    趣味: スノボ(グラトリ専門),バスケ<br>
    特技: ビートボックス,フリースタイルバスケットボール<br>
</div>

<h2 class="sub_title">work</h2>
<div class="sub_detail">
    <div class="label">今の仕事</div> <!-- ここを変更 -->
    teratailの広報<br>
    <div class="label">できること</div> <!-- ここを変更 -->
    広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
    <div class="label">職歴</div> <!-- ここを変更 -->
    エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</div>

改行が入り、少し見た目が変わりました。

では、次にCSSで指示を出していきます。labelクラスに対して下記のような指示を出してみましょう。できれば自分で一度やってみてください。

class=”label”にやってみよう

文字を中央寄せにする
横幅（width）を100pxにする
背景色を#ffdb5dにする
文字色を白にする
文字サイズを15pxにする
文字まわりの余白（padding）を10pxにする
角を丸くする（半径は5px)

※ヒント：角を丸くするにはborder-radius： ●px;という指示を使います。●pxは、丸みの半径となります。

できましたか？　答えは下記です。

body {
    margin: 0;
}

#main_title {
    text-align:center;
    color:white;
    background-color:black;
    padding: 30px;
    margin: 0;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
    padding: 15px;
    margin: 0;
}

.sub_detail {
    text-align: center;
    min-height: 250px;
    width: 720px;
    margin: 0 auto;
}

#icon_img {
    width: 300px;
    height: 300px;
    float: left;
}

#name {
    width: 420px;
    height: 300px;
    float: left;
}

/* ここを追加 */
.label {
    text-align: center;
    width: 100px;
    background-color: #ffdb5d;
    color: white;
    font-size: 15px;
    padding: 10px;
    margin: 0px;
    border-radius: 5px;
}

#comment {
    clear: both;
}

ブラウザの表示は上のようになると思います。クラス名「label」をつけた部分が黄色い四角で囲まれました。（ちなみに、「#ffdb5d」はteratailのロゴに使われているのと同じ色です）

HTMLの階層構造を利用してCSSで指示を出す

さて、さきほど黄色い四角をつけたlabelクラスに、もう少し手を加えてみます。

<div id="name">の下にある2つの黄色い四角（「名前」と「ニックネーム」の部分）がアイコン画像と少し近いので、左側のmarginをもう少し大きくしてみます。ここでは20pxにしてみましょう。

左側のmarginだけに指示を出すには、margin-left: ●px;という命令を使えばOKです。しかし、「5つあるlabelクラスがついた要素のうち、<div id="name">の下にある2つのlabelクラス要素のみにCSSの指示を出す」というのを実現したいのですが、どうすればよいでしょうか。

これには「>」記号を使い、次のように書くとうまく実現することができます。

#name > .label {
    margin-left: 20px;
}

これで、2つの黄色い四角が少し右にズレます。
実際には、.labelの下にいれます。

.label {
    text-align: center;
    width: 100px;
    background-color: #ffdb5d;
    color: white;
    font-size: 15px;
    padding: 10px;
    margin: 0px;
    border-radius: 5px;
}

/* ここを追加 */ 
#name > .label {
    margin-left: 20px;
}

#comment {
    clear: both;
}

#name > .labelの部分が、「"name"というid名がついた要素の直下にある、"label"というクラス名がついた要素」ということを表しています。今回の場合、<div id="name">の直下にある2つの黄色い四角のみに、margin-left: 20px;を適用してくれ」という指示になるのです。

新しい書き方ですが、これも使えると便利なので覚えておくと良いです。また、どの要素に指示を出すかを細かく指定する方法は他にもいくつかあるので、下記のサイトなどを参考にしてみてください。

・HTML クイックリファレンス – セレクタの種類
http://www.htmq.com/csskihon/005.shtml

margin/paddingのいろいろな指示を出す

さて、ようやく本記事のタイトルであるmargin/paddingへの指示の出し方の応用編です。

さきほどmargin-left: 20px;という指示を使いましたが、実は他にも次のような指示があります。

margin-top
margin-bottom
margin-right

paddingでも同様に、次のようなものがあります。

padding-top
padding-bottom
padding-left
padding-right

まずはこれらを一緒に覚えていきましょう。

また、margin/paddingの指示の出し方には、さらに下記のような3つの書き方があります。これらもよく使われるので、理解して使えるようにしておいてください。

1. 「上下」と「左右」の指示を出す

/* 上下のmarginが10px、左右のmarginが20pxになる */
margin: 10px 20px;

2. 「上」「左右」「下」と、「左右」の指示を出す

/* 上のmarginが10px、左右のmarginが20px、下のmarginが5pxになる */
margin: 10px 20px 5px;

3. 「上」「右」「下」「左」と、バラバラに指示を出す

/* 上のmarginが5px、右のmarginが20px、下のmarginが10px、左のmarginが30pxになる */
margin: 10px 20px 5px 30px;

margin/paddingの後の「●px」の指定が2個だったら「上下」「左右」、3個だったら「上」「左右」「下」、4個だったら「上」「右」「下」「左」となります。

margin/paddingを練習してみよう

せっかくなので練習として、1のパターンを使って3ヶ所ほどデザインを調整してみましょう。まずは、profile.htmlに下記2ヶ所にクラス名を付け加えてみてください。

さきほどlabelクラスをつけた「名前」/「ニックネーム」の内容にあたる部分「木下雄策」/「afroscript」をそれぞれ<div>タグで囲み、クラス名"name_content"をつける
さきほどlabelタグをつけた「今の仕事」/「できること」/「職歴」の内容に当たる部分「teratailの広報」/「広報,営業……」/「エンジニア業界の……」をそれぞれ<div>タグで囲み、クラス名"work_content"をつける

以下のようになります。

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="profile.css">

<h1 id="main_title">Who am I !?</h1>
<div class="sub_detail">
    <div id="icon_img">
        <img src="afroscript.png" width="300px">　
    </div>
    <div id="name">
        <div class="label">名前</div>
        <div class="name_content">木下雄策</div> <!-- ここを変更 -->
        <div class="label">ニックネーム</div>
        <div class="name_content">afroscript</div> <!-- ここを変更 -->
    </div>
</div>

<h2 class="sub_title" id="comment">コメント</h2>
<div class="sub_detail">
    全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</div>

<h2 class="sub_title">base_data</h2>
<div class="sub_detail">
    誕生日: 1988.10.10<br>
    性別: 男<br>
    趣味: スノボ(グラトリ専門),バスケ<br>
    特技: ビートボックス,フリースタイルバスケットボール<br>
</div>

<h2 class="sub_title">work</h2>
<div class="sub_detail">
    <div class="label">今の仕事</div>
    <div class="work_content"> <!-- ここを変更 -->
        teratailの広報
    </div>

    <div class="label">できること</div>
    <div class="work_content"> <!-- ここを変更 -->
        広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)
    </div>

    <div class="label">職歴</div>
    <div class="work_content"> <!-- ここを変更 -->
        エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
    </div>
</div>

次に下記のようにCSSで指示を出してみてください。（ぜひ一度自分で書いてみてくださいね！）

sub_detailクラスのpaddingを、上下20px、左右を0pxにする
name_contentクラスを中央寄せにし、さらにpaddingを、上下20px、左右を0pxにする
work_contentクラスのpaddingを、上下20px、左右を0pxにする

profile.cssは下記のようになります。

body {
    margin: 0;
}

#main_title {
    text-align:center;
    color:white;
    background-color:black;
    padding: 30px;
    margin: 0;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
    padding: 15px;
    margin: 0;
}

.sub_detail {
    text-align: center;
    min-height: 250px;
    width: 720px;
    margin: 0 auto;
    padding: 20px 0; /* ここを追加 */
}

#icon_img {
    width: 300px;
    height: 300px;
    float: left;
}

#name {
    width: 420px;
    height: 300px;
    float: left;
}

.label {
    text-align: center;
    width: 100px;
    background-color: #ffdb5d;
    color: white;
    font-size: 15px;
    padding: 10px;
    margin: 0px;
    border-radius: 5px;
}

#name > .label {
    margin-left: 20px;
}

/* ここを追加 */ 
.name_content {
    text-align: center;
    margin:20px 0;
}

#comment {
    clear: both;
}

/* ここを追加 */ 
.work_content {
    margin: 20px 50px;
}

ブラウザの表示はこちらのようになります。ほどよく隙間ができ、見やすくなってきました。

※margin: 0 auto;について: 前回説明を先送りにしてましたが、これも1のパターンの書き方ですね。上下のmarginを0pxに指定し、左右のmarginはauto（自動）にする、といった書き方です。自動なので、左右のmarginは均等にしてくれるようになっているので、この箱は中央揃えになりました。

最後に、デザインを微調整する

最後に少しだけデザインの微調整をします。以下に沿って修正してみてください。

・フォントをメイリオに変えてみる
全体（bodyタグ）のフォントを"メイリオ"に変更する（font-family: ●●●;という指示を使います）

・文字の大きさを25pxに変えてみる
sub_detailクラスの文字の大きさを25pxにする

・中央寄せを消してみる
sub_detailクラスの中央寄せを消す（デフォルトの左寄せとなる）

profile.cssは下記のようになります。

body {
    margin: 0;
    font-family: "メイリオ"; /* ここを追加 */
}

#main_title {
    text-align:center;
    color:white;
    background-color:black;
    padding: 30px;
    margin: 0;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
    padding: 15px;
    margin: 0;
}

.sub_detail {
    /*　text-align: center; ここを削除 */
    min-height: 250px;
    width: 720px;
    margin: 0 auto;
    padding: 20px 0;
    font-size: 25px; /* ここを追加 */
}

#icon_img {
    width: 300px;
    height: 300px;
    float: left;
}

#name {
    width: 420px;
    height: 300px;
    float: left;
}

.label {
    text-align: center;
    width: 100px;
    background-color: #ffdb5d;
    color: white;
    font-size: 15px;
    padding: 10px;
    margin: 0px;
    border-radius: 5px;
}

#name > .label {
    margin-left: 20px;
}

.name_content {
    text-align: center;
    margin:20px 0;
}

#comment {
    clear: both;
}

.work_content {
    margin: 20px 50px;
}

ブラウザの表示は上記のようになります。だいぶ見やすくなりましたね！

さて、今回は以上となります。CSSもここまでできれば、一通り基礎の基礎は完了だと思って大丈夫です！　あとは自分で試してみたいことを元にいろいろ調べてみると徐々にレベルアップしていくかと思います。

まとめ

今回は以下のことを学びました。

角を丸くするには border-radius: ●px; を使う
「親要素 > 子要素」という書き方で、HTMLの階層構造を利用したCSSの指示の出し方ができる
margin/paddingの指示の出し方は主に2通りある。 margin-left: ●px; といったように1つ1つ指示を出すか、 margin: 10px 20px; や margin: 10px 20px 5px 30px; のようにまとめて指示を出すこともできる

次回はちょっとだけHTMLに戻って、base_dataの部分を表を使い分かりやすく表現してみようと思います。

その後は、CSSでサイトに簡単な動きをつけ、さらにJavaScriptを使って、いくつかの動きや機能を実装してみようと思っていますので、ぜひお楽しみに。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る