セクション3 テキスト
3-1 改行
| 文章の改行の時は、以下のように使用します。 改行したい部分のソースコードに<br>と記述します。 ※<br>には閉じタグはありません。 |
| サンプル |  |
ソースコード |
| 三日月や ふわりと梅に うぐいすが |
三日月や<br> ふわりと梅に<br> うぐいすが |
|
|
|
ちょっとおねむになりかけた午前0時。うっかりShiftキーを押さずに改行。気がつけばそこに<p>タグが・・・。
3-2 改行の禁止
| 改行を禁止したい文章に適応してください。 改行したくないテキストの頭に<nobr>、最後に閉じタグの</nobr>を記述します。 |
| サンプル 1 | |
ソースコード 1 |
| この部分は改行されません | <nobr>この部分は改行されません</nobr> |
|
|
|
tdに文字を挿入した場合、自動的に改行されてしまうことがあります。
そんなときは<nobr>のタグを使うと便利です。
そんなときは<nobr>のタグを使うと便利です。
3-3 文字の色
| 文章中の一部分の文字の色を指定することができます。 色は#で始まるカラーコードか、英語で指定します。 カラーコードの方が、より詳細な色味を設定することが可能です。 <font color="カラーコード"></font>にはさまれた部分だけ指定した色に変わります。 |
| サンプル | |
ソースコード |
| 茶の花にかくれんぼする雀かな | 茶の花に<font color="#ff0000">かくれんぼする</font>雀かな |
|
|
|
フォントタグは今後、廃止される予定のタグです。スタイルシートによる色の変更方法をご覧ください。
色はredなど英語でも指定できますが、きちんと#で始まるカラーコードでの指定をおすすめします。
色はredなど英語でも指定できますが、きちんと#で始まるカラーコードでの指定をおすすめします。
関連 |
| 文字の色を変更する |
3-4 文字の大きさ
| 文章中の文字の大きさを変更する方法です。 大きさは、相対値・絶対値での指定が可能です。 相対値：-7〜+7 絶対値：1〜7 <font size="文字の大きさ"></font>にはさまれた部分だけ文字の大きさが変わります。 |
| サンプル | |
ソースコード |
|
秋風に 歩いて逃げる ほたるかな |
<font size="+3"> 秋</font>風に<br> 歩いて逃げる<br> <font size="-3">ほたる</font>かな |
|
|
|
フォントタグは今後、廃止される予定のタグです。スタイルシートによる大きさの変更方法をご覧ください。
関連 |
| 文字の大きさを変更する |
3-5 行ぞろえ
| 文章の行揃えを<div>で指定します。 行揃えは、left左揃え・center中央ぞろえ・right右揃えが指定できます。 |
| サンプル | |
ソースコード |
|
雀の子
そこのけそこのけ
御馬が通る |
<div align="left">雀の子</div> <div align="center">そこのけそこのけ</div> <div align="right">御馬が通る</div> |
|
|
|
divってけっこう使えるいいヤツなんだよね・・・・。
関連 |
| 文字の表示位置をスタイルシートで定義する |
3-6 段落
| 段落を<p>で設定することができます。 |
| サンプル | |
ソースコード |
|
朝顔の 数えるほどに なりにけり |
朝顔の<p>数えるほどに</p>なりにけり |
3-7 箇条書き（リスト）1
| 箇条書き（リスト）にしたい時に、<ul>ソースコードを使用します。 <li>と組み合わせることで左にインデントが発生します。 |
| サンプル1 | |
ソースコード1 |
|
<ul> <li>やせ蛙</li> <li>負けるな一茶</li> <li>これにあり</li> </ul> |
| 入れ子にしても使用できます。 |
| サンプル2 | |
ソースコード2 |
|
<ul> <li>やせ蛙</li> <li>負けるな一茶</li> <li>これにあり <ul> <li>やせ蛙</li> <li>負けるな一茶</li> <li>これにあり</li> </ul> </li> </ul> |
|
|
関連 |
| リストをスタイルシートで定義する |
3-8 箇条書き（リスト）2
| 番号つきで箇条書き（リスト）にしたい時に、<ol>のソースコードを使用します。 <li>と組み合わせることで左にインデントが発生します。 |
| サンプル | |
ソースコード |
|
<ol> <li>春風や</li> <li>牛にひかれて</li> <li>善光寺</li> </ol> |
|
|
関連 |
| リストをスタイルシートで定義する |
3-9 読み仮名
| 漢字などに読み仮名をつけたいとき、二段に表示します。 手間がかかるので、あまり使われず、非対称ブラウザもあるため、読み仮名はタグを使わず（）で記す方法が良いでしょう。 |
| サンプル | |
ソースコード |
| じっとして馬に 鼾 （ かが ） るる蛙かな | じっとして馬に<ruby> <rb>鼾</rb><rp>（</rp> <rt>かが</rt><rp>）</rp></ruby> るる蛙かな |
3-10 上付き・下付
| 文章中に上付き文字、下付き文字の表示をしたいとき。 <sup>が上付き、<sub>が下付き。 本文より小さい字で表示。 行送りが字の分だけ広がります。 |
| サンプル | |
ソースコード |
| （上付き） 50平方センチメートル＝50cm2 （下付き） 脚注などにつかう※1はこうです。 |
（上付き）<br> 50平方センチメートル＝50cm<sup>2</sup><br> <br> （下付き）<br> 脚注などにつかう<sub>※1</sub>はこうです。 |