AVENSIS DIARY

AVENSIS DIARY

実験

最新更新2005年6月27日

『いっしょに学ぼう ブログ超初心者HTML』



これから、HTML超初心者である私が学んだHTMLのことをのせていきます。
中・上級者の人が読まれても、何も得るものがないコーナーになると思いますが、ご了承ください。

☆☆☆☆☆☆☆☆☆☆☆☆ 目  次 ☆☆☆☆☆☆☆☆☆☆☆☆☆



1 太字にする方法

2 強調文字にする方法

3 斜体にする方法

4 文字の大きさを変える方法

5 文字の色を変える方法

6 下線を引く方法<

7 取消線・罫線を引く方法

8 改行・段落の方法

9 センタリングの方法

10 スクロールさせる方法

11 ふりがなをつける

12 いろいろな字体にする

13 簡単な表をつくる方法

14 書いた通りに表示する方法

15 リンクの張り方

16 位置の指定方法

17  カラーチャート

18




トップページにもどる


ブログランキングへ ブログ
最新更新2005年6月27日

『一緒に学ぼう ブログ超初心者HTML』



太字にするにはどうするの

<b> と </b>で、太字にしたい文字をはさみます。

b や /b の前後には、それぞれ< >< >をつけて下さいね。

<b> 太字にしたい文字 </b>  と打ち込むと
太字にしたい文字  となるはずです。


強調文字にするにはどうするの? (太字と同じになります)

<strong> と </strong>で、強調文字にしたい文字をはさみます。

strong や /strong の前後には、それぞれ< >< >をつけて下さいね。

<strong> 強調したい文字 </strong>
強調文字にしたい文字

うまくいきましたか?


斜体にするにはどうするの?

<i> と </i> で、斜体にしたい文字をはさみます。

i や /i の前後には、それぞれ< >< >をつけて下さいね。

<i> 斜体にしたい文字 </i>
斜体にしたい文字  できましたか?


他の斜体にする方法

<em> と </em> で、斜体にしたい文字をはさみます。

em や /em の前後には、それぞれ< >< >をつけて下さいね。

<em> 斜体にしたい文字 </em>
斜体にしたい文字

できましたか?

目次にもどる


4 字の大きさを変える

font size=1~7の数字 < >ではさみ 大きさを変えたい文字 /font < >ではさみます

<font size=4>font size=4の文字</font>と打ち込むと
font size=4の文字


font size=1の文字

font size=3の文字

font size=5の文字

font size=6の文字

font size=7の文字


☆字の大きさを変える他の方法

<big> 字を大きくする </big> と打ち込むと

字を大きくする  となりましたね。

<small> 字を小さくする </small> と打ち込むと

字を小さくする  となりましたね。



5 字の色を変える

☆色名による指定の場合

font color=色 < >ではさみ 色を変えたい文字 /font < >ではさみます

<font color=black>黒い文字</font>と打ち込むと
黒い文字


font color=redの場合
赤い文字

font color=fuchsiaの場合
ピンクの文字

font color=greenの場合
緑の文字

font color=limeの場合
黄緑色の文字

font color=blueの場合
青い文字

font color=navyの場合
紺色の文字

font color=aquaの場合
水色の文字

font color=yellowの場合
黄色い文字

font color=silverの場合
銀色の文字

font color=grayの場合
灰色の文字

font color=maroonの場合

茶色の文字

font color=tealの場合

深緑色の文字

font color=oliveの場合
オリーブ色の文字

font color=purpleの場合
紫色の文字

font color=whiteの場合
白色の文字

目次にもどる


下線(アンダーライン)を引く

<u>下線を引きたい文字をここに入れる<u>

<u>下線を引く<u>
下線を引く


取消線を引く

<s>取消線を引きたい文字をここに入れる<s>

<s>取消線を引く<s>
取消線を引く


罫線を引く


罫線を引くには <hr> と入力するだけです



線の長さを50%にするには
<hr width="50%"> と入力



影のない罫線
<hr noshade> と入力するだけです



線の太さを10ピクセル、長さを50%、左寄せにする
<hr size="10" width="50%" align="left"> (10"の後、%"の後にそれぞれ半角のスペースを入れて下さい。)



★罫線に色をつける(インターネットエクスプローラーのみ対応しています)

<hr color="blue">
・・・青い罫線


<hr color="green">
・・・緑の罫線


<hr color="maloon">
・・・茶色い罫線



目次にもどる


改行するには

改行は、文章の最後に <BR> を入れるとできますね。


段落を作るには

<p>ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。</p> <p>ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。</p> と入力すると


ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。

ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。ここに長い文章が入ります。




センタリング(文章を中央にそろえる)

 ☆おしゃれなブログなんかにありますね。


小鳥たちの囁きに

誘われて 起きてみると

うっすら雪が 道につもっていて

まだ冬だというのに

そろそろ春だよと

鳥たちが 私をそそのかしているかの

ようでした・・・



どんなふうにやるかといいますと
< center > と < /center > で、センタリングしたい文字をはさみます。

例えば、
< center >小鳥たちの囁きに<BR><BR>誘われて 起きてみると< /center ><BR><BR>
と打ち込むと、

小鳥たちの囁きに

  誘われて 起きてみると




となりますね。 意外と簡単!!


目次にもどる


■スクロールさせるには

<marquee>スクロールさせる文字をここに入れる</marquee>と入力すると。

スクロールさせる文字をここに入れる

となりますね。。
スラッシュ( / )をつけ忘れると、<marquee>から後ろの画面がすべてスクロールしてしまいますので、気をつけて下さい。


