HTMLとはもともと、文書交換を目的として開発されたマークアップ言語です。HyperText Markup Languageの最初の文字をとってHTMLと呼ばれています。文字をタグとよばれる記号でマークアップして表現していたのですが、SGMLのように文書を完全に構造化して表現するものでもなく、見栄えも表すなど、中途半端な言語として存在していました。

逆に、この中途半端さ（簡単さ）が受けて普及したともいえます。一般には、Mosaicというウェブ・ブラウザの登場で普及したといわれていますが、実際には、１９９０年代、インターネット普及期のNetscape（今のFireFoxの先祖？）とInternetExplorerによるHTMLタグの独自拡張により、見栄えを整えるための言語として普及したような気がしています。

実際、自分も９０年代後半にホームページをつくろうといろいろと試行錯誤し、Netscape用のタグとInternetExplorer用のタグで見栄えが違うことから、デザインが崩れないようにするために苦労したのを思い出します。それを根本から変えたのがスタイルシートの登場です。

現在では、HTMLはXHTMLへと進化し、文書の構造化とデザインが完全に切り離されて、ブラウザが変わってもある程度デザインが崩れないホームページが作成可能な段階まで来ています。InternetExplorerとNetscapeの後継にあたるFireFoxでも、スタイルシートの解釈にそれほど大きな違いが出てこなくなりました。（まだ若干あるようですが）

また、デザインを切り離してスタイルシートに任せたことで、HTML本体は文書の構造化に特化し、また、アクセシビリティ等へも配慮したページの作成が求められています。（逆に、文書を構造化できる自由を得たともいえますね。）

今後は、HTMLがXHTML、そして、その次のステージへと発展していくことだと思います。

このコピペのページは単なる遊びです。ですので、突っ込まないでください・・・

キリ番を踏んだ人リストでよく見かけたやつです。最近はほとんど見かけることもないかもしれませんが。狭いエリアで文字を見せたいときに縦にスクロールさせるやつです。好き嫌い別れます。 （キリ番とは、ホームページのカウンターで１０００とか７７７とかキリのいい番号で訪問した場合のことです。一時期、そういうのをお互い報告しあうのが流行りました。最近はほとんど死語に近い？）

InternetExplorer以外ではまともに見えないでしょう。くどいですが、FireFoxではなんじゃこりゃ？な画面です。お遊びなので、のけぞらないでくださいm(__)m

黒バックに黄色文字で、、、StarWarsみたいにはなりませんが。

- STAFF -

原作　ノラ猫ぽっきー

脚本　家ネコ花子

演出　

効果　ノラ猫ぽっきー


- CAST -

主人公　○○太郎

脇役A　ちょい役の助

脇役B　つまらん脇役

<marquee bgcolor="#000000" width="200" height="200" direction="up" scrollamount="3"> <span style="color:#ffff00;font-size:12px;font-weight:bold;"> （ここに文字を入力） </span> </marquee>

スタッフロールもどき、影つき

- STAFF -

原作　ノラ猫ぽっきー

脚本　家ネコ花子

演出　

効果　ノラ猫ぽっきー


- CAST -

主人公　○○太郎

脇役A　ちょい役の助

脇役B　つまらん脇役

<marquee bgcolor="#000000" width="200" height="200" direction="up" scrollamount="3"> <span style="width:100%;height:100%;color:#ffff00;font-size:12px;font-weight:bold;filter:Shadow(color=#999999;direction=0)"> （ここに文字を入力） </span> </marquee>

マーキーとは残念ながらInternetExplorer独自のタグですが、 これを使うといろんなことが簡単にできます。えぇ、、、ってのけぞらないように（笑） FireFoxだとなんだこりゃ？という画面なはずです（自分もFireFoxでこれ打ってるんですが・・・）。

文字を動かす基礎編で、マーキーの使い方がなんとなくわかったかと思いますが、 それを組み合わせて楽しいことをやってます。こんな楽しい新着アイコンができちゃいます！
New! 　 New! 　 New! 　 New! 　 New!

新着アイコン（左右に震えるバージョン）

New!

<marquee bgcolor="#ff0000" width="30" behavior="alternate" scrolldelay="1"> <span style="color:#ffff00;font-size:12px;font-weight:bold;"> New!</span> </marquee>

新着アイコン（右から左に回転）

New!

<marquee bgcolor="#ff0000" width="30" behavior="alternate" scrolldelay="1"> <span style="color:#ffff00;font-size:12px;font-weight:bold;"> New!</span> </marquee>

新着アイコン（右から左に回転２）

New!

<marquee bgcolor="#ff0000" width="30" direction="left" scrollamount="20"> <span style="color:#ffff00;font-size:12px;font-weight:bold;">New!</span> </marquee>

新着アイコン（下から上に）

New!

<marquee bgcolor="#ff0000" width="30" height="12" direction="up" scrolldelay="100"> <span style="color:#ffff00;font-size:12px;font-weight:bold;">New!</span> </marquee>

これを応用するといろんなことができます。 W3Cのタグでないのが残念ですが、、、 基本的に画像でも装飾されたフォントでもマーキーではさめば動かせるので ページを派手にしたい時には重宝します。

背景に色をつける

背景に色をつける

