前後左右に余白を作ってみよう

このページではスタイルシートを用いて前後左右に余白を作ってみましょう。

余白はマージン（margin）とパディング（padding）という２種類の設定があります。

ブロック要素の外側の余白を設定する場合にはmarginを使い、ブロック要素の内側の余白を設定する場合にはpaddingを使います。
ちなみに下の説明図のborderは線の幅を、widthは表示するテキストや画像などの幅です。

今回はhonbunという領域（ブロック要素）の内側に余白をつけてテキストを表示したいのでパディングを使います。

少し長いページにするために、夏目漱石の『夢十夜』から『第一夜』の部分をここに貼り付けてみました。

テキストは、著作権切れした作品を入力し、公開している『青空文庫』から使わせていただきました。

<div class="honbun">

このページのHTMLファイルをエディタで表示し、第一夜と書いてある本文（タイトル）の上に、上記の<div class="honbun">を記述して下さい。

次に、同じように本文最後の『「百年はもう来ていたんだな」とこの時始めて気がついた。』という文章の後に</div>と記述して下さい。

</div>

それが書き終わったら、cssフォルダにあるexample01.cssというスタイルシートのファイルに

div.honbun{
    padding-top:30px;
    padding-right:30px;
    padding-bottom:30px;
    padding-left:30px;
}

と記述して下さい。
　

　　　　　第一夜

　こんな夢を見た。
　腕組をして枕元に坐（すわ）っていると、仰向（あおむき）に寝た女が、静かな声でもう死にますと云う。女は長い髪を枕に敷いて、輪郭（りんかく）の柔（やわ）らかな瓜実（うりざね）顔（がお）をその中に横たえている。真白な頬の底に温かい血の色がほどよく差して、唇（くちびる）の色は無論赤い。とうてい死にそうには見えない。しかし女は静かな声で、もう死にますと判然（はっきり）云った。自分も確（たしか）にこれは死ぬなと思った。そこで、そうかね、もう死ぬのかね、と上から覗（のぞ）き込むようにして聞いて見た。死にますとも、と云いながら、女はぱっちりと眼を開（あ）けた。大きな潤（うるおい）のある眼で、長い睫（まつげ）に包まれた中は、ただ一面に真黒であった。その真黒な眸（ひとみ）の奥に、自分の姿が鮮（あざやか）に浮かんでいる。
　自分は透（す）き徹（とお）るほど深く見えるこの黒眼の色沢（つや）を眺めて、これでも死ぬのかと思った。それで、ねんごろに枕の傍（そば）へ口を付けて、死ぬんじゃなかろうね、大丈夫だろうね、とまた聞き返した。すると女は黒い眼を眠そうに

（みはっ）たまま、やっぱり静かな声で、でも、死ぬんですもの、仕方がないわと云った。
　じゃ、私（わたし）の顔が見えるかいと一心（いっしん）に聞くと、見えるかいって、そら、そこに、写ってるじゃありませんかと、にこりと笑って見せた。自分は黙って、顔を枕から離した。腕組をしながら、どうしても死ぬのかなと思った。
　しばらくして、女がまたこう云った。
「死んだら、埋（う）めて下さい。大きな真珠貝で穴を掘って。そうして天から落ちて来る星の破片（かけ）を墓標（はかじるし）に置いて下さい。そうして墓の傍に待っていて下さい。また逢（あ）いに来ますから」
　自分は、いつ逢いに来るかねと聞いた。
「日が出るでしょう。それから日が沈むでしょう。それからまた出るでしょう、そうしてまた沈むでしょう。――赤い日が東から西へ、東から西へと落ちて行くうちに、――あなた、待っていられますか」
　自分は黙って首肯（うなず）いた。女は静かな調子を一段張り上げて、
「百年待っていて下さい」と思い切った声で云った。
「百年、私の墓の傍（そば）に坐って待っていて下さい。きっと逢いに来ますから」
　自分はただ待っていると答えた。すると、黒い眸（ひとみ）のなかに鮮（あざやか）に見えた自分の姿が、ぼうっと崩（くず）れて来た。静かな水が動いて写る影を乱したように、流れ出したと思ったら、女の眼がぱちりと閉じた。長い睫（まつげ）の間から涙が頬へ垂れた。――もう死んでいた。
　自分はそれから庭へ下りて、真珠貝で穴を掘った。真珠貝は大きな滑（なめら）かな縁（ふち）の鋭（する）どい貝であった。土をすくうたびに、貝の裏に月の光が差してきらきらした。湿（しめ）った土の匂（におい）もした。穴はしばらくして掘れた。女をその中に入れた。そうして柔らかい土を、上からそっと掛けた。掛けるたびに真珠貝の裏に月の光が差した。
　それから星の破片（かけ）の落ちたのを拾って来て、かろく土の上へ乗せた。星の破片は丸かった。長い間大空を落ちている間（ま）に、角（かど）が取れて滑（なめら）かになったんだろうと思った。抱（だ）き上（あ）げて土の上へ置くうちに、自分の胸と手が少し暖くなった。
　自分は苔（こけ）の上に坐った。これから百年の間こうして待っているんだなと考えながら、腕組をして、丸い墓石（はかいし）を眺めていた。そのうちに、女の云った通り日が東から出た。大きな赤い日であった。それがまた女の云った通り、やがて西へ落ちた。赤いまんまでのっと落ちて行った。一つと自分は勘定（かんじょう）した。
　しばらくするとまた唐紅（からくれない）の天道（てんとう）がのそりと上（のぼ）って来た。そうして黙って沈んでしまった。二つとまた勘定した。
　自分はこう云う風に一つ二つと勘定して行くうちに、赤い日をいくつ見たか分らない。勘定しても、勘定しても、しつくせないほど赤い日が頭の上を通り越して行った。それでも百年がまだ来ない。しまいには、苔（こけ）の生（は）えた丸い石を眺めて、自分は女に欺（だま）されたのではなかろうかと思い出した。
　すると石の下から斜（はす）に自分の方へ向いて青い茎（くき）が伸びて来た。見る間に長くなってちょうど自分の胸のあたりまで来て留まった。と思うと、すらりと揺（ゆら）ぐ茎（くき）の頂（いただき）に、心持首を傾（かたぶ）けていた細長い一輪の蕾（つぼみ）が、ふっくらと弁（はなびら）を開いた。真白な百合（ゆり）が鼻の先で骨に徹（こた）えるほど匂った。そこへ遥（はるか）の上から、ぽたりと露（つゆ）が落ちたので、花は自分の重みでふらふらと動いた。自分は首を前へ出して冷たい露の滴（したた）る、白い花弁（はなびら）に接吻（せっぷん）した。自分が百合から顔を離す拍子（ひょうし）に思わず、遠い空を見たら、暁（あかつき）の星がたった一つ瞬（またた）いていた。
「百年はもう来ていたんだな」とこの時始めて気がついた。

戻る