ホームページ作成　その２文字や画面をいじってみよう [まぐまぐ！]

2006/10/14

ホームページ作成　その２文字や画面をいじってみよう

＊＊＊＊ ホームページ 文字や画面をいじってみよう　　＊＊＊＊

 1.改行と段落

Webページの作り方の基本が分かっている方が対象です。

ここからはいろんな文字を使って文章の書き方をマスターしていきます。

まずは改行と段落のタグを覚えましょう。

改行と段落

 改行タグ（ブランクタグ）

改行する時に使用するタグは です。ブランクタグといいます。

空欄の意味ですが、改行する時に使用します。単独で使えますので終了タグは要りません。

 段落タグ（パラグラフタグ）

段落の前には通常一列の改行スペースを入れますね。

その場合、改行タグである を使用してもいいのですが、段落タグである を使用してみましょう。

パラグラフタグといいます。段落の意味です。

段落タグを使用する場合、段落の終わりを終了タグ で閉じます。

実際に使ってみましょう

メモ帳（かTTTエディタ）で開いてください。

以下のように記述してみましょう。

<html>
<head>
</head>
<body>
人気ナンバーワンのサイト！ 
最新技術を使ったライブ映像配信型のチャットサイト 

画面の向こうでは多数の美女達が貴方を待っています。もちろんリアルタイムでお話が進むので、
思わぬハプニングや嬉しいプレゼントなどがあるかも？


多人数でわいわいとエッチなトークをするのも、二人っきりで貴方の欲求を満たして貰うのも、
全ては貴方のトークテクニックにかかっています。

</body>
</html>

記述したらindex.htmlで保存してブラウザで確認してみましょう。

２．文字の属性（大きさ、色、形）を変える

今度は文字（フォント）にいろんな効果を与えてあげます。

文字を大きくしたり小さくしたり、色を付けたり、太字に変えたりしてみます。

文字の属性（大きさ、色、形）を変える

　

文字の大きさのタグ（フォントサイズ・タグ）

文字（フォント）の大きさを指定するタグです。

大きさを指定したい文字をこのタグでくくります。

○には1（最小）～7（最大）までの数字を半角英数で指定します。3が通常の文字サイズです。

　

文字の色のタグ（フォントカラー・タグ）

文字の色を指定するタグです。○に6桁のカラーコードを指定することで文字の色が変わります。

216色のカラーコードから好きな色を選べます >>

　

太字のタグ（ボルド・タグ）

文字（フォント）を太字にするタグです。

実際に使ってみましょう

先のindex.htmlをメモ帳（かTTTエディタ）で開いてください。

以下のように記述してみましょう。

<html>
<head>
</head>
<body>
人気ナンバーワンのサイト！ 
最新技術を使ったライブ映像配信型のチャットサイト 

画面の向こうでは多数の美女達が貴方を待っています。もちろんリアルタイムでお話が進むので、思わぬ
ハプニング
や嬉しいプレゼントなどがあるかも？


多人数でわいわいとエッチなトークをするのも、二人っきりで貴方の欲求を満たして貰うのも、
全ては貴方のトークテクニックにかかっています。

</body>
</html>

記述したら上書き保存してブラウザで確認してみましょう。

３．罫線・背景色・位置

次に画面のデザインを少し変えてみましょう。

区切りの横棒を入れたり、背景に色を付けたり、文字や画像を中央に寄せたりしてみます。

罫線・背景色・位置

<hr> 罫線のタグ（ホライズン・タグ）

罫線が左右の横いっぱいに広がります。はじめから中央寄せで表示されます。

線の長さと太さは以下のように変更できます。

<hr width="80%"> 横幅を80%にします

<hr size="3"> 線の太さの値を3とします

<body bgcolor="#○○○○○○"> 背景色（バックグラウンドカラー）

HTMLの基本構文で bodyタグを覚えました。bodyタグの中に bgcolor="#○○○○○○" を記述すると、

画面の背景色が変わります。○○○○○○には6桁のカラーコード（文字の色）が入ります。

bodyの終了タグには bgcolor="#○○○○○○" を記述する必要はありません。

<center>　</center>　中央寄せのタグ（センター・タグ）

中央寄せにしたい箇所をセンタータグでくくります。

実際に使ってみましょう

先のindex.htmlをメモ帳（かTTTエディタ）で開いてください。

以下のように記述してみましょう。

<html>
<head>
</head>
<body bgcolor="#FFCCCC">
<center>
人気ナンバーワンのサイト！ 
最新技術を使ったライブ映像配信型のチャットサイト 
</center>
<hr>

画面の向こうでは多数の美女達が貴方を待っています。
もちろんリアルタイムでお話が進むので、思わぬ
ハプニング
や嬉しいプレゼントなどがあるかも？


多人数でわいわいとエッチなトークをするのも、二人っきりで貴方の欲求を満たして貰うのも、
全ては貴方のトークテクニックにかかっています。

</body>
</html>

記述したら上書き保存してブラウザで確認してみましょう。