文字の位置を制御する

つぎに文字の位置について変更します。 これは左揃え、中央ぞろえ、右揃えがあります。 中央ぞろえすなわちセンタリングではそろえたい文字を次のようにタグではさみます。
<P ALIGN=CENTER> ここに文字を書く </P>
右揃えはつぎのようにします。
<P ALIGN=RIGHT> ここに文字を書く </P>
左揃えは次のようにします。
<P ALIGN=LEFT> ここに文字を書く </P>

ここまでの練習として、先ほどの例を次のように変えてみましょう。 字の大きさを変更してかつその色を変更します。その時は書き方に 決まりがありますのでそれに注意します。
文字の位置と大きさを同時に変える例

<P ALIGN=RIGHT><FONT SIZE=7>ホームページの例</FONT></P>
<P ALIGN=CENTER><FONT SIZE=5>ホームページの例</FONT></P>

これは次のようにみえます。

ホームページの例


ホームページの例

文字の位置と大きさと字体を同時に変える例

<P ALIGN=LEFT><FONT SIZE=7><I>これはホームページの例です </I></FONT></P>

これは次のようにみえます。

これはホームページの例です

文字の位置と大きさと色を同時に変える例

<FONT SIZE=7>
<P ALIGN=CENTER><FONT COLOR="#35FF14">　 これはホームページの例です</FONT></P></FONT>

これは次のようにみえます。

　 これはホームページの例です

戻る

 上付き文字、下付き文字その他の特殊文字

上付き文字、下付き文字

上付き文字、下付き文字は次のように書きます。

a< SUP> 2< /SUP> 　x< SUP> a+2< /SUP>
テキスト< SUP> 2< /SUP> 　X< SUB> 2< /SUB>
　 cm< SUP> 2< /SUP> 　X< SUB> 2< /SUB>

これは次のようにみえます。

a 2    　x a+2      テキスト 2 　X 2    　 cm 2
特殊文字

特別な文字を使用する場合には次の表の記号をもちいます。

記号 記述方法
< &lt;
> &gt;
& &amp;
" &quot;
スペース &nbsp;
© &copy;
§ &#167;
± &#177;
× &#215;
÷ &#247;
記号対応表
戻る
 その他の文字の装飾

文字自体の装飾としては文字の点滅がある。すなわち

<BLINK> ここに点滅する文字を書く </BLINK>

これは次のようになります。

ここに点滅する文字を書く

これを横に動かすには

<MARQUEE> ここに動かす文字を書く </MARQUEE>

ブラウザでは次のようになる。

ここに動かす文字を書く

移動する方向を変えるには

<MARQUEE DIRECTION="right"> ここに動かす文字を書く </MARQUEE>

ここで、 rightをleftにすると右から左に動きます。通常はこの動きです。 ブラウザでは次のように見えます。

ここに動かす文字を書く

動き方を指定について　　通常は巡回しますが、slideでは進行方向端まで進んで停止します。 alternateでは端で向きを変えて進みます。 次のように書きます。

<MARQUEE BEHAVIOR="slide"> ここに動かす文字を書く </MARQUEE>

<MARQUEE BEHAVIOR="alternate"> ここに動かす文字を書く </MARQUEE>

ブラウザでは次のようになります。 ここに動かす文字を書く

ここに動かす文字を書く

マーキー領域の背景を指定する。あるいは領域の大きさを指定する。 次のように書きます。

<MARQUEE WIDTH="360" BEHAVIOR="alternate"> ここに動かす文字を書く </MARQUEE>

<MARQUEE ALIGN="center" BGCOLOR="red" WIDTH="360" BEHAVIOR="alternate"> ここに動かす文字を書く </MARQUEE>

ここで、BEHAVIOR="alternate"　はなくてもかまいません。ALIGNは周囲の文字の回りこみの位置を指定します。 left, center, right, top, middle, bottom があります。試してください。 次のように見えます。

ここに動かす文字を書く

ここに動かす文字を書く

次はどのような命令を使ったのでしょうか。各自考えてください。

☆☆☆☆☆ こんにちわ ☆☆☆☆☆
色を変えて点滅させるには

