文字や行の間隔を調節する
文字や行の間隔を調節する
今回使う タグ
< FONT style="letter-spacing: 数字 px;" ></ FONT >
< FONT style="line-height: 数字 px;" ></ FONT >
< FONT style="letter-spacing: 数字 px;" ></ FONT >
< FONT style="line-height: 数字 px;" ></ FONT >
文字と文字の間隔や行の間隔を調節する方法を説明します。
《例題１》
| < FONT style=" letter-spacing : 20 px;" > モックン☆彡の部屋 </ FONT > |
|---|
| モックン☆彡の部屋 |
| < FONT style=" letter-spacing : 10 px;" > モックン☆彡の部屋 </ FONT > |
| モックン☆彡の部屋 |
| < FONT style=" letter-spacing : 0 px;" > モックン☆彡の部屋 </ FONT > |
| モックン☆彡の部屋 |
| < FONT style=" letter-spacing : -5 px;" > モックン☆彡の部屋 </ FONT > |
| モックン☆彡の部屋 |
『 letter-spacing 』を使うと、文字の間隔を調節する事ができます。
『 letter-spacing: 0 px; 』はデフォルト（通常の状態）なので、書いても書かなくても同じです。
数字が大きくなればなるほど文字の間隔が広がっていきます。
また、数字にマイナスを入れると文字が狭まって表示されます。
この他にも単語と単語の間隔を調節する『 word-spacing 』というのもあります。
要領は『 letter-spacing 』と同じですが、単語と単語の間にスペースを入れると
単語と認識されます。数値にマイナスの値を入れても表示されません。
『 px 』とは、大きさを表す単位で ピクセル と呼びます。
通常はこの単位を省略する事ができますが、楽天では省略できません。
《例題２》
| < FONT style=" word-spacing : 20 px;" > Welcome To Mokkun's Room </ FONT > |
|---|
| Welcome To Mokkun's Room |
| < FONT style=" word-spacing : 10 px;" > Welcome To Mokkun's Room </ FONT > |
| Welcome To Mokkun's Room |
| < FONT style=" word-spacing : 0 px;" > Welcome To Mokkun's Room </ FONT > |
| Welcome To Mokkun's Room |
《例題３》
| < FONT style=" line-height : 2 ;" > 楽天流ＨＴＭＬ講座 < BR > モックン☆彡の部屋 </ FONT > |
|---|
| 楽天流ＨＴＭＬ講座 モックン☆彡の部屋 |
| < FONT style=" line-height : 1.5 ;" > 楽天流ＨＴＭＬ講座 < BR > モックン☆彡の部屋 </ FONT > |
| 楽天流ＨＴＭＬ講座 モックン☆彡の部屋 |
| < FONT style=" line-height : 1 ;" > 楽天流ＨＴＭＬ講座 < BR > モックン☆彡の部屋 </ FONT > |
| 楽天流ＨＴＭＬ講座 モックン☆彡の部屋 |
| < FONT style=" line-height : 0.3 ;" > 楽天流ＨＴＭＬ講座 < BR > モックン☆彡の部屋 </ FONT > |
| 楽天流ＨＴＭＬ講座 モックン☆彡の部屋 |
『 line-height 』を使うと、行の間隔を調節する事ができます。
『 line-height: 1 ; 』はデフォルト（通常の状態）なので、書いても書かなくても同じです。
数字が大きくなればなるほど行の間隔が広がり、小数点も記入できます。
マイナスの値を入れても表示されません。
数字の「１」で通常の改行、「２」で１行分、「３」で２行分の間隔が空くと考えてください。
また、１より 極端に 小さい数字を入れると文字が欠けて表示されます。
では、文字などを中央に寄せる < CENTER > タグを使って遊んでみましょう。
《例題４》
| < CENTER style=" letter-height
: 0.8
;"
>
< FONT style=" letter-spacing : 20 px;" > モックン☆彡の部屋 </ FONT > < BR > < FONT style=" letter-spacing : 15 px;" > モックン☆彡の部屋 </ FONT > < BR > < FONT style=" letter-spacing : 10 px;" > モックン☆彡の部屋 </ FONT > < BR > < FONT style=" letter-spacing : 5 px;" > モックン☆彡の部屋 </ FONT > < BR > < FONT style=" letter-spacing : 0 px;" > モックン☆彡の部屋 </ FONT > </ CENTER > |
|---|
| モックン☆彡の部屋 モックン☆彡の部屋 モックン☆彡の部屋 モックン☆彡の部屋 |
ちょっと面白くなってきましたね。これは日記などにも使えます。
日記に使う場合は、自動的に改行されてしまうので、『 < BR > 』を省略して下さい。
続いて、文字の大きさを調節して、もう少し迫力のある文字にしてみましょう！
文字の大きさは、『 font-size: 数字 px; 』を使いますので、下のようになります。
《例題５》
| < CENTER
>
< FONT style=" letter-spacing : 20 px;font-size:20px;" > モックン☆彡の部屋 </ FONT > < BR > < FONT style=" letter-spacing : 15 px;font-size:16px;" > モックン☆彡の部屋 </ FONT > < BR > < FONT style=" letter-spacing : 10 px;font-size:13px;" > モックン☆彡の部屋 </ FONT > < BR > < FONT style=" letter-spacing : 5 px;font-size:11px;" > モックン☆彡の部屋 </ FONT > < BR > < FONT style=" letter-spacing : 0 px;font-size:9px;" > モックン☆彡の部屋 </ FONT > </ CENTER > |
|---|
| モックン☆彡の部屋 モックン☆彡の部屋 モックン☆彡の部屋 モックン☆彡の部屋 |
さらに、文字などの位置を調節する『 position:relative 』や、
色をつける『 color: 色 ; 』、文字を太くする『 < B ></ B > 』をつけると面白くなります。
《例題６》
| < CENTER
>
< B style=" letter-spacing : 20 px;font-size:20px;color:#ffff80;" > モックン☆彡の部屋 </ B > < BR > < B style=" letter-spacing : 15 px;font-size:16px;position:relative;top:-10px;color:#bfdf9f;" > モックン☆彡の部屋 </ B > < BR > < B style=" letter-spacing : 10 px;font-size:13px;position:relative;top:-17px;color:#7fbfbf;" > モックン☆彡の部屋 </ B > < BR > < B style=" letter-spacing : 5 px;font-size:11px;position:relative;top:-23px;color:#3f9fdf;" > モックン☆彡の部屋 </ B > < BR > < B style=" letter-spacing : 0 px;font-size:9px;position:relative;top:-30px;color:#0080ff;" > モックン☆彡の部屋 </ B > </ CENTER > |
|---|
| モックン☆彡の部屋 モックン☆彡の部屋 モックン☆彡の部屋 モックン☆彡の部屋 |
色を徐々に明るくしたり、フォントを変えると面白いかもしれませんね。
最後に、楽天の日記に使える手ごろな型のお手本を１つ紹介します。
下に書いてあるタグをコピーして貼り付けるだけで下のような日記が簡単に書けますよ。
《お手本１》
| < PRE
>< CENTER style=" line-height
: 1.6
;font-family:Comic Sans MS;font-size:13px;background-color:#fadebc;border-style:solid;border-color:#b865cc;border-width:1px;width:530px;color:#191919;text-align:left;"
>
タグって？ ＨＴＭＬって何？ そんなあなたに 楽天流ＨＴＭＬ講座開放中♪ (￣ー+￣) キラーン☆彡 Welcome To Mokkun's Room </ CENTER ></ PRE > |
|---|
|
上のお手本は書いた行だけ高さが増えます。
文字の色やフォント、枠の色や大きさなどはそれぞれの該当ページを参考にして下さい。
ご意見・ご感想・ 告白
メールお待ちしております ヾ( ☆
▽ ☆
)/ moonlightshine@mail.goo.ne.jp
ジャンル別一覧
人気のクチコミテーマ
-
-
- 大好き！デジカメ！
- LEICA DG ELMARIT 200mm/F2.8/POWER …
- (2024-11-15 12:30:08)
-
-
-
- しんくぱっど
- X270のキーボードを交換したい
- (2024-11-18 06:40:01)
-
© Rakuten Group, Inc.
