Refererテキスト、文字列 
文字（テキスト）の入力は、ホームページ作成にとって基本です。
文字に関する装飾などは、下図のツールバーにて行います。
また、文字の間隔などの設定は、右クリック→「スタイルの設定」で行います。
|
ツールバーの表示が出ていない場合は、「表示」→「ツールバー」より、表示させて下さい。
左右や真ん中に揃える
文字の左右、真ん中の揃えは、ツールバーの
をクリックします。
揃えた場合のタグは、以下のようになります。
左に揃える
| 左に揃える |
<p align="left">左に揃える</p>
右に揃える
| 右に揃える |
<p align="right">右に揃える</p>
真ん中に揃える
| 真ん中に揃える |
<p align="center">真ん中に揃える</p>
文字の編集
文字を大きくしたり、色を変えたりと文字装飾がいろいろ出来ます。
サイズ
文字のサイズを変えるには、ツールバーの
をクリックします。
- 文字を大きくするには、「一番左のA」をクリック。
- 文字を小さくするには、「左から2番目のA」をクリック。
１回押すごとに、大きくなったり、小さくなったりします。
タグで表すと
<font size="+1">テキスト</font>
となります。
「size="+1"」というのは、基準のフォントサイズ「+1」という事になります。
基準のフォントサイズは、「3」です。
１回大きくすると、「+1」なので、基準の「3」にプラス「1」という事でフォントサイズは「4」になります。
フォントサイズは、「1～7」までと決まっています。
最大値は「+4」（ツールバーボタン4回押す）、最小値は「-2」（ツールバー2回押す）となります。
- フォントサイズ
- -2（基準 3 - 2 = 1）
- -1（基準 3 - 1 = 2）
- 0（基準 3 ）
- +1（基準 3 + 1 = 4）
- +2（基準 3 + 2 = 5）
- +3（基準 3 + 3 = 6）
- +4（基準 3 + 4 = 7）
- フォントサイズの見え方
- フォントサイズ「-2」
- フォントサイズ「-1」
- フォントサイズ「0」
- フォントサイズ「+1」
- フォントサイズ「+2」
- フォントサイズ「+3」
- フォントサイズ「+4」
太字
文字を太字にするには、ツールバーの
の「B」をクリックします。
タグで表すと
| テキスト |
<b>テキスト</b>
となります。
この「<b>」は、視覚的に太字にしたい場合に使います。
<em>タグ
文字を強調したい場合は、<em>タグを使います。
メニューの「挿入」→「その他」→「HTML タグ」で「タグの挿入」ダイヤログが出てきます。
「強調」のみにチェックをいれ、「EM」となっている部分をクリックし、「挿入」ボタンを押します。
<em>タグは通常、斜体で表されます。
| 強調したいテキスト |
<em>強調したいテキスト</em><strong>タグ
太字にする目的で、一番使用度が高いと思われるのが、<strong>タグです。
<em>タグよりも、さらに強く強調するのが<strong>タグです。
メニューの「挿入」→「その他」→「HTML タグ」で「タグの挿入」ダイヤログが出てきます。
「強調」のみにチェックをいれ、「STRONG」となっている部分をクリックし、「挿入」ボタンを押します。
<strong>タグは、視覚的には太字で表されます。
| さらに強調したいテキスト |
<strong>さらに強調したいテキスト</strong>色
文字の色は、カラー名かRGB値を指定する事で、変更します。
- カラー名
- 黒色はblack、赤色はred、青色はblueなど
- RGB値
- 赤と緑と青の3色それぞれ混ぜる分量を2桁の16進数（0～9の10個の数字とa～ｆの6個の英字）を使って指定、「#rrggbb」（#赤赤緑緑青青）の6桁など
- RGB値で色を指定するときは、6桁の英数字の前に＃(ハッシュマーク）が付く
- 黒色は「#000000」、赤色は「#ff0000」、青色は「#0000ff」など
参考：とほほの色入門・色見本
文字の色を変えるには、ツールバーのの「赤の下線のA」という部分をクリックします。（左から3、4番目）
赤線の部分を押した場合は、以下の図のようになり、色が指定出来ます。
ツールバーから指定する場合は、RBG値で指定されます。
| 赤い文字 |
<font color="#ff0000">赤い文字</font> <font color="red">赤い文字</font>
書体
文字の書体を変えるには、ツールバーの一番右の部分をクリックします。
クリックすると下の図のようなダイヤログで書体を指定します。
このダイヤログは、色やサイズなども決められます。
文字の行間を空ける
何行も文章を書く時は、行間を空けた方が読みやすくなります。
この行間の設定は、ページ全体にすると、いちいち指定せずに楽に出来ます。
特に、テキスト中心のサイトの場合は、必需とも言えるでしょう。
行間を空ける手順
- 右クリック（又はメニューの編集）→「スタイルの設定」をクリック
- 「文字のレイアウト」タブをクリック
- 一番上の「行間」の右にある「予約語」のプルダウンメニューより「倍」を選択し、「1.5」と入力する
- 「OKボタン」をクリック
予約語は、「倍」がお勧めです。理由は行間を設定した後で、文字を大きくした場合に行間との文字が重ならない為です。
「1.5倍」という数値は、お好みで設定して下さい。2倍にすると、行間に1文字入るくらい行間が空きます。
全体の行間を空ける場合
<body style="line-height : 1.5;">
ある領域に行間を空ける
<div style="line-height : 1.5;">行間を空ける１行目<br /> 行間を空ける領域...</div>
段落（<p>）のみ行間を空ける
<p style="line-height : 1.5;">行間を空ける１行目<br /> 行間を空ける２行目</p>
文字の間隔を空ける
文字と文字の間隔を空けたい場合は、行間を空ける手順と同様のダイヤログを出します。
間隔を空ける場合は、ページ全体ではなく部分的というのが多いと思いますので<span>タグを使います。
- メニューの「挿入」→「その他」→「HTML タグ」で「タグの挿入」ダイヤログが出てきます。
- 「文字の属性」のみにチェックを入れ、「SPAN」を選択し、挿入をクリックします。
- 「スタイルの設定」ダイヤログが出てきますので、「文字のレイアウトタブ」を選択します。
- 「文字間」の「予約語」のプルダウンメニューより「文字の高さ」を選択し、「数値」を入力する。
- 数値「2」の場合は、だいたい2文字分くらい間隔が空きます。
 |
<span style="letter-spacing : 2em;">文字の間隔</span>
単語の間隔を空ける
半角スペースで区切られた単語と単語の間隔を指定するもので、主に英文などに使用します。
用途として分けるなら、「文字の間隔を空ける」が日本語、「単語の間隔を空ける」というのは、英語（英文）という事になります。
ホームページ・ビルダーでいうと、「ワード間」という項目になります。
この設定も「文字の間隔を空ける」と同じようにスタイルの設定で行います。
- 右クリック（又はメニューの編集）→「スタイルの設定」をクリック
- 「文字のレイアウト」タブをクリック
- 「ワード間」の「予約語」のプルダウンメニューより「文字の高さ」を選択し、「数値」を入力する。
- 数値「2」の場合は、だいたい2文字分くらい間隔が空きます。
文字と文字の間が半角（全角でも可）空いていると間隔が空くので、連続する文字の間隔は空きません。
「home page builder is new」という英文があったとすると、以下のような表示となります。
 |
<div style="word-spacing : 2em;">home page builder is new</div>
文字を指定の位置から開始する
文章の段落などの一行目のインデント幅（字下げ幅）を指定する際に使用します。
HTMLタグは、<text-indent>を使用します。
負の値（マイナス）も指定出来ますが、初めの数文字が欠けてしまう恐れもありますので、極力使用しないようにしましょう。
| ホームページ・ビルダーは、初めての方でもクイックに美しいデザインのWebが作れるホームページ/ブログ作成ソフトのベストセラー。 |
<p style="text-indent : 2em;">ホームページ・ビルダーは、初めての方でもクイックに美しいデザインのWebが作れるホームページ/ブログ作成ソフトのベストセラー。</p>
段落
文章などを書く際に、文章の種類など段落で分けて使用すると読みやすくなります。
あるWEBサイトによると、文章の2～5行毎に段落を分けると良いとされています。
HTMLタグでは、<p>で指定します。
ホームページ・ビルダーでの段落の設定は、見出しの設定も同じ場所で設定出来ます。
ツールバーのプルダウンメニューより、指定出来ます。
見出しは、記事の内容が一目で分かるように付けられた題名（章題）の事です。
この見出しと段落を上手く使い分けて、文章を読みやすくしましょう。
見出しは、<h1>～<h6>まであり、<h1>が一番大きな見出しとなります。
<h1>が「見出し１」、<h6>が「見出し6」となります。
<h1>の次は、<h2>という風に上から順番に書いていきましょう。
見出しの例や注意事項
- <h1>は、ページの題名、1ページに1つ、先頭に書くようにする
- <h2>は部、1ページに1つ以上でも構わない
- <h3>は章、1ページに1つ以上でも構わない
- <h4>は節、1ページに1つ以上でも構わない
- <h5><h6>は項、1ページに1つ以上でも構わない
 |
<h1>見出し１（h1）</h1> <p>見出し１の文章。</p> <h2>見出し2（h2）</h2> <p>見出し2の文章</p> <h3>見出し3（h3）</h3> <p>見出し3の文章・・・<br /> ・・・<br /> ・・・。</p> <p>見出し3の文章・・・段落分け<br /> ・・・<br /> ・・・。</p>
リスト
リストは、何か箇条書きでまとめたい時に使用します。
リストには、番号なしリスト（ULタグ）、番号付きリスト（OLタグ）、説明付きリスト（DLタグ）の3種類から選択出来ます。
また、「指定して挿入」より、自由にリストを選択する事が出来ます。
番号なしリスト
項目の前に「○」や「●」 が付くリストが番号なしのリストです。
メニューバーから「挿入」→「リスト」→「番号なしリスト」を選択します。
 |
<ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
また、番号なしリストには、「四角」「円盤」「円」の3種類があります。
リストの形を変えたい場合は、リストのエリアにマウスを置きます。
右クリック→「属性の変更」でダイヤログが出てきます。
全体を変えたい場合は、リストタブの「項目のタイプ」より選択します。
1行のみ変えたい場合は、項目タブの「項目のタイプ」より選択します。
全体を四角にした場合
<ul type="square"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
1行ずつ指定した場合
 |
<ul> <li type="square">リスト1（四角）</li> <li type="disc">リスト2（円盤）</li> <li type="circle">リスト3（円）</li> </ul>
番号付きリスト
項目の前に番号 (1, 2, 3, i, ii, iii など) が付くリストが番号付きリストです。
メニューバーから「挿入」→「リスト」→「番号付きリスト」を選択します。
 |
<ol> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol>
また、番号付きリストには、5種類が選択出来て、以下の種類があります。
- 「数字」・・・（1）
- 「アルファベット (小)」・・・（a）
- 「アルファベット (大)」・・・（A)
- 「ローマ数字 (小)」・・・（i）
- 「ローマ数字 (大)」・・・（I）
番号なしリスト同様に、右クリック→「属性の変更」より、ダイヤログを出します。
全体を変えたい場合は、リストタブの「項目のタイプ」より選択します。
1行のみ変えたい場合は、項目タブの「項目のタイプ」より選択します。
全体を「ローマ数字 (小)」にした場合
 |
