段落タグ<p>の設定

 

pとは段落に使われるタグである。このpにスタイルを適用しておくと、文章をだらだらずらずら書いたときに、いちいち文字飾りをすることなく、よみやすくすることができると思われる。

このpを[書式]メニュー⇒[スタイル]から設定してもいいのだが、できあがったコードは複雑で、読みにくいものができあがる。少しの変更をするときに面倒になってくる。スタイルシートを使って 必要な項目だけを設定することにより、よりスマートに設定できる。ほかのタグに対する理解も深くなっていく効果も期待できる。

 

何についての設定か 記述 設定値 記述例
左余白 margin-left 100 など margin-left: 100
右余白 margin-right 100 など margin-right: 100
段落の上の間隔 margin-top 0 など margin-top: 0
段落の下の間隔 margin-bottom 0 など margin-bottom: 0
行の間隔 line-height 150% など line-height: 150%
文字の大きさ font-size 1em など font-size: 1em
文字の色 color #RRGGBB など color: #33bb88
1行目のインデント text-indent 1em など text-indent:1em
文字の種類(フォント) font-family HG行書体 など font-family:"HG行書体"
色の#RRGGBBは、R=Red, G=Green, B=Blueのことである。それぞれ2桁で00〜FF(16進数)で指定する。

フォントや色設定画面などで「その他の色」を見ると、色を選べる。そのときに16進数を調べることができる。
フォントの名前は、[書式]メニュー⇒[フォント]をクリックし、フォントの一覧で確認し、間違えないように書き写す。

 

単位について

 

単位 記号 意味 補足
ピクセル px 画面を構成する点 教室画面はヨコが 1280px
ポイント pt 文字の大きさ ホームページ標準は 12pt
エム em 1emを基本の大きさ 文字を2倍にするときは 2em
パーセント % 100%が基本的な大きさ 間隔を2倍にするときは 200%

 

なお、このページのスタイルは

p {margin-left:100px; margin-right: 170px; text-indent:1em; line-height:170%; font-size: 0.9em; margin-top:0; margin-bottom:0}

である。表以外の部分の文章に効いている。

単位はそれぞれ標準的に用いられるものがあるが、できることならば省略せずに記述したほうがよい。

 


 

読みやすさを考えましょう。

  ◇行間がつまっていると読みにくい

  ◇ページの右端、左端にくっついていると読みにくい

  ◇背景色と同じような色の文字は読みにくい

  ◇フォントを指定しても、見ているコンピュータにそのフォントのファイルが用意されていないと同じようには見えない