木曜日, 9月 17, 2020

HTML_CSS_03 
HTMLのテキスト処理

今回も最終的にはCSS側で設定するテキスト処理ですが、HTML側での処理も理解しておくと良いでしょう。

<!-- index.html -->
<html lang="ja">
<head>
<title>森のお菓子屋さん</title>
<meta charset="utf-8">
</head>
<body bgcolor = "#888888">
大自然に囲まれた素敵なお店です <!-- 3行のテキストを挿入 -->
素材を吟味した自然の味わいを大切にした
マスター自慢のパンとお菓子をお楽しみ下さい。
</body>
</html>
<!-- index.html -->



前回も触れたようにHTML上でwordやテキストエディタのように単なる改行を入れても画面上では反映されません。3行のつもりでも上の様に1行になってしまいます。こを回避するために強制改行の<br>タグを使います。この<br>タグは単独使用で</br>はありません。

<!-- index.html -->

<html lang="ja">

<head>

<title>森のお菓子屋さん</title>

<meta charset="utf-8">

</head>

<body bgcolor = "#888888">

大自然に囲まれた素敵なお店です<br> <!-- 強制改行 -->

素材を吟味した自然の味わいを大切にした<br> <!-- 強制改行 -->

マスター自慢のパンとお菓子をお楽しみ下さい。<br> <!-- 強制改行 -->

</body>

</html>

<!-- index.html -->



コレで意図した3行表示になりました。次に全体をセンター合わせにします。Web画面は受け手の環境により表示エリアが千差万別状態となるので、センター合わせが一番簡単な対処方法と言えるでしょう。


<!-- index.html -->

<html lang="ja">

<head>

<title>森のお菓子屋さん</title>

<meta charset="utf-8">

</head>

<body bgcolor = "#888888">

<center>    <!-- センター合わせ開始 -->

大自然に囲まれた素敵なお店です<br>

素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。<br>

</center>    <!-- センター合わせ解除-->

</body>

</html>

<!-- index.html -->


これで3行のテキストがセンター合わせになりました。次に文字のサイズ指定です。これにはいくつかも指定方法がありますが、<h>タグを使う方法があります。<h>タグは<h1><h6>の6段階で数値が小さいほど文字が大きくなります。

<!-- index.html -->

<html lang="ja">

<head>

<title>森のお菓子屋さん</title>

<meta charset="utf-8">

</head>

<body bgcolor = "#888888">

<center>

<h3>大自然に囲まれた素敵なお店です<br> <!-- <h3>タグの開始 -->

素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。

</h3> <!-- <h3>タグの終了 -->

</center>

</body>

</html>

<!-- index.html -->



画面は上から<h6>指定、<h3>指定、<h1>指定の違いです。<h>タグの他に<font>タグによる設定もあります。<font>タグは<font size "7">から<font size "1">までの7段階の指定が出来ます。ただし現在ではCSS側で設定出来るので、あまり使われなくなっています。

<!-- index.html -->

<html lang="ja">

<head>

<title>森のお菓子屋さん</title>

<meta charset="utf-8">

</head>

<body bgcolor = "#888888">

<center>

<font size = "3">大自然に囲まれた素敵なお店です<br> <!-- <font>タグの開始 -->

素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。<br>

</font> <!-- <font>タグの終了 -->

</center>

</body>

</html>

<!-- index.html -->




画面は上から<font size "7">指定、<font size "4">指定、<font size "1">指定の違いです。最後に色指定です。

<!-- index.html -->

<html lang="ja">

<head>

<title>森のお菓子屋さん</title>

<meta charset="utf-8">

</head>

<body bgcolor = "#888888">

<center>

<font size = "3" color = "#ffffff">大自然に囲まれた素敵なお店です<br> <!-- 文字を白に設定 -->

素材を吟味した自然の味わいを大切にした<br>

マスター自慢のパンとお菓子をお楽しみ下さい。<br>

</font>

</center>

</body>

</html>

<!-- index.html -->



これで文字が白になりました。