点滅します

戻る

 色の指定について

色は直接それを英語で

<FONT COLOR= " BLUE">ここに色を変えたい文字をかく</FONT>

のように書きます。これは次のようになります。

ここに色を変えたい文字をかく

色を変える時は次の表を参考にして うえの例で" BLUE"のところを次の色の名前で置き換えてください。

色を名前で指定
BLACK　 NAVY　 SYLVER BLUE　
MAROON　 PURPLE　 RED　 FUCHSIA　
GREEN　 TEAL　 LIME　 AQUA
OLIVE　 GRAY　 YELLOW WHITE
多くの色を使いたい人のために

見栄えのよいホームページを作成するためには多くの中間色を使う必要があります。 この時、次の指定を知っておくと便利です。

<FONT COLOR= #FF00FF>ここに色を変えたい文字をかく</FONT>

これは次のように見えるはずです。

ここに色を変えたい文字をかく

ここの色のあらわしかたでは、色の名前を直接かく代わりに # と6桁の数字であらわします。 たとえば#2145A5 の様になります。ここで21, 45, A5は16進法です。 16進法はとりあえずおまじないのようなものだと思っておいてもよいが、詳しくは 16進法についてはつぎのセクションを参照してほしい。

色指定の原理を述べておくと、 ここで左から2桁は赤の色、次の2桁は緑の色、最後の2桁は 青の濃さをあらわします。数字が大きいほどその色は濃くなります。 一般にはこれらを混ぜた色になります。 どんな色もこれらを混ぜれば表現できることを注意しておく。 例を示しましょう。# 000000=白、# 0000FF=青、# FF0000=赤、# FF00FF=紫、# 00FF00=緑 # FFFF00=黄色です。中間色は各自で試してみるとよいでしょう。
もっと凝った色を使いたい人のために 色と色番号の対応表をこの後にあげました。　参考にしてください。 戻る

 16進法について
　 私たちが普通使っている算法は10進法といい、10になると位取りがあがります。 たとえば、
1,2,3,...,8,9,10, 11, 12,...,99,100
です。これに対して、 16進法とは各桁が16になると位取りが一つあがるような表記法です。 つまり、0,1,2,...,8, 9, A, B,C,D,E,Fは1桁の数で これは順に10進法では0,1,2,...,8,9,10,11,12,13,14,15をあらわします。 ですから、 A,B,Cは順に 通常の10進法では10,11,12,を あらわします。Fは10進法では15になります。 16になると位取りがあがり #10のようにあらわします。ここで# は16進法であることを 意味します。たとえば#A=10, #1A=16+10 =26 となります。 16進法でも足し算、引き算掛け算、割り算は10進法と同じです。 16進法以外にも計算機では2進法がよく用いられます。 戻る
 色番号対応表
　 以下の表では16進法を用いています。

■#000000 ■#400000 ■#800000 ■#804040 ■#FF0000 ■#FF8080
■#808000 ■#804000 ■#FF8000 ■#804040 ■#FFFF00 ■#FFFF80
■#804040 ■#004000 ■#008000 ■#00FF00 ■#80FF00 ■#80FF80
■#00BFFF ■#00CED1 ■#6495ED ■#8A2BE2 ■#7FFFD4 ■#F0F8FF
■#1E90FF ■#ADD8E6 ■#20B2AA ■#87CEFA ■#B0CEDE ■#66CDAA
■#0000CD ■#7B68EE ■#48D1CC ■#AFEEEE ■#B0E0E6 ■#87CEEB
■#6A5ACD ■#40E0D0 ■#F5F5DC ■#FFE4C4 ■#FFEBCD ■#DEB887
■#D2691E ■#FF7F50 ■#DC143C ■#FF8C00 ■#E9967A ■#FF1493
■#B22222 ■#FF69B4 ■#F08080 ■#FFB6C1 ■#FFA07A ■#BA55D3
■#C71585 ■#FFA500 ■#FF6347 ■#7FFF00 ■#8FBC8F ■#9400B3
■#228B22 ■#7CFC00 ■#90EE90 ■#20B2AA ■#32CD32 ■#3CB371
■#00FA9A ■#48D1CC ■#C71585 ■#FFA500 ■#FF4500 ■#DA70D6
■#98FB98 ■#AFEEEE ■#DB7093 ■#DDA0DD ■#2E8B57 ■#9400D3
■#FAFBD7 ■#F0FFFF ■#FFEBCD ■#DEB887 ■#FFF8DC ■#B8860B
■#BDB76B ■#483D8B ■#DCDCDC ■#F8F8FF ■#DAA520 ■#F0FFF0
■#CD5C5C ■#FFFFF0 ■#E6E6FA ■#FFF0F5 ■#E0FFFF ■#FFF5EE
■#808080 ■#004040 ■#008040 ■#008080 ■#00FF40 ■#00FF80
■#408080 ■#000080 ■#0000FF ■#004080 ■#00FFFF ■#80FFFF
■#C0C0C0 ■#000040 ■#0000A0 ■#8080FF ■#0080C0 ■#0080FF
■#400040 ■#840084 ■#800080 ■#800040 ■#8080C0 ■#FF80C0
■#FFFFFF ■#400080 ■#8000FF ■#FF0080 ■#FF00FF ■#FF80FF

