2016.05.23
WEB

【HTML5を知ろう】 HTML5を動かしてみる！

こんにちは。
私、”みたらし”と申します。
ブログでの登場は2回目になりますね。

未経験で入社し、気が付けば1.5年くらい経っていました。
日夜プログラムコードの理解とゲームの進行に必死でございます。

さてさて今回も”HTML5″について触れていこうと思います。
“今回も”と書きましたが前回は結局HTMLの基礎の基礎だけになってしまったので、今回はHTML5の事をちゃんとやります。

安心して下さい。最新版ですよ！(｀・ω・´)

最新版とはいってもまた基礎の基礎なので、
安心してくｄ(ry

1 HTML5ってどうやったら使えるの？
2 とりあえず動かしてみよう
3 HTML5の新機能？
4 タグで文字を強調しよう！
5 補足的な物

HTML5ってどうやったら使えるの？

まずはここからですよね。
どうやったら今使っているパソコンでHTML5が使えるようになるのか！？

結論から言ってしまいますと、

何もしなくて大丈夫（￣ー￣）

何を当たり前のことを…

と思うかもしれません。
そりゃそうですこんなこともわからずに何をしようというのかねって感じですもん。

でも本当に初めてやってみようと奮闘している人は躓くと思うんです…
過去に私も躓きましたから(´・ω・｀)

セットアップイメージ図

ぴちぴちのだいがくせーだったみたらしさんは、過去にHTML5を頑張ってみようと思ったんです。
そのときに『HTML5インストールしなきゃ…』と思ってあちこちデータを探して回ったんです。
だってPCでゲームするには”インストール”しないといけないし、USBポートに買ってきた何かを挿したら『ドライバを”インストール”しています』ってでるから新しいものを使うには”インストール”しないと使えないって思ってたんです。

今思うと無知すぎて超恥ずかしい(・д・｀)

とりあえずまとめると、

HTML5はブラウザが対応しているかどうかなのでブラウザがあれば大丈夫。

WindowsXPでまだ頑張ってますとか、インターネット怖いから繋いでない。
とかでなければおそらく大丈夫です。

ここまで書いて気が付いたのですがやることありましたね。
ブラウザ最新版にアップデートオネガイシマス！(｀・Д・´)

とりあえず動かしてみよう

とりあえず動かしてみる

物は試し！といいますし、とりあえず動かしてみましょうよ。

メモ帳を開いて、下記のコードをまるっとコピーして貼り付けて下さい。
一つ一つ書いてもいいのよ？


<!DOCTYPE html>
<html>
<head>
 
</head>
<body>

[HTML5を知ろう] HTML5を動かしてみる！

</body>
</html>

書いたら[名前を付けて保存]から、
ファイル名の最後に『.html』を付けて保存しましょう(｀・Д・)

保存してできたファイルをダブルクリックしてみて下さい。

HTML5を動かしてみる表示サンプル1

どうです？
ブラウザで表示できました？

「よくわからないよー」な方は前回の記事を是非読んでみて下さい(￣ω￣)

【HTML5を知ろう】そもそも、HTMLって何？

HTML5の新機能？

とりあえず動かしたところで、HTML5で新しくなった部分を見てみましょう(｀・ω・´)

ではまずさっき作ったファイルをまたメモ帳で開いてみましょう。
ダブルクリックするとブラウザで表示されてしまうので、

ファイルを右クリック → プログラムから開く → メモ帳

とするとメモ帳で開くことができます。
『プログラムから開く』の所にメモ帳がない場合はさらに、『既定のプログラムの選択』から探してみて下さい。

さっき作ったファイルの内容と、前回の記事で作成したファイルの内容を見比べてみましょう。
ちなみに前回のファイルの中身は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
</head>
<body>

[HTML5を知ろう] HTML5の前にまずはHTMLから！

</body>
</html>

という感じでした。

そうです。
上から8行目の日本語が違う！(｀・Д・´)

そうなんです。でもそこじゃないんです。
大事なのは1行目なんですね(・д・｀)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

とながなが書いていたものが、


<!DOCTYPE html>

になりました。超スッキリ！(｀・ω・)

DOCTYPE部分は、この文書はバージョン～で作られていますよーっていうのを宣言するための場所で、HTML5以前は結構長くて覚えるのが大変な感じだったのですが、HTML5で非常に短くなったのでそのまま覚えられそう！

厳密的には書かなくてもいいらしいのですが、場合によってはブラウザの互換モードで表示されてしまい、レイアウトが崩れてしまうので書いておいたほうがいいんですって。
なるほどなー(・д・｀)

他にも新機能が沢山あるのですが、ここまでで結構長くなってしまったので、次でちょっとだけ紹介( ｰ`дｰ´)

タグで文字を強調しよう！

を使ってみる

HTML5では文章中の一部の文字を、文字色や太さとは別の形で協調表現できるようになっているらしい！(｀・Д・)

早速さっき作ったファイルを使って試してみましょう。

8行目の

[HTML5を知ろう] HTML5を動かしてみる！

というところを

[HTML5を知ろう] HTML5を動かしてみる！
 
→　ハイライトが付けられるぞ！？

に書き直してみて下さい。
書き直したら上書き保存してブラウザで表示を確認してみましょう。

markタグ表示サンプル

“ハイライト”って文章の背景が黄色くなったぞ(；・Д・)

ということがHTML5からできるようになりました。
ハイライトを付けたい部分を、とではさむだけでできちゃいます。超簡単！

他にも新しく増えたタグがあるので、気になる人は調べてみると面白いかもしれません。
個人的には<canvas>ってやつが面白そう(｀・ｘ・)

補足的な物

超初心者さんにもわかるように書いていたのですが、うっかり使ってしまったものがあったので簡単に説明するぞ。
(´・Д・｀)ｺｺﾃｽﾄﾆﾃﾞﾏｰｽ

“<“と”>”で囲われて書かれているものは”タグ”という
→<head>とか<body>とか例文コードにかいてあったやつ。
<!DOCTYPE html>もタグです。
巷では属性とかidとかついたりしてすごくながーいやつもいるとかいないとか…
htmlファイルの本文は<body>から</body>の間に書く
→<body>はここから本文ですよーっていうタグ。
HTML5からこのタグは省略可能になっているのですが、
最初のうちは書いておくと理解しやすくていいでしょう(｀・ω・´)
メモ帳での編集時につけた改行は無効
→無効です。いくら書いても無効なんです。
ブラウザで表示した時に改行したい箇所には改行タグ” ”を書きましょう。

そんなわけで今回はここまで！
次回は<canvas>タグについてやってみるかも…（￣～￣）

以上、PS4とWiiU購入済みのみたらしでした。