☆スクロールする範囲の背景の色を変える方法

ここでは、背景を黒(black)にしてみましょう。

<marquee bgcolor=black> スクロールさせる文字をここに入れる</marquee>と入力すると。

スクロールさせる文字をここに入れる

となりましたね。


☆いろいろなスクロール

<marquee behavior=slide> スクロールさせる文字をここに入れる</marquee>と入力すると、スクロールしたあと停止します。

スクロールさせる文字をここに入れる


<marquee behavior=alternate> スクロールさせる文字をここに入れる</marquee>と入力すると、いったりきたりします。

スクロールさせる文字をここに入れる


☆スクロールする方向の調節

<marquee direction=right> スクロールさせる文字をここに入れる</marquee>と入力すると、右へスクロールします。

スクロールさせる文字をここに入れる


<marquee direction=down> スクロールさせる文字をここに入れる</marquee>と入力すると、下へスクロールします。

スクロールさせる文字をここに入れる

<marquee direction=up> スクロールさせる文字をここに入れる</marquee>と入力すると、上へスクロールします。

スクロールさせる文字をここに入れる

目次にもどる ★ふりがなをつける
(※ Internet Explorer以外のほとんどのWebプラウザで非対応です)


<ruby> <rb>文字を </rb>
<rt>もじを </rt></ruby>

文字を もじを


目次にもどる



日記ブログランキングへ ★今日は、いろいろな字体を使ってみたいと思います。(OSにより使える字体が異なります)

MS 明朝体 にしてみる。
<font face="MS 明朝">「いろいろな字体」</font>と打つと
「いろいろな字体」


HG正楷書体-PRO にしてみる。
<font face="HG正楷書体-PRO">「いろいろな字体」</font>と打つと
「いろいろな字体」


HG丸ゴシックM-PRO にしてみる。
<font face="HG丸ゴシックM-PRO">「いろいろな字体」</font>と打つと
「いろいろな字体」


HGP創英角ゴシックUB にしてみる。
<font face="HGP創英角ゴシックUB">「いろいろな字体」</font>と打つと
「いろいろな字体」


HGS創英角ポップ体 にしてみる。
<font face="HGP創英角ポップ体">「いろいろな字体」</font>と打つと
「いろいろな字体」


複数の字体を指定すると最初の字体が優先される。
<font face="Times New Roman,中ゴシック体">ABCDEFG</font>と打つと
ABCDEFG




目次にもどる


今日は簡単な表を作ってみます。

<table border=1>
<tr><td>表の内容</tr></td>
</table>

表の内容

table boder=の後の数字を大きくすると枠線が太くなります。


この繰り返し・応用で大きな表を作ります。

<table border=1>
<tr><td>表の項目</td><td>表の項目横 </td><td>項目横</td></tr>
<tr><td>表の項目2</td><td>表の内容 </td><td>表の内容</td></tr>
<tr><td>表の項目3</td><td>表の内容 </td><td>表の内容</td></tr> </table>

表の項目 表の項目横 表の項目横
表の項目2
表の内容 表の内容
表の項目3
表の内容 表の内容

できましたか?

目次にもどる 空白や改行を書いたとおりに表示する方法

<pre> </pre> ではさめば出来あがりです。
(空白にしたい行にスペースをポチッと打つと、より確実に空白の行として表示されるみたいです)


<例文>

 <pre> 
3月6日(日)の日記
 
    
   今日は ちょっと寒いけど と~っても天気がよいです~。
    
     ☆    ☆    ☆    ☆    ☆
    
    こんな日は カメラ片手に出かけてみるです。
    
      ★    ★    ★    ★
     
     そして 図書館にもよってみるです~♪
     
          ☆    ☆
    

 この日記は、あとで削除予定です。
</pre>


目次にもどる リンクを張るには

<a href="リンク先のURLをここに入れる">ここに表示したい言葉を入れる</a>

<a href="リンク先のURLをここに入れる">ここに表示したい画像のタグを入れる</a>

画像の枠を消すには <img src="ここに画像のURL"border="0">

例えば、ブログランキングの画像を使ってリンクする場合、
<a href="http://blog.with2.net/link.php/47747">
<img src="http://plaza.rakuten.co.jp/img/user/46/51/23124651/13.gif" border="0" width="80" height="15" alt="ブログ"></a>

ブログ




メーラーを起動するリンクを張るには

クリックするとメールソフトが起動するようにします。

<a href=" mailto:メールアドレスをここに入れる ">ここに表示したい言葉を入れる</a>

注意……使用する際には、セキュリティーやウイルス対策など充分にご注意 ください。

目次にもどる



web ranking日記ブログランキングへ


■段落の位置の指定のやり方

   ★左揃え
 <p align="left">ここに内容を入れる</p>

 ★センタリング
 <p align="center">ここに内容を入れる</p>

 ★右揃え
 <p align="right">ここに内容を入れる</p>

平成17年3月16日 のような使い方




■まとめて位置の指定をする場合

 ★左揃え
 <div align="left">ここに内容を入れる</div>

 ★センタリング
 <div align="center">ここに内容を入れる</div>

 ★右揃え
 <div align="right">ここに内容を入れる</div>


■回り込み(画像の横に表示する)

 ★右にテキスト、左に画像  <img src=・・・ align="left">

 ★右に画像、左にテキスト  <img src=・・・ align="right">



目次にもどる




© Rakuten Group, Inc.
X
Create a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: