HTMLコーディングをしてホームページを作ろう【効率化の裏技アリ】
こんにちは！ HTMLのことならお任せください、ライターのナナミです。
ホームページを作るとなると、避けては通れないのがHTMLのコーディングですね。
でもHTMLのコーディングってどうやるの？
めんどくさいんだよなぁ……楽な方法無い？
めんどくさいんだよなぁ……楽な方法無い？
なんて考えている方、結構多いのではないでしょうか？
ということで今回は、
HTMLのコーディングの流れや効率化の方法をまとめてみました。
ちょっとややこしくて面倒に思いがちなコーディングですが、流れやコツを掴めばパズルのように楽しくやれます。ぜひこの記事を参考にトライしてみてください！
この記事の目次
コーディングとは？
HTML・CSSなどの言語は、コードを書くことで動作しますよね。そのコードを書く作業のことを、コーディングといいます。
ざっくり言えばHTMLやCSSのファイルを作る作業ってことですね。コーディングしやすいツールを使って、ホームページを表示するために必要な記述をガシガシ書いていきます。
プログラミングをするのと何が違うの？ と思った方は、下記の記事を要チェックです。
コーディングとは？プログラミングとの違いや学習方法を徹底解説
更新日 : 2020年4月7日
コーディングに必要なもの
HTMLのコーディング作業を行なうために必要なツールはなんとたった2つ！ それぞれご紹介していきましょう。
テキストエディタ
コードを書くファイルの編集に使うツールです。パソコンにデフォルトで入っているメモ帳とかもこのテキストエディタに含まれるのですが、コーディングにおいては「コーディングに便利な機能が付いているテキストエディタ」のことを指します。
「Atom」とか「Sublime Text」とか、種類は様々です。下記の記事で色々紹介しているので、自分が使いやすいものを探してみましょう！（私は「Sublime Text3」を愛用しています）
【エンジニア監修】テキストエディタとは？〜生産性が100倍変わる〜
更新日 : 2017年6月6日
ブラウザ
ホームページを開く際に使う「Internet Explorer」や「Google Chrome」などのアプリをブラウザと言います。
HTMLは主にホームページ作成に使われる言語です。そのため、作業途中の現状チェックなどのためにブラウザを使います。
特にどれを使いなさいという決まりは無いのですが、イチオシなのはGoogle Chromeです。使用している人が多い他、CSSをコーディングする場合に便利な機能が盛りだくさんのデベロッパーツールが大活躍してくれます。
迷ったらとりあえずGoogle Chromeを使いましょう！
HTMLコーディングの流れ3ステップ
ツールができたらあとは書いていくだけ！ コーディングの流れをざっくり確認していきましょう。
HTMLの書き方そのものについては、下記の記事で詳しく解説しているので、こちらをご覧ください。
HTMLとは？初心者でも分かる基礎知識から書き方まで詳しく解説
更新日 : 2020年6月22日
ステップ1：ファイルの用意
まずはHTMLを書くための箱を用意してきます。
と言っても作業は簡単。テキストエディタで新しいファイルを用意して、保存するだけです。
ただし、下記の2つだけは気をつけるようにしてください。
- ファイル名はすべて半角英数字にする
- 拡張子(.jpgとか.pngとか)は「.html」にする
ステップ2：HTMLを書く
さあ、あとはHTMLをどんどん書いていきます。
最低限必要な記述は下記です。
【HTML】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
</body>
</html>
headで囲われている部分には、画面に直接表示されない裏設定的な記述が入ります。ファイルの読み込みとか、タブに表示されるタイトルとかですね。
メインとなるのはbodyで囲われた範囲です。ここに画面に表示される内容を記述していきます。
ここからは、あなたがどんなホームページを作りたいかによって変わってきます。下記の記事でサンプルコードなどを紹介しているので、参考にしてみてください。
HTMLのホームページは30分で作れる！5つの手順でわかる簡単な作り方
更新日 : 2020年6月19日
ステップ3：CSSを書く
HTMLのコーディングはステップ2でOKですが、それではまだ飾り気のない、ただ白背景に黒い文字が並んでいるだけの状態となってしまいます。
ここに飾り付けをしていくのが、CSSという言語です。
美しいホームページはHTMLだけでは作ることができません。CSSを組み合わせることで、文字の色や配置などを調整し、あなたが思い描くホームページを作り上げることができます。
CSSの基礎については、下記の記事で詳しく解説しています。ぜひHTMLとセットで覚えてくださいね。
CSSの基礎徹底解説｜初心者が絶対覚えておきたい3つのポイント
更新日 : 2019年10月11日
コラム：外注ってどうなの？
自分でコーディングするのは自信がない場合、コーディング専門の会社に頼むという手もあります。特に会社のホームページを作るとなると、社内にノウハウを持っている人がいない場合、自然と外注することを考えるでしょう。
もちろん相手はプロなので、しっかり仕事をしてくれる安心感があります。しかし自分の要望をきちんと伝えないと、想像していたのと違う出来栄えになってしまうことも……。
また、個人のサイトを作る場合には、外注はなかなか懐が痛いところです。
外注もありではパターン
- 会社のホームページを作ろうと思っている
- 会社内にHTMLなどのノウハウを持っている人がいない
- 人手不足でやれる人がいない
- 制作と保守の予算が捻出できる
注意すること
- 要望はしっかりと伝えて、完成イメージのすり合わせをする
- 更新方法などの運用の流れはちゃんと聞いておく
- 納品前のチェックは隅々まで見る
最低限覚えておきたいコーディングのルール
HTMLコーディングをする上で、覚えておきたいいくつかのルールがあります。……というと堅苦しいですが、正しくは「こうしたほうが楽だよルール」です。
HTMLは比較的自由に組み立てられる言語のため、何もルールをつけないで書いてしまうと、自由すぎて逆に書きづらくなってしまうのです。
なので下記のルールを参考に、自分がコーディングをしやすいルールを適用していきましょう。
HTML5を使う
HTMLにはいくつかのバージョンがあります。今最新のバージョンはHTML5です。
とはいえHTML4で書かれたホームページが一切開けなくなったわけではありません。なのでHTML4時代のタグを使うこともできなくはないのですが、使わないことをオススメします。
HTML5とHTML4では、追加されたタグや廃止されたタグなど、タグの種類が異なります。HTML4のタグを使ったりHTML5のタグを使ったりごちゃまぜにしてしまうと、それだけ使うタグの種類が増えてややこしくなってしまうのです。
さらに、HTML5はスマホでの表示対応などもできる、現代のホームページ作成に合わせた設計になっています。なので今はHTML5で書くのがスタンダードです。HTML4のことは忘れましょう。
HTML5とHTML4の違いについては、下記の記事でも解説しています。こちらも併せてご覧ください。
HTML5でできることって何？HTML4からの変更点も解説
更新日 : 2020年6月19日
classやidはわかりやすいものを使う
HTMLを書く時に付与するclassやid、半角英数字ならどんな文字列でもOKですが、パッと見てどこの位置の要素なのかわかるような名前をつけるようにしましょう。
下記の例を見ると一目瞭然、同じ構造でもわかりやすさが全然違いますね。
【HTML】
<!-- いい例 -->
<div class="text">
テキスト
</div>
<div class="img">
画像が入る予定
</div>
<div class="link">
リンクが入る予定
</div>
<!-- 悪い例 -->
<div class="aaa">
テキスト
</div>
<div class="bbb">
画像が入る予定
</div>
<div class="ccc">
リンクが入る予定
</div>
これにより
- 修正箇所が見つけやすくなる
- classやidの名前に悩む時間が減る
- 名前被りで困ることが減る
と、コーディングが楽になるメリットがたくさんあります。
インデントを使おう
HTMLのコーディングをする際、タグとタグをどんどん入れ子にしていくことがあります。このとき同じ高さに並んでいると、めちゃくちゃ見づらいです。
【HTML】
<!-- 悪い例 --> <div> <div> <p> テキスト </p> </div> </div>
インデントを使うことにより、この見づらいコードを整形して、見やすくすることができます。
【HTML】
<!-- いい例 -->
<div>
<div>
<p>
テキスト
</p>
</div>
</div>
どこからどこまでがタグの中身なのかがわかりやすくなりますね！しっかりインデントで整形することで、メンテナンス性も向上します。
HTMLコーディングを超効率的にする裏技
ルールをつけるだけでもHTMLのコーディングのしやすさはグッとアップするのですが、まだまだ改善の余地はあります！ ツールを活用したり、考え方を変えてみたりすることでより効率的にすることができます。
私がHTMLコーディングの際、めっちゃ楽になったなぁと思うポイントをご紹介していきますね。
テキストエディタをカスタマイズする
コーディング用のテキストエディタの一部には、機能を追加してより便利にカスタマイズできるものがあります。「h2」と入力しただけで開始タグと終了タグを一緒に入力してくれたり、タグならではの変換候補を出してくれたりするのです。
これを使えば入力の手間がぐっと減り、HTMLコーディングを爆速にすることができます。AtomとSublime Textのオススメ追加機能を紹介している記事があるので、ぜひこちらを参考にしてみてください。
職業別！ATOM便利パッケージ27選【アニメーション付紹介】
更新日 : 2020年7月27日
職業別！SublimeText3の作業が超捗る便利プラグインとテクニック19選
更新日 : 2019年7月29日
ざっくり分けてから細かく分ける
HTMLのコーディングの際、初心者は上から順に細かくコーディングをしていくことが多いのですが、実は混乱しやすいやり方なんです（私も苦しみました）。
細かいところからやっていくと全体像が見えなくなったりして、実はコピペで済むところをぜーんぶ手書きしている…なんてことが起こり得るからです。
オススメなのは、まずはざっくり分けてしまうこと。絵を描く時、いきなり細かく描き始めるより、先にざっくり輪郭をとったりしますよね。
そんな感じで最初はざっくり分けて全体像を掴み、少しずつ細かい部分を作ってみてください。上から順にコーディングするよりもずっと楽にできるはずです。
騙されたと思って、ぜひやってみてください。
classやidの命名規則を使おう
HTMLで地味に時間がかかるのが、classやidの名前付けだったりします。
先程紹介したように「どこの要素なのか」でつけていくだけでも楽にはなるのですが、割と規模の大きいページだと語彙力との勝負になってしまうことも……。
そこで使えるのが、命名規則のルールです。 classやidの名前付けに厳密なルールをつけることで、名前に悩む時間のさらなる軽減と、他の人が見た時にわかりやすいHTMLソースに仕上げることができます。
私が参考にしているのは下記の記事、BEM記法という命名規則を元に色々カスタマイズして使いやすくしています。
まとめ
HTMLのコーディングは、慣れるまでちょっとよくわからなかったり、混乱したりしてやる気がガタ落ち……なんてことも多いと思います。実際私もHTMLに触りたてのころ、全然できなくて画面とにらめっこしている時間のほうが長かった気がします……。
しかし今回ご紹介したコツなどを取り入れれば、今よりもずっと気楽にコーディングができるようになること間違いなし！ ぜひ取り入れて、楽しくHTMLコーディングをしてくださいね。
