”ブロック と インライン について”おおげさですね！これは 文字のまとまり とその中の部分とを区別する考え方と思って下さい。一例として文字の集まりを

”かかさんのなわ おゆみともうします してととさんのなは、あわの”

という一連の文字の集まりがあったとします。次にもう一つの文字の集まりがあったと します。

”こもよみこもちふくしもよみふくしもちこのおかになつますこいえ”

一緒にして

かかさんのなわ おゆみともうします してととさんのなは、あわの こもよみこもちふくしもよみふくしもちこのおかになつますこいえ

さてこれだけのあつまりを html ファイルに 記入してみましょう

かかさんのなわ おゆみともうします してととさんのなは、あわの
こもよみこもちふくしもよみふくしもちこのおかになつますこいえ

body {   /*  body 部分の 設定 文字 と 背景                 */
        color: #000000;                 /* 文字色 黒       */
        background-color: #ffffff;      /* 背景色 白   */

	font-size: 1.03em;
        line-height: 1.2em;
}
.block1{
font-family :sans-serif; color: #0000ff;
background-color: #ffff00;
}
.line2{
font-style : italic; font-size: 2.03em;
 color: #ff0000;font-weight : 800;
}

適当にファイル名をつけて保存します。そしUAで見てみましょう、特に変わっ ようには見えないでしょう改行の位置は異なってるかもしれませんが順番は変 わらない状態で見えてると思います。特にサンプルの表示はしません。次に上 記の html ファイルに 以下のように変更してみて下さい。

地の文
<p class="block1">
かかさんのなわ <span class="line2">おゆみ</span>ともうします 
してととさんのなは、あわの
こもよみこもちふくしもよみふくしもちこのおかになつます
<span class="line2">こ</span>いえ
</p>
おわり

今度は この html ファイルを保存してみます。その前に css との対応を再度 確認しておいて下さい。UA で見てみましょう

ここいらにサンプルがありますクリックして見 て下さい。どうですか css ファイルを 再度見て下さい、html ファイルに於い て”<p="block1>"”と </p>で囲まれた部分が背景色：黄色で 文字 が 青色に見えてるでしょうか？これは 各々”background-color: #ffff00;”と ”color: #0000ff;”に相当するものです（”おゆみ”と ”こ”の一ヶ所は除く）。 地の文字とその背景は文字：黒で背景が：白になってると思いますこれは”body” の部分の”color: #000000;”で文字：黒 ”background-color: #ffffff;”で背 景が：白 になります。次に css ファイルの”.line2”の部分を見てみましょ う文字が斜め、大きさを他に比べて２倍程度の大きさに、色は：赤、太さを太く という順序で列記してあります。”font-style : italic;”、font-size: 2.03em;”、”color: #ff0000;”、”font-weight : 800;”、のようにしたがっ て”おゆみ”と ”こ”一個は 斜めで大きくて赤色で太い文字になっていると思 います。（UAによってはそのように見えないかもしれませんが少なくとも文字の 色が変化しているかどうかはわかるだろうと思います。）そのように見えてると したら、（少なくとも文字の色の変化がわかる状態であれば）html で <p class=block1> と </p>で囲まれた部分を 一つのまとまり（ブロック） と考えられる、また html で <span class="line2"> と </span> で囲まれた部分は ライン（インライン：こじつけか？）の中であるということができる。（これについての専門 用語はネットワークで検索すると云々略）もう少しサンプルを良く見てみよう”地 の文”の部分 ”おわり”部分とその他の部分はスペースが存在するということ、 他方<<p="block1>"”と </p>で囲まれた部分の内部の”おゆみ” と”こ”が一個の部分は特に空白スペースは見られないという事に注目されたい。 これがブロックとインラインとの重要な相違点である。後はこの考え方の取り扱 いに注意して文字の並びを整形する事で表現が豊かになるということである。

これがブロックとインラインの考え方です。次は幾許の捕捉（補足）と画像の取り扱 いについて試行錯誤していきましょう。

前へ

次へ

戻る