絵:たけお
この記事でも少し触れたけど移転前の林檎型肺胞はHTML4.1っていう古いバージョンでタグ打ちされていた
そのせいで卍鮭が画像周りの枠線を消す設定にしていたのに枠線が見えていたりよだれランドの動画が再生されなかったりと色々不具合を起こしていた
たけおがHTML5の形式に沿ってタグを書き換えたら元々卍鮭が意図していた表示になった
HTML5の知識が全くないところから本を読んだり検索をして勉強した中でHTML4.1では使えたけどHTML5では使えなくなったタグを紹介するぞ！
もくじなめくじもくめでべそ
HTML5の基本構造
<html>
<head>
<meta charset=”基本はUTF-8″>
<title>ページタイトル</title>
<style>
<!–
この中に見た目に関する指示を入れる
–>
</style>
</head>
<body>
本文
</body>
</html>
見た目を指定するときは<style>タグ内でページ1つまるごと指定だ！
<style>タグの中には本文で使うタグを指定して、そのタグにどんな装飾をしたいかまとめて指定できる！
例えば本文で使う<div>タグで囲われた文章全部赤色にしたいということであれば
<style>
<!–
div { color: #ff0000; }
–>
</style>
下省略
このように書くと本文中で使う<div>タグで囲われた文章が全部赤色になる
#〇△×◇ってのはカラーコードというもので色にそれぞれコード名がついているんだ
赤は#ff0000のコードが振られているから上のように書くんだ
昔は「red」とか色を英語で指定することも出来たけど今は推奨されていないからカラーコードを書いた方が確実だ！
部分的に見た目を変えたい時はどうするんだ！
例えば「大体の文章は赤でいいんだけど1部分だけ黒にしたいなー」ってときは
<div style=”color : #000000; “>と書けば</div>で閉じるまでは黒色になる
ちなみに<div>は大きい範囲をまとめて囲うタグで<p>は</p>で閉じるまでの部分が一つの段落として扱われる
<span>ってタグは単体で使っても特に何もないんだけど<div>や<p>タグ内で「まだ文章を区切りたくないけど色とか見た目を変えたい」って時に使うといいぞ！
<div>や<p>タグを使って閉じると改行されちゃうけど<span>タグはそういうことがないからstyleを入れて気軽に見た目を指定できる
たけお的に<span>タグはstyleと一緒に使って見た目を変えるためだけのタグと思って使っている
HTML5で廃止されたタグ
結構有名なタグが廃止されてたけおはものすごく混乱した！
使われることの多そうなタグを挙げてみるぞ！
<body>タグの中に入れる要素全部
<body bgcolor=”#ffffff” background=”a.jpg” text=”#000000″ link=”#000000″ vlink=”#000000″ alink=”#000000″>
上のように書くと背景色が白、背景にa.jpg、本文は黒、リンクの色、訪問済みのリンクの色、リンクをクリックした時の色が黒となるけど
これ今は全部つかえないよ（＾し＾）
どうするかっていったら<head>内の<style>で
body { background: url(a.jpg) repeat, #ffffff; }と打つと背景色が白で背景にa.jpgが設定される（repeat部分をno-repeatにすると背景画像を1つしか表示しない）
リンク色はbodyと別指定で
a:link { color: #000000; }（リンクの基本色）
a:visited { color: #000000; }（訪問済みリンクの色）
a:active { color: #000000; }（リンクをクリックした時の色）
と書く
本文は少し前に書いたようにdiv、p、spanタグ毎に色を設定すれば大丈夫だ！
<left><center><right>
これは文字の左寄せ中央揃え右寄せを指定するタグなんだけどこいつらを使ってもHTML5では文字が動かないぞ！
中央揃えをHTML5で代用するなら<span style=”text-align: center; “>で囲うと中央揃えされる
（spanはdivでもpタグでもお好みで使い分けなさい！）
でも文字寄せって大体1回指定して1ページ全部同じ寄せ方にすることが多いから
<head>タグ内の<style>でspan { text-align: center; }って指定した方がいいかもしれない
<font>
これもよくお世話になってたのに廃止されてたよ（＾し∴∵.:..:.
使う場面っていったら文字の色を変えたり大きさを変えるときだと思うんだけど
<div><p><span>にstyle付けて囲った文章の色や大きさを変えられるようになったから必要なくなったんだろうね
代用するなら<span style=”color: ff0000; font-size: 15px; “>のように使う
上は<span>で囲われた部分が赤色で文章のサイズが15pxになる
font-sizeではsmall、x-small、xx-small、large、x-large、xx-largeと大体の大きさを指定できるようにもなっている
昔でいう<font size=+1>とかそんな感じ
数字だけで文字の大きさ指定も出来なくなったから気を付けろ！
数字を使う時はpt（ポイント）かpx（ピクセル）で指定しなさい！
border
画像の枠線の太さを変える時に使っていたと思うけどこれも容赦なく廃止だ！
今までは<img src=”a.jpg” witdh=”60″ height=”60″ border=”0″>とか使ってたと思う
（高さ60幅60の枠線が表示されないa.jpgが表示される）
imgは基本的に<head>内の<style>タグ内で枠線をまとめて設定する
枠線を消したい場合はimg { border: none; }と設定すればページ全部に表示される画像の枠線が消える
witdhとheight（幅と高さ）は今までと同じやり方で設定出来る
<b><s>
<b>は文字強調、<s>は打消し線を文章に引くものだけどこれらも廃止だ！
文字強調をしたいときは<span style=”font-weight: bold; “>を代用として使う
打消し線を引くときは <span style=”text-decoration: line-through; “>で囲って代用する
HTML5で書かれていないサイトは早めに書き直した方がいい
こんな風に言うのもHTML5はスマホに対応しているからだ！
そしてHTML4.1のままだと作った人が意図しないような表示になることもある
廃止されたタグはここで挙げた以外にもいくつかあるけど必ずstyleを織り交ぜたタグで代用出来るようになっている
昔作ったホームページを運営し続けたい！と言うのであればHTML5形式に書き換えた方がいいと思うぞ！
前のお役立ち記事
次のお役立ち記事