戻る

 箇条書き
箇条書きをするときは次のようにする。 記号について説明しておくと、まず<OL> ... </OL> が箇条書きの開始と終わりをあらわす。 次に<LI>の次に項目をかきます。この項目は文章でよく何行かになっていても よい。項目の個数は必要なだけ増やすことができます。すなわち、 <LI>を増やせはよい。 具体的な例は次のようになります。 戻る
数字のついた箇条書き

<OL>
<LI> 項目A
<LI> 項目B
<LI> 項目C
</OL>

のようにする。次のように見えます。

  1. 項目A
  2. 項目B
  3. 項目C
戻る
中点のついた箇条書き
原理的には前と同じですが、<OL> ... </OL>のかわりに <UL> ... </UL>を用います。たとえば次のようになる。

<UL>
<LI>日光
<LI>北海道
<LI>湯河原
<LI>箱根
</UL>

これは次のようにみえます。

  • 日光
  • 北海道
  • 湯河原
  • 箱根
次の例では箇条書きと中央ぞろえを組み合わせてもちいる。

<FONT SIZE=5>
<OL>
<LI><P ALIGN=CENTER>　日光</P>
<LI><P ALIGN=CENTER>北海道</P>
<LI><P ALIGN=CENTER>湯河原</P>
<LI><P ALIGN=CENTER>　箱根</P>
</OL>
</FONT><HR>

これは次のようにみえます。

  1. 　日光

  2. 北海道

  3. 湯河原

  4. 　箱根

戻る

 箇条書きを入れ子にする
箇条書きは入れ子にすることができます。次の例を見てください。 次の例では<UL>〜</UL>の中に<OL>〜</OL>を入れ子にしています。 このようにすると項目を整理することができます。

<UL>
<LI>日光

<OL>
<LI>日光の歴史
<OL STYLE="list-style-type: lower-roman">
<LI> 江戸時代
<LI>明治時代
<LI>昭和時代
</OL>
<LI>日光の見所
<LI>日光の行き方、交通機関
<OL STYLE="list-style-type: lower-alpha">
<LI>車で
<LI>電車で
<LI>バスで
</OL>
<LI>日光の宿
</OL>

<LI>北海道

<OL>
<LI>北海道の歴史
<UL STYLE="list-style-type: circle">
<LI>江戸時代
<LI>明治時代
<LI>昭和時代
</UL>
<LI>北海道の見所
<LI>北海道の行き方、交通機関
<UL STYLE="list-style-type: square">
<LI>車で
<LI>電車で
<LI>バスで
</UL>
<LI>北海道の宿
</OL>

<LI>湯河原

<OL>
<LI>湯河原の歴史
<LI>湯河原の見所
<LI>湯河原の行き方、交通機関
<LI>湯河原の宿
</OL>

<LI>箱根

