2012/02-2024/04/03

HTML: 文章レイアウト

文章の余白、行間の調整、1行の文字数

TestHTML_layout_p01.html
行間と 1行の文字数のサンプル。行間が狭すぎるとどうなるか？、1行の文字数が多すぎるとどうなるか？。

TestHTML_layout_background01.html
背景色と文字の見え方の違い。

TestHTML_layout_p02.html
div の枠の中に見出し (h1,h2...) や段落 (p) を並べるサンプル。 p の左右の余白調整など。

TestJS_edit_div01.html
文書の幅、フォント、文字サイズ、行間をシミュレーションする。
HTMLツールサンプル (1)

文字の間の余白を調整する場合は CSS の letter-spacing を使います。文字間隔を調整する目的で文字の間に不要なスペースや   を入れない方が良いです。

TestCSS_letterspacing01.html
文字間隔の調整。letter-spacing のサンプル。
TestJS_edit_html01.html
編集シミュレーション。

TestCSS_letterspacing02.html
見出し (H タグ) の文字間隔を調整するサンプル。

文字列を均等割り付けする場合は CSS の text-align: justify; や text-align-last: justify; を使用します。

TestCSS_text_align_justify01.html
均等割り付け (text-align: justify;) のサンプル。文章の行末が揃うように調整します。

TestCSS_text_align_last_justify01.html (2024)
1行の文字列を均等割り付けする場合は text-align-last: justify; を使います。

TestCSS_table_text_justify01.html (2024/02)
表の1列目の見出しが均等割り付けのサンプル。
HTML: 文章レイアウト: 表を作る

TestCSS_text_overflow01.html
目次などのテキストが枠からあふれるときに、文字列の末尾を「・・・」に置き換えるサンプル。 CSS の text-overflow: ellipsis; を設定します。
CSS overflow

TestCSS_center_text_align01.html
p タグ内のテキストの左寄せ、センタリング、右寄せのサンプル。 CSS の text-align で指定します。

TestHTML_div_margin_auto01.html (2022)
ブロック要素 (div タグ, p タグなど) の左寄せ、センタリング、右寄せのサンプル。 CSS の margin で指定します。
CSS display: inline, block, inline-block など

TestJS_edit_html01.html
div タグ、p タグ。文章の左寄せ、センタリング、右寄せのサンプル。
div も p もブロック要素 (display: block; の要素) で CSS の設定の仕方は同じです。h1 タグ、li タグ、dt タグ、dd タグ、 main タグ、nav タグなども同じように設定できます。
CSS: display: inline, block など