〜マンガの為のHTML入門〜
|
|---|
|
<TH
valign="top" bgcolor="#ffffff"> <BR> <font size="5" color="orange"> “Information”</font> <BR><BR> <!--コメントスペース--> 〜マンガの為のHTML入門〜 byまんが浪人 Step11.5:文章を書く為には…！ *実際に文章を書く為に必要な HTMLタグの使い方は どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。 </TH></tr></table> |
“Information” 〜マンガの為のHTML入門〜 byまんが浪人 Step11.5:文章を書く為には…！ *実際に文章を書く為に必要な HTMLタグの使い方は どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。 |
では、何か文章を打ち込んでみましょう。 ここではとりあえず このページの上記タイトル部分を 左の“HT欄”の様に打ちこんでみました。 (青い文字部分) その結果が反映されたブラウザが 中央の“モニター欄”の状態です。 御覧になればお解りの通り、 書き込んだ文字が全て連なっています。 これはHTMLファイル上では“Enter”キーを使った 『改行』の指定はブラウザ上には 全く反映されないと言う事を意味しています。 そこで使われるのが『改行タグ』 <BR> (または<br>どちらでも可)です。 |
|---|
|
<TH
valign="top" bgcolor="#ffffff"> <BR> <font size="5" color="orange"> “Information”</font> <BR><BR> <!--コメントスペース--> 〜マンガの為のHTML入門〜<BR> byまんが浪人<BR> <BR> Step11.5:文章を書く為には…！<BR> <BR> *実際に文章を書く為に必要な<BR> HTMLタグの使い方は<BR> どのサンプルの場合も基本は同じですので<BR> ここではサンプル“INDEX-03”を例にします。<BR> </TH></tr></table> |
“Information” 〜マンガの為のHTML入門〜 byまんが浪人 Step11.5:文章を書く為には…！ *実際に文章を書く為に必要な HTMLタグの使い方は どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。 |
『改行タグ』<BR>を 各行の末尾に打ちこんだ状態がこれです。 『改行タグ』<BR>は 改行したい個所に１つ打ち込むと 一行改行する仕組みになっています。 従って空欄の行にも 『改行タグ』<BR>を 打ちこむ事を忘れない様にして下さい。 さて、それでも どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。 という部分が変な状態ですね。 これは、文字のサイズが大きすぎて テーブルの設定した横幅に この２行が納まりきれなかった状態です。 通常こう言う場合は３つの手段が考えられます。 １：『改行タグ』を使って、この２行を４行にしてやる。 ２：テーブルの横幅の設定を変更する。 ３：文字サイズを小さくする。 ここでは『３：文字サイズを小さくする』をやってみます。 |
|---|
|
<TH
valign="top" bgcolor="#ffffff"> <BR> <font size="5" color="orange"> “Information”</font> <BR><BR> <!--コメントスペース--> 〜マンガの為のHTML入門〜<BR> byまんが浪人<BR> <BR> Step11.5:文章を書く為には…！<BR> <BR> <font size="2"> *実際に文章を書く為に必要な<BR> HTMLタグの使い方は<BR> どのサンプルの場合も基本は同じですので<BR> ここではサンプル“INDEX-03”を例にします。<BR> </font> </TH></tr></table> |
“Information” 〜マンガの為のHTML入門〜 byまんが浪人 Step11.5:文章を書く為には…！ *実際に文章を書く為に必要な HTMLタグの使い方は どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。 |
文字サイズの変更には、以前少しだけ触れた 『フォント』( <font size="2">……</font>) というタグを使います。 これはタグに挟まれた“……”部分の文字の サイズや色を指定する為のタグです。 サイズ指定は最小１〜最大７まで指定できます。 ちなみに何も指定していない状態では “３”と同サイズの文字が出ます。 ここでは『*実際に文章を〜』からの 文章全体を挟んで サイズ“２”の文字を指定してみました。 *御覧のように <font size="2">や</font>の 前後の行が空欄状態でも、ブラウザ画面上は全く反映されません。 この様に『改行タグ』を挿入しない限りは HTMLファイル上で幾つ空欄行を増やしても ブラウザには影響しないのです。 ちなみに、こういう特性を活かして多量の空欄行使って それをHTML上の“目印”として使う という利用法をする場合もありますので 憶えておくのも良いでしょう。 |
|---|
|
<TH
valign="top" bgcolor="#ffffff"> <BR> <font size="5" color="orange"> “Information”</font> <BR><BR> <!--コメントスペース--> <font size="4" color="#000066"> 〜マンガの為のHTML入門〜<BR> </font> <font size="1" color="#666600"> byまんが浪人<BR> </font> <BR> <font color="#ff0000"> Step11.5:文章を書く為には…！ </font> <BR> <BR> <BR> <font size="2"> *実際に文章を書く為に必要な<BR> HTMLタグの使い方は<BR> どのサンプルの場合も基本は同じですので<BR> ここではサンプル“INDEX-03”を例にします。<BR> </font> </TH></tr></table> |
“Information” 〜マンガの為のHTML入門〜 byまんが浪人 Step11.5:文章を書く為には…！ *実際に文章を書く為に必要な HTMLタグの使い方は どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。 |
更に 『〜マンガの為のHTML入門〜』 を文字サイズ“４”文字色“#000066”に、 『byまんが浪人』 を文字サイズ“１”文字色“#666600”に指定します。 この場合は <font size="◇" color="#△▲□■▽▼"> ……… ……… ……… </font> という形で sizeとcolorを 同じタグ内に指定すれば良いわけです。 * ◇には文字サイズ #△▲□■▽▼には指定色番号を入れます。 |
|---|
|
<TH
valign="top" bgcolor="#ffffff"> <BR> <font size="5" color="orange"> “Information”</font> <BR><BR> <!--コメントスペース--> <font size="4" color="#000066"> 〜マンガの為のHTML入門〜<BR> </font> <font size="1" color="#666600"> <b> byまんが浪人</b><BR> </font> <BR> <font color="#ff0000"> <i> Step11.5:文章を書く為には…！</i> </font> <BR> <BR> <BR> <font size="2"> <u> *実際に文章を書く為に必要な<BR> HTMLタグの使い方は<BR> どのサンプルの場合も基本は同じですので<BR> ここではサンプル“INDEX-03”を例にします。</u><BR> </font> </TH></tr></table> |
“Information” 〜マンガの為のHTML入門〜 byまんが浪人 Step11.5:文章を書く為には…！ *実際に文章を書く為に必要な HTMLタグの使い方は どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。 |
ここでは指定した文字を 目立たせる為の 文字を装飾するタグを幾つか紹介します。 まず『byまんが浪人』を 文字を太字に指定する <b>……</b> というタグで挟みます。 また『Step11.5:文章を書く為には…！ 』の部分には 文字を斜体にするタグ <i>……</i> を使ってみました。 『*実際に文章を〜』の文章には <u>……</u> を使って下線指定をしてみました。 |
|---|
|
<TH
valign="top" background="back2.jpg"> <BR> <font size="5" color="orange"> “Information”</font> <BR><BR> <!--コメントスペース--> <font size="4" color="#000066"> 〜マンガの為のHTML入門〜<BR> </font> <font size="1" color="#666600"> <b> byまんが浪人</b><BR> </font> <BR> <font color="#ff0000"> <i> Step11.5:文章を書く為には…！</i> </font> <BR> <BR> <BR> <font size="2"> <u> *実際に文章を書く為に必要な<BR> HTMLタグの使い方は<BR> どのサンプルの場合も基本は同じですので<BR> ここではサンプル“INDEX-03”を例にします。 </u><BR> <BR> <img src="back4s.jpg"><BR> <BR> </font> </TH></tr></table> |
“Information” 〜マンガの為のHTML入門〜 byまんが浪人 Step11.5:文章を書く為には…！ *実際に文章を書く為に必要な HTMLタグの使い方は どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。  |
ここでは、文字の書きこみ場所に 画像を挿入するタグを二種類説明します。 まず、背景をイメージファイルで 飾りたい場合に使うのが “HT欄”の一番上の行にある <TH……… background="〜.jpg"> というタグです。 このタグは元々ここに書かれていた <>……bgcolor="#ffffff">を 削除・上書きして書きこんだ物です。 ちなみに、ここで使った“back2.jpg”という イメージファイルは単体では  この程度の大きさのものです。 背景イメージに使われた画像は、 その使われたスペースが埋まるまで 連続して何枚分も貼り付けられる為に “モニター欄”のような状態に見えるのです。 さて、もう１つの画像挿入は Information内の文章の中に画像(絵)を 挿入したい場合に使うタグです。 文章中にイメージを 貼り付けるタグは幾つかありますが、 ここでは最も単純にイメージファイルを 文章中の一行として挿入するタグを記しておきます。 <BR> <img src="■■■■.jpg"><BR> <BR> このタグを必要な場所にコピーして イメージファイル名 （■■■■の部分。 右“HT欄”ではback4sの部分） を書き替えればOKです。 *当然ですが同じフォルダ内に 挿入するべきイメージファイルをいれておく事をお忘れなく。 注意：サンプル“INDEX-04”には最初から背景に イメージファイルタグが使われています。 |
|---|
|
<TD
valign="top" background="back2.jpg"> <BR> <font size="5" color="orange"> “Information”</font> <BR><BR> <!--コメントスペース--> <font size="4" color="#000066"> 〜マンガの為のHTML入門〜<BR> </font> <font size="1" color="#666600"> <b> byまんが浪人</b><BR> </font> <BR> <font color="#ff0000"> <i> Step11.5:文章を書く為には…！</i> </font> <BR> <BR> <BR> <font size="2"> <u> *実際に文章を書く為に必要な<BR> HTMLタグの使い方は<BR> どのサンプルの場合も基本は同じですので<BR> ここではサンプル“INDEX-03”を例にします。 </u><BR> <BR> <img src="back4s.jpg"><BR> <BR> </font> </TD></tr></table> |
“Information” 〜マンガの為のHTML入門〜 byまんが浪人 Step11.5:文章を書く為には…！ *実際に文章を書く為に必要な HTMLタグの使い方は どのサンプルの場合も基本は同じですので ここではサンプル“INDEX-03”を例にします。 |
ここは“HT欄”の最初と最後にある <TH ……> ………… ………… ………… ………… </TH>…… のTHという文字を TD(/TD)にした場合の状態です。 THとTDは両方とも テーブルの縦枠を区切る際に使われるタグですが、 それぞれには、それが挟んだ文字の “モニター欄“上の表示に違いがでます。 つまりTHの間にある文字は テーブル枠に対して中央に配置され、 やや太文字になるのに対して、 TDで挟まれた部分にある文字は 左詰めで表示され、 文字自体も細線で表示される事になるのです。 |
|
Step12.0へ… なお各ステップにおいて解らない点がありましたら ここをクリックして “まんが浪人の掲示板” に質問を書き込んで置いてください。 *回答はも“まんが浪人の掲示板”にて発表いたします。 ただし、解る範囲でしかお答えできませんので、 その点は理解していただき、ご容赦ください。 また回答には数日〜十数日以上かかる場合があります。 Step0.1(INDEX)に戻る |
|---|