<OL>
<LI>箱根の歴史
<LI>箱根の見所
<LI>箱根の行き方、交通機関
<LI>箱根の宿
</OL>

</UL>

これは次のようにみえます。

  • 日光
    1. 日光の歴史
      1. 江戸時代
      2. 明治時代
      3. 昭和時代
    2. 日光の見所
    3. 日光の行き方、交通機関
      1. 車で
      2. 電車で
      3. バスで
    4. 日光の宿
  • 北海道
    1. 北海道の歴史
      • 江戸時代
      • 明治時代
      • 昭和時代
    2. 北海道の見所
    3. 北海道の行き方、交通機関
      • 車で
      • 電車で
      • バスで
    4. 北海道の宿
  • 湯河原
    1. 湯河原の歴史
    2. 湯河原の見所
    3. 湯河原の行き方、交通機関
    4. 湯河原の宿
  • 箱根
    1. 箱根の歴史
    2. 箱根の見所
    3. 箱根の行き方、交通機関
    4. 箱根の宿
戻る
 箇条書きに背景をつける、枠で囲む
段落の場合と同じように箇条書きには背景をつけたり、画像をはりこんだり、枠で囲むことができます。 次に例を示します。

<UL STYLE="background-color: yellow; width:320px; height: 120px; border-width: 10pt; border-style: solid; border-color: orange; padding: 5px; color: blue">
<LI>日光
<LI>北海道
<LI>湯河原
<LI>箱根
</UL>

これは次のようにみえます。

  • 日光
  • 北海道
  • 湯河原
  • 箱根

<UL STYLE="background-image: url(back09.gif); width:320px; height: 120px; border-width: 10pt; border-style: solid; border-color: orange; padding: 5px; color: blue">
<LI>日光
<LI>北海道
<LI>湯河原
<LI>箱根
</UL>

これは次のようにみえます。

  • 日光
  • 北海道
  • 湯河原
  • 箱根

別の例をあげておきます。

  • 日光
    1. 日光の歴史
      1. 江戸時代
      2. 明治時代
      3. 昭和時代
    2. 日光の見所
    3. 日光の行き方、交通機関
      1. 車で
      2. 電車で
      3. バスで
    4. 日光の宿
  • 北海道
    1. 北海道の歴史
      • 江戸時代
      • 明治時代
      • 昭和時代
    2. 北海道の見所
    3. 北海道の行き方、交通機関
      • 車で
      • 電車で
      • バスで
    4. 北海道の宿

ソースを書いておきます。

<UL STYLE="background-image: url(back10.gif); width:640px; height: 320px; border-style: solid; border-width: 10pt; border-color: blue; padding: 5px; color: red">
<LI>日光
<OL STYLE="background-color: aqua; width:320px; height: 120px; border-style: solid; border-width: 5pt; border-color: orange; padding: 5px; color: blue">
<LI> 日光の歴史
<OL STYLE="list-style-type: lower-roman; color: black; width:160px; height: 50px; background-color: pink; border-width: 2pt; border-style: outset ">
<LI> 江戸時代
<LI>明治時代
<LI>昭和時代
</OL>
<LI> 日光の見所
<LI> 日光の行き方、交通機関
<OL STYLE="list-style-type: lower-alpha; color: black; width:160px; height: 50px; background-color: pink; border-width: 2pt; border-style: outset">
<LI>車で
<LI>電車で
<LI>バスで
</OL>
<LI> 日光の宿
</OL>
<LI>北海道
<OL STYLE="background-color: aqua; width:320px; height: 120px; border-style: solid; border-width: 5pt; border-color: orange; padding: 5px; color: blue">
<LI> 北海道の歴史
<UL STYLE="list-style-type: circle; color: black; width:160px; height: 50px; background-color: pink; border-width: 2pt; border-style: outset">
<LI> 江戸時代
<LI>明治時代
<LI>昭和時代
</UL>
<LI> 北海道の見所
<LI> 北海道の行き方、交通機関
<UL STYLE="list-style-type: square; color: black; width:160px; height: 50px; background-color: pink; border-width: 2pt; border-style: outset">
<LI>車で
<LI>電車で
<LI>バスで
</UL>
<LI> 北海道の宿
</OL>
</UL>
 戻る

 画像のはり込み
