2019年8月5日シェアツイートシェアブックマークHTMLの学習をはじめまた時、「この書き方であってるのかな?」と誰でも不安に思うもの。「思ったように表示できない」「パソコンでは大丈夫なのに、スマホではレイアウト崩れる」といったトラブルもよくあるもの。した問題の解決に欠かせないのが、「HTMLの文法チェック」や「コードチェック」でしょう。今回は、HTMLコーディングに役立ついくつかのツールをご紹介させて頂きます。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。プログラミング言語と違って、多少間違っていてもそれなりに動いてくれるもの。その寛容さに甘えていると、痛い目に合うかもしれません。重要性を知るために、HTMLをミスっていたらどうなるか、確認してみましょう。買い物ボタンが動かないショッピングサイトに限らず、申し込みや問い合わせなど何だかのクロージングを仕掛けているサイトも少なくないと思います。決済できない、申し込みできないという事態に。試しに以下のデモサイトで買い物をしてみて下さい。「申請」ボタンを押しても何も起きないと思います。大丈夫な場合はどうでしょうか?以下のデモサイトで先ほど同様に「申請」ボタンを押してみて下さい。画面下部に注文内容が表示されると思います。後、半角スペースではなく全角スペースを入れています。分かりづらいですよね。HTMLのコードミスもすぐに気づいて修正できるのですが、フレームワークなどを用いて動的にHTMLコードを生成するようになると、HTMLのコードミスに気づきにくくなります。上図の場合、本来はページ最下部に表示されるはずのフッター要素が、ページのサイド部分に表示。これはデザイン的に致命的なミスですが、どうして気づかなかったのでしょう?それはテンプレート作成時は記事数がなかったのに、Webサイトの運営がはじまり記事数が増え、HTMLコードが変わっていったため起きた現象です。これはミスを誘発してしまいますよね。ミスの他に、ミスしやすいポイントがありますのでご紹介させて頂きます。タグの基本文法は、<h2>HELLO</h2>といったように「開始タグ」と「終了タグ」で構成されます。コード作成時は恐らく大丈夫と思うのですが、コード修正時に終了タグを消して、追記し忘れることはよくあります。<input>タグに終了タグを付けてしまうことも。属性の記述ミスHTMLタグは、属性を加えることで機能を拡張することができますね。これらの属性は決まった語句や組み合わせになりますので、ルールを知った上で記述しないと思うように動いてくれません。加えることを勧めていません。スタイル設定してくださいと注意喚起されちゃいます。HTMLタグに出会います。<font>タグの使い方が紹介。この他にも<center><frame>など。違ってくる場合がありますので、要注意です。非推奨となっています。align="right">こうした問題、HTML初心者に限らずみんなストレスになることでしょう。役立つというわけですね。理由は、簡単且つチェック結果を信用できるからです。コードチェックを行うことができます。HTMLの規格を策定している団体が運営するサイトなので信頼できますよね。使ってみると分かるのですが、チェックは厳し目。なくても動くんですがね。半角と全角のスペースチェックができるのはこちらぐらいしかないかもしれません。コピー&ペーストするというのは面倒なもの。HTMLコードを書くテキストエディタの機能をチェック。デバグに優れたエディタをご紹介します。これならコードを書くと同時にチェックすることができますね。Adobe社が開発を進める無料のテキストエディタで、HTMLの編集には特に長けています。HTMLを書きやすいですし、見やすいです。HTMLを書くのがいいかもしれませんね。HTMLコードのミスをリアルタイムでチェック可能。コードを書きながらミスを確認することができますし、書いたコードのプレビューが同一画面で確認できますので便利です。バグを発見できない時はHTMLの学習を進めていくと、「あっているはずなのに思ったように表示されない」ということもでてきます。上記で紹介したようなチェックツールも一つですし、ブラウザのチェック機能を利用する手も一つと思います。画像が表示されていません。上手く表示されていない箇所で「右クリック」から「検証」を選択。ブラウザによって「検証」の用語は異なりますが「要素を検証」などそれらしい項目を選択しましょう。<imgsrc="">という不思議なタグに。これを直してみましょう。HTMLコードを編集できるようになりました。<img>タグに書きなおしてみましょう。画像が表示できましたね。HTMLを確認、編集してみることが手っ取り早いかもしれません。HTMLコードが確認できます。</div>の設定が怪しい時は、コード全体を見てみると、バグを発見できるかもしれませんよ。HTMLのコードミスとSEO「HTMLを正しく記述しないと検索順位が落ちる」と思われている方もいらっしゃると思います。確かなことは言えませんが、以下の点からそれほどシビアになる必要はないかもしれません。あった*またページの読み込みスピードも「HTMLコードミスあり」と「ミスなし」で比較しましたが、ほとんど変わりませんでした。いった点に影響するということですね。HTMLの学習を進めていくと、見出しタグにリンクを設定したい場面も。コードチェッカーに両方のコードをポスト。どちらもエラーはなしで、両方正解という結論に。href="#">タイトル</a></h2>の方が大多数。<a>タグを囲う方法で良さそうですね。CodeCamp提供のデザインマスターコース当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴はデザインからコーディングまでWebデザイナーに必要なスキルを獲得できるWebデザイナーとして転職・フリーランスも可能になる実際にWebサイトを作るのでポートフォリオとしても使用できる無料レッスン受講後の申し込みで10,000円クーポンをプレゼントしています!ぜひお試しください。複数の要素が加わってくると、段々難しくなり、エラー発見も困難に。ここで挫折するか、それとも学習を継続できるかは「モチベーション」「心的余裕」などありますが、「学習環境」もポイントになるのではないでしょうか。自分ではわからないエラーも、他の人に聞けば直ぐに解決できる、ということもよく聞きます。そんな独学者の強い味方になってくれること間違いなしでしょう。IT技術に早期適応するためにも一人で悩んでいる時間、ないかもしれませんね。随時無料相談や無料体験を受け付けていますので、ホームページから空きスケジュールを確認してみて下さい。体験申し込みできるかもしれませんよ。家事も仕事もプログラミングも。【2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。