【初心者向け】HTMLコーディングをこれから始めようという人に知ってほしい事

スポンサーリンク

これからお仕事でHTMLコーダーになる方へ

web 業界に端くれながらも長く在籍し、生活しておりますが・・・。

現状、HTML コーディングというお仕事がどういった状況に置かれているか判りません・・・。

ただ、先日「HTML コーディングを専門としたフリーランス」という方のお仕事ぶりがあまりにも驚愕だったので、自戒の念も込めまして、この記事を書いております。

現在、専門学校をはじめとした教育機関や、職業訓練等でどういったことが教えられているのか判りませんが。

「HTML コーディング」を始める方に「これだけは知っておいた方が良いのでは?」

という事をまとめておきました。

HTMLコーディングの必要最低限とはなんだろう?

もはや惰性というか、慣れでやってしまっているHTMLコーディング。

じゃあ、その必要最小限のことって何だろうと、ふと思わされる事件に遭遇したことがこの記事を書こうと思った動機です。

個人的には基本を見直すという意味でも・・・。

少しでもこれから HTML を勉強したいと思っているからの参考になればと思います。

タグは閉じよう

タグは閉じましょう。

HTML コーディングには様々なタグが存在します。

これらのタグの特徴や、その使い方を覚える事も大事ですが、タグは必ず閉じましょう。

<h1>見出し</h1>
<div></div>
<ul>
 <li></li>
</ul>
<strong></strong>

というように、タグには、必ずスラッシュを含むタグで閉じます。

中には例外もあって、「空要素」というのがいます。

改行は有名だと思いますが・・・。

<br>
<hr>
<input>
<frame>

等があるでしょうか。

ただ、これらの記述は「HTML」の記述であって、「XHTML」の場合は、必ず閉じます。

<br />
<hr />
<input />
<frame />

となります。

HTML と XHTML の違いは?

という場合は、こちらを参照してみてください。

HTMLとXHTMLの違いはどこにある?
-http://www.atmarkit.co.jp/

画像はサイズを加工する

html に配置する画像はなるべく、表示するサイズにカットしてから使用します。

理由は画像を読み込むのが大変だからです。

200px x 200px で表示する画像なのに、20000px 20000px でアップするのは意味がありません。

Mac の retina ディスプレイ対策で大きめの画像を用意する事は有りますが・・・。

100倍も大きい画像をそのまま使う意味は有りません・・・。

ちゃんとリサイズする事をお勧めします。というかしないと大変です。

画像サイズ等を規定するのは CSS だけではない

もう CSS によるコーディングが主流ではありますが・・・。

古いサイト(とも限りませんが・・・)などでは、画像サイズを HTML 側に直接記載している事があります。

<img src="画像のパス" width="400" height="100" >

というような感じです。

一応、css と同時にサイズを指定した場合は css の設定が優先されます。

この指示が記載されている所に 100 x 100の画像を置いたらどうなるかというと。

text-a

こんな感じに伸びてしまいます。

文字コードに気をつける

最近はだいぶ UTF-8 が主流なのかもしれません。

しかし、現在も Shift-JIS などでコーディングされているサイトは多く存在します。

この Shift-JIS ですが「日本語を表示しますよ」という意味ではありません・・・。

Shift-JIS は 元々はマイクロソフトが MS-DOS 時代に日本語対応するために採用してから企画として弘が増した。

しかし、このShift-JIS は すべての漢字を表示できる訳ではありません。

例えば、「﨑」この字は Shift-JIS では表記できません。

人名などで時々おみかけしますよね。

これを表記するためには、UTF-8 でサイトを作る必要があります。

Shft-JIS で文字コードを宣言したなら、Shift-JIS で保存する

Shift-JIS で文字コードを宣言するなら、UTF-8 で保存してはダメです。

Shift-JIS で保存します。

個人的には、もしくは、無意識にUTF-8 を利用するかもしれませんが、Shift-JIS で作られているサイトのファイルを勝手にUTF-8を保存してはダメです。

文字化けます。

テキスト部分の記号はちゃんと特殊文字で

HTML に記載される物は、h1 や p や div といった「タグの部分」と

それに囲まれた「テキスト部分」の2つに分かれます。

このとき問題になるのは、通常「タグの部分で利用される記号」がテキスト部分に混ざる事です。

そうなると、ブラウザはどこからどこまでを「タグ」と認識して良いのか判らなかったりします。

特殊文字にはこの他にも copyright を表示するためのものもあります。

©

これですね。

そのほか例をあげますと、

& < > " "

といった文字です。

こういった文字たちは特殊文字として記述します。

実際上の例は、HTML 上では以下の様に記載してあります。

&copy; &amp; &lt; &gt; &quot; &quot;

無用なトラブルを避けるためにも記号を「テキスト」として表示したい場合は気をつけましょう。

テスト環境をつくりましょう

以上、フリーのコーダートは思えない箇所を注意せざる得ない状況だったんですが、これらすべて「自分のつくったものを確認していない」という事が原因と思われます。

確かにお仕事の性質上、FTP アップができない環境でした。

確認をローカルでしなくてはならないのですが、普通にローカルで確認しようとしてもちゃんと再現できるとは限りません。

HTML に確認なら実際利用するサーバーと全く同じ環境を作り上げる必要はありません。

とりあえず、ローカルに「サーバー環境」が用意できればだいたい事足ります。

そういった時に役立つのが、MAMP とか XAMP。といったアプリケーションになります。

【MAMP】
mamp-logo

【XAMMP】
images
これらは、ウェブアプリケーション運用環境を簡単に構築するためのパッケージです。

開発用や、教育用として利用される事が多いです。

以下、名前の意味を解説すると、

X = クロスプラットフォーム(OSX WIndows Linux版があるよ)

M = Mac 版 があるよ

a = apache

m = mysql

p = php

p = perl

これらの環境をまとめて構築するという意味合いです。

ざっくり言うと、ローカルの PC 上にサーバーのような環境を作ってくれます。

ここで運用すれば、ディレクトリ構造等を揃えやすいので確認も楽になります。

特に、相対パスや絶対パスが入り乱れた HTML コーディングを見る場合には必須です。

ディレクトリは本番環境のwebのパスを見れば確認できます。

その他、いろいろな構造を確認するには、Google chrome のデベロッパツールを活用すると便利です。

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
-http://www.buildinsider.net/

こちらのサイトを参考にすると使い方が判るかと思います。

さて、MAMP XAMPP に話を戻しますが、こちらも使い方は触れませんが・・・。

ぜひ、これから HTML コーディングを覚える方には必須かと思います。

xamppの使い方、導入方法について

MAMPの使い方と設定

こういったサイトを参考にしていただければと思います。

スポンサーリンク

シェアする

フォローする

スポンサーリンク