実験
最新更新２００５年６月２７日これから、HTML超初心者である私が学んだHTMLのことをのせていきます。
中・上級者の人が読まれても、何も得るものがないコーナーになると思いますが、ご了承ください。
１ 太字にする方法
２ 強調文字にする方法
３ 斜体にする方法
４ 文字の大きさを変える方法
５ 文字の色を変える方法
６ 下線を引く方法<
７ 取消線・罫線を引く方法
８ 改行・段落の方法
９ センタリングの方法
10 スクロールさせる方法
11 ふりがなをつける
12 いろいろな字体にする
13 簡単な表をつくる方法
14 書いた通りに表示する方法
15 リンクの張り方
16 位置の指定方法
17 カラーチャート
18
トップページにもどる
ブログランキングへ
最新更新２００５年６月２７日
■ 太字にするにはどうするの
<b> と </b>で、太字にしたい文字をはさみます。
b や /b の前後には、それぞれ< >< >をつけて下さいね。
<b> 太字にしたい文字 </b> と打ち込むと
太字にしたい文字 となるはずです。
■ 強調文字にするにはどうするの？ (太字と同じになります)
<strong> と </strong>で、強調文字にしたい文字をはさみます。
strong や /strong の前後には、それぞれ< >< >をつけて下さいね。
<strong> 強調したい文字 </strong>
強調文字にしたい文字
うまくいきましたか？
■ 斜体にするにはどうするの？
<i> と </i> で、斜体にしたい文字をはさみます。
i や /i の前後には、それぞれ< >< >をつけて下さいね。
<i> 斜体にしたい文字 </i>
斜体にしたい文字 できましたか？
☆ 他の斜体にする方法
<em> と </em> で、斜体にしたい文字をはさみます。
em や /em の前後には、それぞれ< >< >をつけて下さいね。
<em> 斜体にしたい文字 </em>
斜体にしたい文字
できましたか？
目次にもどる
４ 字の大きさを変える
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> と打ち込むと
字を小さくする となりましたね。
５ 字の色を変える
☆色名による指定の場合
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以外のほとんどのＷebプラウザで非対応です）
<ruby> <rb>文字を </rb>
<rt>もじを </rt></ruby>
目次にもどる
日記ブログランキングへ ★今日は、いろいろな字体を使ってみたいと思います。(OSにより使える字体が異なります)
ＭＳ 明朝体 にしてみる。
<font face="ＭＳ 明朝">「いろいろな字体」</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,中ゴシック体">ＡＢＣＤＥＦＧ</font>と打つと
ＡＢＣＤＥＦＧ
目次にもどる
■ 今日は簡単な表を作ってみます。
<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>
３月６日（日）の日記
今日は ちょっと寒いけど と～っても天気がよいです～。
☆ ☆ ☆ ☆ ☆
こんな日は カメラ片手に出かけてみるです。
★ ★ ★ ★
そして 図書館にもよってみるです～♪
☆ ☆
この日記は、あとで削除予定です。
</pre>
目次にもどる ■ リンクを張るには
<a href="リンク先のＵＲＬをここに入れる">ここに表示したい言葉を入れる</ａ>
<a href="リンク先のＵＲＬをここに入れる">ここに表示したい画像のタグを入れる</ａ>
画像の枠を消すには <img src="ここに画像のＵＲＬ"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:メールアドレスをここに入れる ">ここに表示したい言葉を入れる</ａ>
注意……使用する際には、セキュリティーやウイルス対策など充分にご注意 ください。
目次にもどる
日記ブログランキングへ
■段落の位置の指定のやり方
★左揃え
<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.
