まずは作法を気にせずHTMLを試してみる

HTML/CSS/JavaScript
この記事は約4分で読めます。

Google Chromeや、Mozilla Firefox、インターネットエクスプローラー、その他、ブラウザはたくさんあって日常的に便利に使っているのだけれど、内部でどんな処理が動いているかって、よくわかりません。電子工作で作ったものと人との間をつなぐ道具としてブラウザは便利に使えそうなので、基本のHTMLから実験していきたいと思います。

Gコードを直接テキスト編集するような感じ

HTMLを書いてブラウザで見てみる

早速、テキストエディタでGコードを直打ちするようにHTMLを書いてみます。

デスクトップから右クリック → 新規作成 → テキストドキュメント で、拡張子 txt のファイルを作ります。

デスクトップに保存。(もちろんどこに保存してもいいのだけれど、わかりやすいので)

ファイル名の拡張子部分をhtmlに書き換えます。

アイコンが変わりました。テキストエディタはsakuraエディタとか秀丸エディタとか、いろいろあるのだけれど、WEBプログラミングでは「Atom」とか「Brackets」の進化が速そう。どちらも無料です。わたくしは「Brackets」にしましたが、どちらも言語に合わせた支援機能が豊富で、ある意味「自動プロ」的です。

「Brackets」使い始め

Bracketで開くと最初からエンコードはUTF-8、HTMLファイルであることを認識してコード(命令語)を色分けする機能があります。

以下のように書いてみます。

新しいテキストドキュメント.html

はじめてのhtml
って普通に日本語で書いてるだけだし。

これで保存して、普通にファイルをダブルクリックするとブラウザが開きます。まずはGoogle Chromeで見てみましょう。

改行して保存したはずのところ、改行が無くなっています。

同じファイルを別のブラウザでも確認してみます。以下はMozilla Firefoxです。

同じく改行がなくなって一行で表示されました。続いてマイクロソフトIE11(インターネットエクスプローラー11)です。

IE11では文字化けしてしまいました。念のためマイクロソフトのEdgeを見てみましょう。(2019年3月時点)

同じく文字化けしました。

次に、元のファイルに<br>を追記して保存します。

新しいテキストドキュメント.html

はじめてのhtml<br>
って普通に日本語で書いてるだけだし。

再度、Google Chromeでファイルを開いてみます。

今度はきちんと表示されました。 GコードでもM指令とかS指令といった色々な表記があるように、htmlでも文法があって、それらをブラウザが解釈して表示しているらしい。ただ、Gコードにくらべるとルールがやたら多くて、とても全部は覚えきれません。(全部覚える必要もないのですが)

マイクロソフトIE11ではどうでしょうか。

改行はされていますが文字化けはそのままです。

エンコードの指定を追加します。

新しいテキストドキュメント.html

<meta charset=”UTF-8″>
はじめてのhtml<br> 
って普通に日本語で書いてるだけだし。

今度はちゃんと表示されました。

Google ChromeとMozilla Firefoxではエンコードの指定をしなくても表示されました。これはブラウザの初期設定の問題でしょうか。もしくは細かい設定が省略されていてもブラウザが適当に解釈してくれているのでしょうか。 (今後わかったところで追記したいと思います)

型にはまった記述をすると下記のようになります。

新しいテキストドキュメント.html

<!DOCTYPE html>
<html> 
  <head> 
    <meta charset=”UTF-8″> 
    <title>test</title> 
  </head> 
  <body> 
    <p>はじめてのhtml<br>って普通に日本語で書いてるだけだし。</p> 
  </body> 
</html>

文法は以下のサイトで調べます。(カタカナ英語が氾濫しているので理解が大変です)

HTML の基本 - ウェブ開発を学ぶ | MDN
HTML (Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ)は、 Web サイトのコンテンツに構造を指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。タイトルが示すように、この記事では、HTML と...

上記サイトのメニューにあるように、HTMLの文法だけでは表現しきれない見た目を整えるスタイルシート言語、変数や関数が使えるようになるJavaScript言語があります。

次はカスケーディングスタイルシート(CSS)を試してみます。

まずは作法を気にせずCSSを試してみる
スタイルシートは見た目を整えるためとなっていますが、文字に色を付けたり、レイアウトの配置を変えたりする他、アニメーションの命令まであって、なかなか奥が深そうです。ゆくゆくはWEB上で帳票や仕様書作成までやってみたいので、CSSは継...

コメント