シンプルなレイアウト

ここではブロック1つ分だけで完結するレイアウトについて説明します。

ブロックの内側や外側に対する設定を行うだけでも、いろいろと見栄えのよいレイアウト(配置)ができます。

内側の余白

シンプルなレイアウトその1は余白です。

背景色の入力例では、文字の上下および左と背景色の境目の間に余裕がなく、詰まっているように感じないでしょうか?

ブロックの内側に余白を設定することで、拡げることができます。次の様に入力してみてください。

        <div style="padding: 8px; background-color: orange;">余白あり</div>
        <div style="padding: 1em; background-color: yellow;">1文字ぐらいの余白</div>        
    

次のように表示されます。 比較のための余白が無いケースも表示しています。

背景:薄い青、文字:白

余白あり

1文字ぐらいの余白

上下と左側に余裕が生まれるはずです。

"padding: 8px;"で、テキストの前後左右に8ピクセルの余白(パディング)が追加されます。

8pxのpxはピクセル単位であることを表しています。

2つ目の例の1emは別の単位です。 「だいたい1文字分」を表しています。

他にも使用可能な単位がありますが、私はこの2つの単位しか使ったことがありません。 この2種類だけで十分だと思います。

上下と左右で余白を変える

padding: 1em;だと、「上下の余白が多すぎる」…と感じることはよくあります。 そんな時、次のように入力することで上下と左右の余白を変えることもできます。

        <div style="padding: .5em 1em; background-color: orange;">余白あり</div>
    

次のように表示されます。

余白あり

paddingの指定値が2つになっていますが、最初の.5emは0.5em=文字半分という意味です。 上下の余白を文字半分にします。

次の1emは左右の余白を文字1つ分にします。

字下げ

自由記入欄にそのままテキストを入力すると、左に詰まって表示されます。

行頭に空白文字をいれれば、間を空けることはできますが、「テキスト量が多いとちょっと面倒」とか「左からたくさんあけたい。」というとき、次の様に入力すると左から離されて表示されます。

        <div style="padding-left: 1em;">左側だけ1文字分の余白</div>
    

"padding-left: 1em;"で左側に1文字分の空白が入るようになります。

こんな感じで、「見出し」と「本文」を使い分けるようにするとよいかも?

        1.見出し1
        <div style="padding-left: 1em;">本文を書く。
        本文2行目。
        本文3行目。</div>
    

上の2つの入力例は、次のように表示されます。

左側だけ1文字分の余白

1.見出し1
本文を書く。
本文2行目。
本文3行目。

padding-???には他にも種類があり、「上だけ」「下だけ」「右だけ」に余白を入れることもできます。

また、paddingのパラメーターの指定の仕方もいろいろあります。 全部書いているときりがないので省略します。詳しい情報はネットを検索して調べてください。

外側の余白

シンプルなレイアウトその2は外側の余白です。

次のように入力して、表示を見てください。

        ルシルム・エント・フラウス
        <div style="border: 2px solid;">オーラム共和王国国王。
            
            先代国王の崩御した刻碑歴990年に、わずか7歳の幼さで王座に就くことになった。
            評議会による合議制を取り入れ共和王国と国名を改めた刻碑歴512年以来、王家の権力は衰退する一方であったが、この幼王を以て完全な傀儡政権となった。</div>
    

次のように表示されます。

ルシルム・エント・フラウス
オーラム共和王国国王。

先代国王の崩御した刻碑歴990年に、わずか7歳の幼さで王座に就くことになった。
評議会による合議制を取り入れ共和王国と国名を改めた刻碑歴512年以来、王家の権力は衰退する一方であったが、この幼王を以て完全な傀儡政権となった。

この入力例では枠が自由記入欄の両端ギリギリに描画され、少し見えにくくなっています。 (今回はブロックの下に文章が無いので、下の枠も見えにくくなっています。)

ブロックの前後に他の入力があったり、改行を入れたりすることで、上下の枠は目立つようになりますが、左右はやはり見えにくいままです。 せっかく枠をつけているのだから、枠線が目立つように両端から少し離した方が良いですよね?

そんなときは次のように入力してください。1つ前のものと見比べてください。

        ルシルム・エント・フラウス
        <div style="margin: 0 100px; border: 2px double;">(ブロックの中は同じなので、省略します。)</div>
    

次のように表示され、左右の枠線が目立つようになります。 こうすると「枠で囲ったブロックが自由記入欄の中央に配置されている」というレイアウトをしてるように見えませんか?

ルシルム・エント・フラウス
オーラム共和王国国王。

先代国王の崩御した刻碑歴990年に、わずか7歳の幼さで王座に就くことになった。
評議会による合議制を取り入れ共和王国と国名を改めた刻碑歴512年以来、王家の権力は衰退する一方であったが、この幼王を以て完全な傀儡政権となった。

"margin: 0 100px;"で、枠の外側(ブロックの外側)に余白をつけることができます。

この例では、枠の上下は余白なし、左右は100ピクセルの余白が設定されます。

またpaddingのように、"maring: 4em;"という指定(パラメーター1つの指定)もできます。 この時は、上下左右に同じ余白(この例の場合は4文字分の余白)をつけるように設定されます。

paddingと同じように、marginもmargin-leftなどの上下左右のどこか1つだけ余白設定するCSSがあります。 また、パラメーターの指定方法も複数種類あります。詳細はネットで検索して下さい。

余白と枠、背景色の関係

枠(border)を基準にして考えると、枠と余白には次の関係があります。

また、背景色を塗ったときにも影響があります。 背景色は枠の中(言い換えればブロックの内側)の色です。 maringで余白をつけたときは、そこは背景色が塗られません。 逆にpaddingで余白をつけたときは、そこは背景色が塗られます。

