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}
である。表以外の部分の文章に効いている。
単位はそれぞれ標準的に用いられるものがあるが、できることならば省略せずに記述したほうがよい。
読みやすさを考えましょう。
◇行間がつまっていると読みにくい
◇ページの右端、左端にくっついていると読みにくい
◇背景色と同じような色の文字は読みにくい
◇フォントを指定しても、見ているコンピュータにそのフォントのファイルが用意されていないと同じようには見えない