HTMLを使って会話するコツ

HTMLを使って会話するコツ

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

Hey, guys!

こんにちは、カオツです。
日本人なのになんで英語なんて勉強しなきゃいけないの。
とか言ってられない時代になりましたね。

海外の人とコミュニケーションをとりたいから英語を勉強する。
機械とコミュニケーションをとりたいからプログラミング言語を勉強する。
今回はそんな話をしたいと思います。

コミュ症でも安心HTML

人とコミュニケーションを取るのって大変ですよね。
相手の気持ちを考えたり、相手の立場を考えたり、状況、空気を読んだり。。。
上手くコミュニケーションが取れなくて疲れるなーって人多いと思います。
僕もそうです(笑)

そんな僕でも気を使わずに話せるのがパソコンです。

僕が初めてパソコンと筆談したのはHTMLという言語でした。
HTMLは基本ブラウザを通して対話します。

ブラウザはこちらの言葉がおかしいと直ぐに拗ねるし、記述を間違えても何も教えてくれないし、、、案外扱いづらい、、、と初めは思ってましたが、こちらがしっかりに把握すれば人との会話とは比べ物にならないくらいスムーズに意思の疎通ができるとってもいいやつ!

そんなんブラウザとHTMLで話すなかで間違えがちなことを1つピックアップしてみました。

開始タグと閉じタグ

小さい頃おかんに「冷蔵庫のドア開けたらちゃんと閉めなさいよ!」ってよく怒られませんでした?
それと同じです。(編集部:えっ!?)

image07

これだけ見れば簡単そうに見えますが、開始タグが多くなると閉め忘れが起るんです。

例1)

image06

こんな感じで、上記の記述は完全に閉め忘れてますね。
おかんに怒られるやつです。

例2)

image04

これでちゃんと閉められましたね。
赤文字の部分が締め忘れていた箇所です。

締め忘れを防止するとっておきの方法がこちら。

例3)

image05

どうでしょう!?
タグの先頭にスペースをつけるだけでうんと見やすくなりました!
開始タグと閉じタグの位置が必ず同じ列に来るのでパット見て閉じていることを確認できますね。

HTMLは先頭にスペースを入れて書くのがスタンダードです。

ちなみに、入力フォーム等でよく使われる<form>タグの閉じタグを忘れたり、書き間違えると、お客様が入力されたデータが届かない!なんて身の毛もよだつようなことが起こるので気をつけてくださいね。。。

ミスを解決するには

まず複雑な構造だと、どこで閉じているのか、ミスをしているのかがわかりません。
そこでテキストエディタの機能を使ってみましょう。

専用のHTMLエディタまではいかなくても、無償のテキストエディタでも自動整形するツールがたくさんあるので、それを利用することでかなり軽減できます。

例えば、bitWaveでも何度か紹介していますがAtomなんてどうでしょう?
他の人が書いたHTMLの先頭にスペース(インデント)がなかったら、いちいち入れるのは面倒ですね。

オンラインツールでDirty Markupというのがあります。

文字通り汚いマークアップをきれいにしてくれるツールです。
ミスがあると正常な入れ子構造にならないので、気づきます。

ミスを発見するには

入れ子のミスの場合、完全にミスの箇所を自動修正するツールは少ないですが、絞り込みはできます。

例えばChromeのプラグインだとhtmlエラーチェッカーなどがあります。

その他、ブラウザプラグインでもHTML整形や文法チェックは、多数出ているのでGoogleで検索してみてください。

まだまだあるHTMLの注意点

本当はもっと大切なルールは沢山ありますが、書き出したらきりが無いので今回はここまで。
僕もまだまだ知らないエラーが沢山あるので、日々トライ&エラーで知識を増やしています。

目指せHTMLマスター!

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

この記事を書いた人
アバター
カオツ
コーディング戦隊・スパイク笹塚、人呼んで「カオツ」。アニメをこよなく愛す、元バンドマン。そのベビーフェイスで、社内の癒し系No1を欲しいがままにするド天然男。戦隊の中で一番若いが、リアクションは結構古目。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

  • HTML5.1のinputmode属性の対応状況について どうも、さむらいです。 当社ASPサービスのフォームアシストの機能に、キーボード最適化というものがございます。 スマホ向けに入力欄に合わせて最適なキーボードを出す機能なんですが、その機能拡張のためにちょっと調べてみ …
  • LocalStorageについておさらい どうも、さむらいです。 一時期、当社サービスの仕様を確定させるために、LocaStorageについて色々調査しておりました。 今、ちょっと企んでいることがありますので、今回はそれに先駆けて LocalStorage の …
  • 仮想環境で『Ansible』を使ってサーバ構築 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サー …
  • 「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「 …