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



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

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

ブロック要素の外側の余白を設定する場合には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;
}

と記述して下さい。
 
     第一夜

 こんな夢を見た。
 腕組をして枕元にすわっていると、仰向あおむきに寝た女が、静かな声でもう死にますと云う。女は長い髪を枕に敷いて、輪郭りんかくやわらかな瓜実うりざねがおをその中に横たえている。真白な頬の底に温かい血の色がほどよく差して、くちびるの色は無論赤い。とうてい死にそうには見えない。しかし女は静かな声で、もう死にますと判然はっきり云った。自分もたしかにこれは死ぬなと思った。そこで、そうかね、もう死ぬのかね、と上からのぞき込むようにして聞いて見た。死にますとも、と云いながら、女はぱっちりと眼をけた。大きなうるおいのある眼で、長いまつげに包まれた中は、ただ一面に真黒であった。その真黒なひとみの奥に、自分の姿があざやかに浮かんでいる。
 自分はとおるほど深く見えるこの黒眼の色沢つやを眺めて、これでも死ぬのかと思った。それで、ねんごろに枕のそばへ口を付けて、死ぬんじゃなかろうね、大丈夫だろうね、とまた聞き返した。すると女は黒い眼を眠そうに※(「目+爭」、第3水準1-88-85)みはったまま、やっぱり静かな声で、でも、死ぬんですもの、仕方がないわと云った。
 じゃ、わたしの顔が見えるかいと一心いっしんに聞くと、見えるかいって、そら、そこに、写ってるじゃありませんかと、にこりと笑って見せた。自分は黙って、顔を枕から離した。腕組をしながら、どうしても死ぬのかなと思った。
 しばらくして、女がまたこう云った。
「死んだら、めて下さい。大きな真珠貝で穴を掘って。そうして天から落ちて来る星の破片かけ墓標はかじるしに置いて下さい。そうして墓の傍に待っていて下さい。またいに来ますから」
 自分は、いつ逢いに来るかねと聞いた。
「日が出るでしょう。それから日が沈むでしょう。それからまた出るでしょう、そうしてまた沈むでしょう。――赤い日が東から西へ、東から西へと落ちて行くうちに、――あなた、待っていられますか」
 自分は黙って首肯うなずいた。女は静かな調子を一段張り上げて、
「百年待っていて下さい」と思い切った声で云った。
「百年、私の墓のそばに坐って待っていて下さい。きっと逢いに来ますから」
 自分はただ待っていると答えた。すると、黒いひとみのなかにあざやかに見えた自分の姿が、ぼうっとくずれて来た。静かな水が動いて写る影を乱したように、流れ出したと思ったら、女の眼がぱちりと閉じた。長いまつげの間から涙が頬へ垂れた。――もう死んでいた。
 自分はそれから庭へ下りて、真珠貝で穴を掘った。真珠貝は大きななめらかなふちするどい貝であった。土をすくうたびに、貝の裏に月の光が差してきらきらした。湿しめった土のにおいもした。穴はしばらくして掘れた。女をその中に入れた。そうして柔らかい土を、上からそっと掛けた。掛けるたびに真珠貝の裏に月の光が差した。
 それから星の破片かけの落ちたのを拾って来て、かろく土の上へ乗せた。星の破片は丸かった。長い間大空を落ちているに、かどが取れてなめらかになったんだろうと思った。げて土の上へ置くうちに、自分の胸と手が少し暖くなった。
 自分はこけの上に坐った。これから百年の間こうして待っているんだなと考えながら、腕組をして、丸い墓石はかいしを眺めていた。そのうちに、女の云った通り日が東から出た。大きな赤い日であった。それがまた女の云った通り、やがて西へ落ちた。赤いまんまでのっと落ちて行った。一つと自分は勘定かんじょうした。
 しばらくするとまた唐紅からくれない天道てんとうがのそりとのぼって来た。そうして黙って沈んでしまった。二つとまた勘定した。
 自分はこう云う風に一つ二つと勘定して行くうちに、赤い日をいくつ見たか分らない。勘定しても、勘定しても、しつくせないほど赤い日が頭の上を通り越して行った。それでも百年がまだ来ない。しまいには、こけえた丸い石を眺めて、自分は女にだまされたのではなかろうかと思い出した。
 すると石の下からはすに自分の方へ向いて青いくきが伸びて来た。見る間に長くなってちょうど自分の胸のあたりまで来て留まった。と思うと、すらりとゆらくきいただきに、心持首をかたぶけていた細長い一輪のつぼみが、ふっくらとはなびらを開いた。真白な百合ゆりが鼻の先で骨にこたえるほど匂った。そこへはるかの上から、ぽたりとつゆが落ちたので、花は自分の重みでふらふらと動いた。自分は首を前へ出して冷たい露のしたたる、白い花弁はなびら接吻せっぷんした。自分が百合から顔を離す拍子ひょうしに思わず、遠い空を見たら、あかつきの星がたった一つまたたいていた。
「百年はもう来ていたんだな」とこの時始めて気がついた。


戻る