<ol type="i"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol>
1行ずつ指定した場合
 |
<li type="1">リスト（数字）</li> <li type="a">リスト（アルファベット小）</li> <li type="A">リスト（アルファベット大）</li> <li type="i">リスト（ローマ字小）</li> <li type="I">リスト（ローマ字大）</li> </ol>
説明付きリスト
説明付きリスト（定義型リスト）は、主に用語説明等に使われます。
初めて使うには、操作が分かりづらいかもしれませんので以下の様に順序を記述します。
- メニューバーから「挿入」→「リスト」→「説明付きリスト」を選択
- 説明した語句を入力
- 「エンター（Enter)」を押す」
- 少しインデント（字下げ）となるので、語句を説明する文を入力
- 語句を2行以上書く場合は、Shiftを押しながらEnterを押す
 |
<dl> <dt>ホームページ・ビルダー（説明する語句）</dt> <dd>ホームページ・ビルダーは、初めての方でも<br /> クイックに美しいデザインのWebが作れる<br /> ホームページ/ブログ作成ソフトのベストセラー。<br /> （語句の説明）</dd> </dl>
リストを指定する
何種類かあるリストタグの中から、リストを選択します。
メニューバーから「挿入」→「リスト」→「指定して挿入」を選択します。
選択すると「リストの挿入」ダイヤログが出てきます。
「既存のリストマークを使う」場合は、リストマークを選択します。
リストマークに画像を使う
リストマークを画像にしたい場合は、「リストを指定する」で出したダイヤログから選択します。
画像は、自分で作った画像か素材集から選びます。
素材集から選択する場合は、「素材集から開く」より素材を選択します。
ルビ
ルビとは、ふりがなの事で主に漢字のふりがなを付ける為に使います。
一部のブラウザで（Netscapeなど）は対応していないので、あまりお勧め出来ません。
使用時は、ふりがなの文字の大きさも考慮に入れて、ルビを使います。
まず、ルビを付けたい文字を選択しておきます。
ツールバーのの「S」横の矢印をクリックし、「ルビ」を選択してダイヤログを出します。
文字を選択しておくと、「対象文字列」には、その文字が入りますので、「ルビ」にふりがなを入力します。
「OK」を押すと、ページ編集画面では「人気(にんき)」という風になります。
プレビュー画面では、ちゃんとふりがなが付きます。
| プレビュー画面 |  |
| ページ編集画面 | ホームページ・ビルダーは、人気(にんき)のあるWEB作成(さくせい)ソフトです。 |
ホームページ・ビルダーは、<ruby><rb>人気</rb><rp>(</rp><rt>にんき</rt><rp>)</rp></ruby>のあるWEB<ruby><rb>作成</rb><rp>(</rp><rt>さくせい</rt><rp>)</rp></ruby>ソフトです。
マーキー
マーキー（ marquee）とは、スクロール領域の事で、画面上で文字を左から右へ動かすといった事が出来ます。動く文字に気を取られ多用してしまうと、訪問者にとっては読みづらかったり、目が疲れたりするので注意しましょう。
メニューより、「挿入」→「その他」→「マーキー」を選択すると、ダイヤログが出ます。
基本的には、「表示文字列」に動かしたい文字を入れるだけで出来ます。
移動スピードなど調整する場合は、以下の詳細をご覧下さい。
- 動作
- 「動き」
- 「(自動)」・・・動作の指定を行いません。
- 「スクロール」・・・文字列が指定した方向に流れ去ります。
- 「スライド」・・・文字列が指定した方向に流れ、文字列の先端がスクロール領域の端に来るとそこでスクロールが止まり、文字列が表示されたままとなります。
- 「交互」・・・文字列が指定した方向にスライドし、文字列の先端がスクロール領域の端に来るとそこで逆方向に折り返します。
- 「動き」
- 「方向」
- 「(自動)」・・・動作の指定を行いません。
- 「左へ」・・・文字列が右から左へ動きます。
- 「右へ」・・・文字列が左から右へ動きます。
- 「上へ」・・・文字列が下から上へ動きます。
- 「下へ」・・・文字列が上から下へ動きます。
- 繰り返し（動作の繰り返し回数を指定）
- 「繰り返し」
- 「(自動)」・・・繰り返しの指定を行いません。
- 「連続」・・・動作を連続して繰り返します。iモード携帯端末(502iシリーズ以降)の場合は連続を指定することはできません。
- 「指定回数」・・・指定した回数だけ動作を繰り返します。iモード携帯端末(502iシリーズ以降)における、最大指定可能回数は16回となっています。
- 「回数」・・・「指定回数」を選択した時の回数をここで指定します。
- 「繰り返し」
- 表示速度（マーキーの表示速度に関する指定） iモード携帯端末では、この設定はできません。
- 「遅延時間」・・・マーキー文字列が、表示される間隔をミリ秒単位で指定します。省略時は、85 (ミリ秒) となります。
- 「移動量」・・・マーキー文字列が、「移動速度」間隔に移動する量をピクセル単位で指定します。省略時は、6(ピクセル)となります。
- 「指定した速度で表示する」・・・「遅延速度」で 60(ミリ秒)以下を指定した場合に、このチェック ボックスがオフの状態では、その値は無効となります。指定した「遅延速度」、「移動量」でマーキー文字列を表示させるには、このチェック ボックスをオンにして下さい。
- サイズ（マーキーのサイズに関する指定） iモード携帯端末では、この設定はできません。
- 「幅」・・・画像の幅をピクセル単位で指定します。
- 「高さ」・・・画像の高さをピクセル単位で指定します。
- 「背景色」・・・背景の色を指定します。背景色ボタンで背景に設定する色を選択します。
Attach file:
tb-text-yose.gif 7DL
[Info] 
tb-text.gif 5DL
[Info] 
tb-text-wordkan.gif 6DL
[Info] 
tb-text-strong.gif 5DL
[Info] 
tb-text-shosiki.gif 4DL
[Info] 
tb-text-rubi2.gif 7DL
[Info] 
tb-text-rubi1.gif 8DL
[Info] 
tb-text-mozikan.gif 7DL
[Info] 
tb-text-mozi2.gif 5DL
[Info] 
tb-text-mozi1.gif 5DL
[Info] 
tb-text-midasi.gif 7DL
[Info] 
tb-text-maki1.gif 10DL
[Info] 
tb-text-list8.gif 8DL
[Info] 
tb-text-list7.gif 7DL
[Info] 
tb-text-list9.gif 5DL
[Info] 
tb-text-list5.gif 7DL
[Info] 
tb-text-list6.gif 10DL
[Info] 
tb-text-list4.gif 8DL
[Info] 
tb-text-list3.gif 7DL
[Info] 
tb-text-list10.gif 8DL
[Info] ... more 8 files. [ Show All ]
| Page Info | |
|---|---|
| Page Name : | ホームページ・ビルダー マニュアル/テキスト |
| Page aliases : | None |
| Page owner : | hpb |
| Can Read | |
| Groups : | All visitors |
| Users : | All visitors |
| Can Edit | |
| Groups : | 登録ユーザ |
| Users : | No one |