<marquee bgcolor="（ここに色を）" direction="left" behavior="alternate" width="300px"> （ここに文字を） </marquee>

マーキーを組み合わせて複雑に

マーキーを組み合わせて複雑に

<marquee direction="up" height="80px"> <marquee direction="left"> （ここに文字を） </marquee> </marquee>

マーキーを組み合わせて複雑に２

マーキーを組み合わせて複雑に２

<marquee direction="up" height="80px" behavior="alternate"> <marquee direction="left"> （ここに文字を） </marquee> </marquee>

文字を動かすのが一部ではやってます。嫌いな方も相当います。 とりあえず手軽に動かすにはマーキーという独特のタグを使います。 マーキーとはInternetExplorer独自のタグですが、 その人気もまだ根強いです。FireFox等ではなにもおきませんので念のため。

文字が左から右に流れます（標準）

文字が右から左に流れます。

<marquee> （ここに文字を） </marquee>

文字が左から右に流れます（スピードアップ）

文字が右から左に流れます。

<marquee scrollamount="（ここに数字を。大きいほどはやい）"> （ここに文字を） </marquee>

文字が右から左に流れます（↑の反対）

文字が左から右に流れます。

<marquee direction="right"> （ここに文字を） </marquee>

左右に行ったりきたりします。

文字が左から右に流れます。

<marquee behavior="alternate"> （ここに文字を） </marquee>

下から上に動きます。↑

文字が下から上に流れます。

<marquee direction="up" height="40px"> （ここに文字を） </marquee>

上から下に動きます。↓

文字が上から下に流れます。

<marquee direction="down" height="40px"> （ここに文字を） </marquee>

上下を繰り返します。

上下を繰り返し行き来します。

<marquee direction="up" behavior="alternate" height="40px"> （ここに文字を） </marquee>

「ＭＳ 明朝体」にしてみる

ＭＳ 明朝です。
<span style="font-family:ＭＳ 明朝;">（ここに文字を）</span>

英語フォントならComic Sans MSがかわいい！

Comic Sans MSです。
<span style="font-family:Comic Sans MS">（ここに文字を）</span>

Webdingsなんていうフォントもあります（Windowsだけだと思うけど・・・）

IEKJHS←IEKJHSとタイプでこうなります。
<span style="font-family:Webdings">（ここに文字を）</span>

アンダーライン（下線）

アンダーライン
<span style="text-decoration:underline;">（ここに文字を）</span>

オーバーライン（上に線）

オーバーライン
<span style="text-decoration:overline;">（ここに文字を）</span>

取り消し線（文字の中心に線）

取り消し線（文字の中心に線）
<span style="text-decoration:line-through;">（ここに文字を）</span>

上記の複合型（実は三つを混合させることが可能）

上下、真ん中に線がある場合
<span style="text-decoration:overline line-through underline;">（ここに文字を）</span>

太い文字です。
<strong>（ここに文字を）</strong>

文字の大さをかえる

文字の大きさに変化を！
<span style="font-size:（ここに半角数字で文字サイズ指定）px;">（ここに文字を）</span>

文字の色をかえる

文字の色を変える！
<span style="color:#（ここにカラーコードを）;">（ここに文字を）</span>

斜めの文字

斜めの文字
<span style="font-style:italic;">（ここに文字を）</span>

だれが言い出したのか、コピペとはコピー（複写）してペースト（貼り付け）をすることです。
HTMLでホームページを書くときの一番の魅力はなんといっても、簡単にコピー＆ペーストで真似るところから始めることができること。

このワザをマスターすることがHTMLを習得する近道です。

コピペのやり方

１．コピーしたいテキストをマウスで選択

コピーしようとするテキスト（文字）をマウスで選択します。
このサイトのタグの場所はクリックするだけで選択されるようになっています（JavaScriptがオンの場合）。ダメな場合はマウスをドラッグして選択してください。

練習のため、下のエリアでマウスをクリック
<span style="color:#ff0000;">（ここに文字を）</span>選択されると文字が反転します。

２．右クリックでメニュー表示、コピーを選択

反転した文字の上でマウスを右クリック。
メニューが現れるので、メニューから「コピー」を選択。これでコピーが完了です。

３．好きな場所をマウスで選択して貼り付け

次はコピーした内容を貼り付けます。
貼り付けたい場所で右クリックすると、再びメニューが現れるので、今度は「貼り付け」を選択。
これで、先ほどコピーした内容が貼り付けられたはずです。

先ほどコピーした内容を貼り付けてみよう！
ここにはりつけ

もっと簡単にコピペを！キーボードショートカット編

実は、もっと簡単にコピペをする方法があります。
キーボードを使う方法です。この方法はホームページだけじゃなく、ワードとかでも使えます。

• コピー：テキストを選択したら、「Ctrl」と「C」のキーを同時に押します。
• 貼り付け：貼り付けたい場所をクリックして、「Ctrl」と「V」のキーを押します。

これ以外にも以下のショートカットなどのテクニックがありますので、これからも気づいたら紹介します。

• 選択ー：「Ctrl」＋「V」のキーを同時に押す
• マウス、ダブルクリック：クリックされた単語を選択
• マウス、トリプルクリック：クリックされたブロックを選択