画像ファイルは自分のディレクトリにあるとします。すなわち、ホームページのhtml文書と同じ 場所にあるとします。 背景、壁紙データを手に入れるにはの項目を参考にして 画像ファイルを入手してください。

マイコンピュータのなかのg1032..などの自分の領域です。 その、ファイルは通常 .gif あるいは .jpg のファイルとなっているはずです。 今その名前を kabe1.jpg としましょう。

これを確認するためには、デスクトップのマイコンピュータをクリックして自分の (Z)ドライブを表示させます。それをクリックするとその中にファイルが出てきます。 そこに106とか名前があります。その性質はそのファイルにマウスのカーソルをあわせて右 クリックをします。プロパティをえらべば、ファイル名がでてきます。

画像を張り込むには次のようにします。 <IMG SRC="kabe1.jpg">

これは次のようになります。

戻る

画像の位置を変えるには

文字のときと同じです。すなわちセンタリングするには

<P ALIGN=CENTER>
<IMG SRC="kabe1.jpg">
</P>
 とすると中央に表示されます。次のようになります。

同様にして、左、あるいは右に表示できます。 左は

<P ALIGN=LEFT>
<IMG SRC="kabe1.jpg">
</P>

と書きます。次のように見えます。

右は

<P ALIGN=RIGHT>
<IMG SRC="kabe1.jpg">
</P>

と書きます。次のように見えます。

戻る
画像をいくつかならべて表示するとき
その個数だけならべて書きます。たとえば次のようにします。
<IMG SRC="kabe1.jpg">
<IMG SRC="kabe1.jpg">
<IMG SRC="kabe1.jpg">

これは次のようにみえます。

真ん中にならべたいとき

<CENTER> <IMG SRC="kabe1.jpg">
<IMG SRC="kabe1.jpg">
<IMG SRC="kabe1.jpg">
</CENTER>

これは次のようにみえます。

戻る
画像が表示できないブラウザへの対応
画像を表示するまでその画像の名前を表示しておきたいことがあります。 たとえば、大きな画像データを送る場合にその画像の名前をあらかじめ知らせて おく場合などです。次の例では壁紙がその名前です。 その時には次のように書きます。

<IMG SRC="kabe1.jpg" ALT="壁紙">

戻る

 画像と文字の混在ー進んだ内容
画像も何も指定しなければ大きな文字のようにあつかわれます。 しかし、画像と文字を混在させたいときには次のように その位置を指定することにより文字と混在させることができます。
<IMG SRC="kabe1.jpg" ALIGN="RIGHT">
<IMG SRC="kabe1.jpg" ALIGN="LEFT">
次の例を見ながら考えてみよう。
最初は画像と文字が横一列に並んでいます。 次の例では文字が画像の中央にそろえられていることに注意してください。 次の例では文字は画像の上にそろっています。 いずれにしても画像に対して文字は一列です。最後の二つの例では 画像にたいして文字は何行も並んでいます。 これは画像に対して回り込んでいることに注意してください。
<IMG SRC="kabe1.jpg">
<IMG SRC="kabe1.jpg">
<IMG SRC="kabe1.jpg">
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
<P>

これは次のように見えます。

これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。

<IMG SRC="kabe1.jpg" ALIGN="CENTER">
<IMG SRC="kabe1.jpg" ALIGN="CENTER">
<IMG SRC="kabe1.jpg" ALIGN="CENTER">
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
<P>

これは次のように見えます。

これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。

<IMG SRC="kabe1.jpg" ALIGN="TOP">
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
<P>

これは次のように見えます。

これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。

<IMG SRC="kabe1.jpg" ALIGN="RIGHT">
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
<P>

これは次のように見えます。

これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。

<IMG SRC="kabe1.jpg" ALIGN="LEFT">
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。
これはテキストと画像の関係です。これはテキストと画像の関係です。

これは次のように見えます。

これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。 これはテキストと画像の関係です。これはテキストと画像の関係です。

戻る