『 ２８ 構造編（１）Bトップページの作成-CSS編⑥ページ余白をつくる 』

• <<前の記事へ
• 次の記事へ>>

ﾄｯﾌﾟﾍﾟｰｼﾞ
• ●記事トップ
• 
• 『　２８　』
  
• 2008年12月
• 
• ２７日

• ※[ ６ ] ＨＴＭＬ-構造編(1)B トップページの作成-CSS編
  
• HTMLファイルにCSSファイルを反映させる～⑥ページ余白をつくる

---

●仮トップページ完成

読みやすいサイトにするテクニックです。

ページコンテンツ内の上下左右

『　２６ ・・・行の高さ・・・　』と重複しますが単調な文の羅列・文の行間が狭いと読みづらくなります。

そこで、ページ
内の上下左右に
適切な余白を入
れて読みやすい
文にしてみます。

■■■■■■■

仲間だいすけ(ＤＡＩ)のＨＰ制作過程

■■■■■■■
【上下左右相当分あけるとよみやすい(一般論)】

プロパティ、値
は以下のように
入力します。

daisukenakamacontainer {
margin-left: 27px; margin-right: 27px;
margin-bottom: 18px;
padding-bottom: 22px; }

ページ全体の余白の場合、要素の外側余白margin/要素の内側余白paddingをそれぞれ設定することにする仲間でした(^^)

このページ『　２８　』のトップ

応用

#上記記述→ページ全体の余白設定なのでプロパティはdaisukenakamacontainer要素になっています。(最背景の１つ前)

異なるコンテンツ要素ごとに余白の幅を変えたほうが読みやすいサイトになります。変更したいコンテンツ要素（例　トップページの新着情報部分）については再度設定します。
読ませたい文章部分は左右→１～２文字分、上下→0.1～0.5文字分程あけると読みやすいです。

(例)　daisukenakamawhatsnew{
padding-top: 1px; padding-bottom: 1px;
padding-left: 5px; padding-right: 5px; }

このページ『　２８　』のトップ

まとめ

●（参考）→ya●ooさんのトップページ

このページ『　２８　』のトップ

• <<前の記事へ
• 次の記事へ>>