【HTMLコーディング】基本的な使い方や役立つツールを解説
「HTMLコーディングってどのような流れで行うのが基本なんだろう？」
「HTMLコーディングを効率化できるツールについて知りたい！」
上記のような疑問を抱いている方もいるのではないでしょうか。
HTMLを独学していると、自分がコーディングしている手順が合っているのか気になりますよね。また、できるだけ効率的にコーディングして、作成する時間を早めたいと考えている方も多いかもしれません。
今回、DMM WEBCAMP MEDIAは、HTMLコーディングの説明と、基本構文や役立つツールについて解説していきます！
- HTMLコーディングとは
- 基本ルール
- コーディング手順
- 便利ツール
- 副業として仕事を受注するには
以上の項目に沿って説明します。
この記事を読むことで、HTMLコーディングとはそもそもどういう意味なのか理解でき、基本ルールとおすすめのツールを知ることができます。
HTMLを学習している方はぜひチェックしてみてください！
HTMLコーディングとはHTMLを記述すること
コーディングとは、テキストエディターにプログラミング言語を記述することです。そのため、HTMLを記述することをHTMLコーディングといいます。
ほかのプログラミング言語を書くこともコーディングといいますが、HTMLやCSSを記述する際によく使われる傾向があります。
そのため、HTMLコーディングという言葉はIT業界でよく利用されていますが、他の言語であるPHPやJavaScriptの語尾に「コーディング」と付けることは滅多にありません。
未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！
✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！
＼実践的なスキルが身に付くカリキュラム／
HTMLコーディングの基本ルール
HTMLコーディングするには、主に次のようなルールがあります。
- HTML5を利用する
- DOCTYPEを指定する
- CSSは極力HTMLファイル上に記述しない
HTMLには色々なバージョンがありますが、近年はほとんどのWebサイトがHTML5を使用しています。
HTMLコーディングする際は、記述しているファイルのタイプを宣言する「DOCTYPE」を記述する必要があります。DOCTYPE宣言はHTMLファイルの一番上に記述しましょう。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
上記はHTMLの基本構文です。一番上にDOCTYPEを宣言し、HTMLと記述することでファイルのタイプを表しています。
HTMLコーディングで作られたWebサイトは、一度作ったら終わりではなく、Webサイトのサービスやコンセプトが変わるごとに変更を加えていきます。
そのため、コードを触りやすいようにHTMLとCSSは、別のファイルに分けて記述する方がよいとされています。
HTML/CSSを使ったコーディング方法の手順を解説
HTMLとCSSのコーディングをする際の手順は、大きく下記の5ステップに分けられます。大まかな流れと各ステップのポイントを解説します。
STEP3でCSSを紐づける際は、下記のサンプルコードを参考にするとよいでしょう。
<head>
<link rel="stylesheet" href="css/test.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
上記コードではlinkタグのhref属性に、HTMLファイルから「css」というフォルダに入っている「test.css」というCSSファイルまでのパスを指定しています。
rel属性は、href属性で指定されているファイルの形式を指定しましょう。ここではCSSファイルを指定しているので、外部スタイルシートを表す「stylesheet」を指定しています。
【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！
✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート
＼目的別で選べる3つのコース／
【初心者向け】HTMLコーディングに最適なツール3選
HTMLコーディングをスムーズにするためにも、下記ツールの使い方を身に付けておくとよいでしょう。
- テキストエディター
- GitHub
- HTMLチェッカー
各ツールの使い方について解説します。
テキストエディタのおすすめはVisual Studio Code
テキストエディタとは、テキストで作成されているファイルを編集できるツールのことで、HTMLとCSSを記述する際に必ず使用するので用意しましょう。
身近なテキストエディタとして、パソコンにダウンロードされているメモ帳が挙げられます。メモ帳のように日本語や文字を記述しやすいテキストエディタもあれば、プログラミング向けの製品も多数あります。
タイトルにも書いてあるように、テキストエディタの中でもおすすめなのがVisual Studio Codeです。
Visual Studio Codeはテキストエディタの中でも軽量で、立ち上がりからコーディングまでスムーズに作業できます。また、コーディングに役立つ機能が豊富という点も魅力です。
たとえば、Visual Studio Codeに搭載されているEmmet(エメット)という機能は、HTMLやCSSで使うコードを保存してショートカットのように利用できます。
上記はVisual Studio Codeの画面です。htmlと入力するとEmmetの候補が現れ、クリックすることで保存されているコードを表示できます。
Emmet候補の2番目にある「html:5」を選択すると、下記のようにhtml5のコーディングに必要な基本コードが表示されます。
基本構文を最初から書く手間が省けて便利ですよね。
このように便利な機能が備わっており、軽量なのでストレスなく利用できます。HTMLコーディングに最適なテキストエディタと言えるでしょう。
GitHubはコードの保存に最適
GitHub(ギットハブ)とは、ソースコードを保存したり複数人で共有する際に利用できるサービスです。
ブラウザ上で利用できるので、デスクトップに保存しているソースコードが消えてしまったときに備えて、GitHubにも保存しておくことでソースコードの損失を防げます。
また、自分のソースコードを第三者に見てもらうときは、GitHubの情報を教えることでスムーズにソースコードの共有が可能です。
個人規模でコーディングする際はソースコードの保管先として活用し、複数人でコーディングする際はソースコードを共有するツールとして活躍するでしょう。
HTMLチェッカーは納品前に使おう
HTMLチェッカーとは、HTMLが正しくコーディングされているのかチェックできるツールです。正しさの基準は、Web技術の標準化と向上を目的とした非営利団体である「W3C」に則っています。
HTMLチェッカーの使い方は、ツールのテキストボックスにチェックしたいコードをコピペして、実行(Check)ボタンを押すだけなので簡単。
HTMLは多少タグが間違っていても、ブラウザ上の動作に現れないことが多いです。下記のサンプルコードを例に見ていきましょう。
<body>
<div>
<p>テスト</p
</div>
</body>
上記コードは、pタグの最後が記入されていませんが、実行すると問題なくpタグ内のテキストが表示されます。
実行結果
このようにブラウザ上で確認できない記述ミスを防ぐためにも、HTMLチェッカーの利用をおすすめします。
HTMLコーディングは副業に最適
HTMLをコーディングできるようになると、副業としてホームページやLP作成の仕事に挑戦できます。副業ブームや実店舗のみで運営している会社のオンライン化もあり、HTMLとCSSを使ってWebサイトを作成する副業に関心を持っている方も多いでしょう。
HTMLコーディングを身につけてWeb制作会社に転職することもできれば、副業としても活用できるので、HTMLは汎用性の高いスキルだということがわかります。
仕事を受託する方法は下記の３つが主流です。
- クラウドソーシングサイトの利用
- SNSで探す
- 友人や家族
クラウドソーシングサイトは、lancers(ランサーズ)やCroudWorks(クラウドワークス)がおすすめです。HTML/CSSを使ったコーディング案件が多く、難易度が低い案件もあるので初案件を受注するのに最適なサービスと言えるでしょう。
SNSはTwitterやFacebookが最適です。TwitterにはWeb製作者として活動している方が多くいるので、検索欄に「#コーディング案件」と記入して調べてみるとよいでしょう。
Facebookでは、自分がWeb制作できることを投稿することで、ホームページを持ちたい友人から連絡が来る可能性があります。
友人や家族から仕事をもらう方法も同じく、自分がWebサイトを作れるということを知らせることで仕事につながるかもしれません。
HTMLコーディングできることを周りに公開して、初案件を獲得しましょう。
まとめ
今回、DMM WEBCAMP MEDIAでは、HTMLコーディングについての説明と、基本的な使い方や役立つツールについて解説しましたが、いかがでしたでしょうか？
HTMLコーディングとはHTMLを記述することで、次のような流れで作成していきます。
- 必要なファイルを揃える
- HTMLの基本構文を記述する
- HTMLから先にコーディングする
- CSSをコーディングする
HTMLとCSSのコーディングを覚えると、副業として活用したり転職のアピールポイントにもなります。HTMLコーディングに関心のある方はぜひ参考にしてみてくださいね！