ブロック1つだけの時はあまり気にならないことですが、複数のブロックを隣り合わせにレイアウトしたり、ブロックの中に別のブロックを入れたり(入れ子構造にしたり)するときに、marginとpaddingの使い分けができていないと変なところに背景色が出てしまったりすることがあります。

ネガティブマージン

marginはマイナスの値を指定することができます。これをネガティブマージンと呼びます。

paddingはマイナスの値を指定できません。

使用頻度は少ないですが、ちょっと特殊な表示をしたいときやレイアウトの調整に使う事ができます。 例えば、次のように入力すると重ね表示ができます。

        <div>こ ん に ち は</div><div style="margin: -15px 0 0 3px; color:red;">こ ん に ち は</div>
    

次のように表示されます。

こ ん に ち は
こ ん に ち は

marginは「余白」というよりも「間隔を拡げる設定」と思ったほうが方がよいかもしれません。

「ネガティブマージン」=「間隔をマイナスに拡げる」=「間隔が詰まり、重なってしまう」のです。

テキストのセンタリング

シンプルなレイアウトその3はテキストのセンタリングです。

背景色をつけて文字を中央に寄せれば、それだけでタイトルや見出しになると思いませんか? そうでしょう。そうでしょうとも。(ベルリッテン構文)

それではセンタリングしてみましょう。 次の様に入力してください。

        <div style="text-align: center; font-size:200%; padding: .5em 1em; color:orangered; background-color:gold; text-shadow: #444 1px 2px;">キャラプロフィール</div>
    

次のように表示されます。 なお、見出しっぽく見せるために、text-shadowを使って文字に影も入っています。

キャラプロフィール

"text-align: center;"で、ブロックの中のテキストがセンタリングされます。

centerは別の値にすることもでき、rightを指定すると右よせになります。

例えば、下のような入力例を作ることができます。

        ◆名前
        <div style="text-align: right; border-top: 1px solid; padding: 2px;">パープル=レンド</div>
    

次のように表示されます。横幅を1/3ぐらいに減らせば、味わいのあるレイアウトになるかも知れません。

◆名前
パープル=レンド

ブロックは動かせない

text-alignでセンタリングできるのはテキストだけです。 divやpで囲まれたブロックはセンタリングされません。 右よせも同様です。

文章の説明だけではわかりにくいので、具体例を用いて説明します。次のように入力してみてください。

        <div style="text-align: center;">テキスト1</div>
        <div style="text-align: center;"><div style="width: 320px; background-color: pink;">テキスト2</div></div>
    

次のように表示されます。

テキスト1

テキスト2

テキスト1とテキスト2の表示のされかたが違います。それぞれ次のような違いがあります。

違う点 テキスト1 テキスト2
構成 1つのdivがあり、その中にテキスト1がある。 2つのdivがあり、入れ子になっている。
内側divの中は横幅が320ピクセルで背景はピンク。
その中にテキスト2がある。
内側divは外側divの中にある。
センタリング テキスト1はセンタリングしている。 ピンクの背景は左にある。
つまり、外側divからみたとき、内側divは左よせしている。
テキスト2はピンク背景の中央にある。
つまり、内側divからみたとき、テキスト2はセンタリングしている。

テキスト2がピンク背景の中でセンタリングしているのは、外側divのtext-alignの設定が内側divにも影響をあたえているからです。 このように、CSSの中には入れ子になっているdivの外側が内側に影響を及ぼすものとそうでないものもあります。 このあたりの話は私もあまり詳しくないので、検索して調べてください。

ブロックのセンタリング

シンプルなレイアウトその4はブロックのセンタリングです。 前述したように、ブロックはtext-alignではセンタリングできません。 別の指定を行う必要があります。

ブロックをセンタリングする方法で最も簡単なのはmarginを使う事です。 「外側の余白」の例でも説明したように、marginを使って左右に同じ大きさの余白を設定すればブロックはセンタリングされます。

横幅が決まっている時

「ブロックは動かせない」の説明で記載した例ではピンク背景部分のブロックは横幅が320ピクセルになっています。

ブロックの横幅が指定されている場合、次のような指定をしてもセンタリングされません。

(ここからの話はtext-alignは不要なので削除しました。ピンクの中のテキストはセンタリングされなくなっています。)

        <div style="margin: 0 100px; width: 320px; background-color: pink;">横幅がきまっているとき</div>
    
横幅がきまっているとき

上の例では"margin: 0 100px;"で左右に100ピクセルの余白を指定しています。

ブロックの横幅が決まっている時は、

から、全体の横幅は520ピクセルとなり、それが左よせされた状態で表示されます。 そのため左よせでもなく、センタリングでもない、中途半端な位置に表示されます。

ブロックの横幅と外側の横幅から余白サイズを逆算し、それをmarginに設定すればセンタリングされたように表示されます。

        <div style="margin: 0 160px; width: 320px; background-color: pink;">横幅がきまっているとき</div>
    
センタリングする値を指定

marginのauto指定

センタリングに丁度良い余白サイズを毎回計算するのは大変です。そんなときauto指定を使うと楽です。

次の入力例を見てください。(表示例では、比較のために計算したピクセル数を指定するケースも一緒に並べています。)

        <div style="margin: 0 auto; width: 320px; background-color: pink;">margin auto指定</div>
    
センタリングする値を指定

margin auto指定

次のように入力すると右よせもできます。

        <div style="margin-left: auto; width: 320px; background-color: pink;">margin autoによる右よせ</div>
    
margin autoによる右よせ