HTMLを上手く書けるようになると良いことがけっこうあります。まずは「Googleに評価してもらえるようになる」ということです。htmlタグは約110種類もあるのですが、それぞれに役割があり適切に使用することで検索エンジンからの評価をアップさせることができるのです。Googleに気に入ってもらえると良いことたくさんあります。
もうひとつは「共同作業がしやすくなる」ということがあります。だれかと作業しているときに「なんだよ、この汚いコード!」って腹を立てられなくなります。そうするとみんなの作業が早くなりますし、結果的に生産性が上がることになりますね。
というわけでHTMLタグを理解してキレイにコードを書くと良いことばかりなのです。
しかしながら「何が良いコードなの?」とわからないこと多いですよね。
今回はそんな「タグを適切に使うにはどうしたらいいのか」「自分なりにhtmlのコードを書いてるけどこれって大丈夫なんだろうか」と考える人に参考になるWebサイトを厳選してご紹介します。
特に後半は、マスターすればhtml以外の言語でのコーディングの際にも役立つスキルになっています!
htmlを学び始めるとまず最初に出会うのが”タグ”という存在です。
不思議の国のアリスではジュースの入った瓶に『Drink me!(私を飲んで!)』というタグがつけられていましたよね。
あのタグによって”瓶の中身は飲み物だ”ということがアリスには伝わりました。同様にhtmlのタグも、”ここの中身は画像”、”ここの中身は大見出し”というような情報を伝えるためのものです。
現在htmlタグの数は約110種類ほどあります。これを適切に使って情報を機械でもわかるようにすることがタグの役目になります。例えばGoogleという機械はこのタグをよーく見ています。そして、その中身を理解しているのです。このへんはスキルハブのHTML講座で完結に学べるので見てみると良いでしょう。
まずはコーディング初心者さんにありがちな「よくない」コードの書き方の事例を見て見ましょう。
例えば文字のブロックとメイン画像のブロックなどを分ける場合など”コードのカタマリ”を作る際にどうしても便利なのでdivタグを濫用してしまった経験はありませんか?
そんな「あまりよろしくないコード」を集めたサイトが存在します。
htmlに関しては7つだけですが、「このコードの何がダメなのか?」を考えたり、調べたりするだけでもコーディングの際に役立つでしょう。
div要素って便利ですよね。後ほど紹介しますが、使いすぎるとdivまみれになってしまい、別の人が見たときにわかりづらいコードになってしまいます。
また初心者さんが忘れがちなalt属性についても触れてくれていますので、今まさにコーディング真っ最中の人必見のサイトです。
最近htmlを始めたという人にとっての「あるある」が掲載されているサイトです。
きちんとコードを書いたのに、思い通りの表示にならない!という人はこちらのサイトで紹介されている項目をチェックしてみましょう。
当たり前ですが、わかりやすいコーディングはhtml以外の全ての言語で共通して求められるものです。
慣れるまではいちいちコメントを書くのは面倒だし、自分のWebサイトのコードなんだから好きにさせてよ!と思ってしまうかもしれません。
ただ実は適切なマークアップが施されたコードというのはSEOにおいても重要な要素の1つであることをぜひ頭の片隅に置いておいてください。正しいマークアップが実装されたWebサイトを検索エンジンは高く評価します。
そう考えるとSEO対策としても適切なタグでのマークアップが有効であることが理解できると思います。
将来あなたがエンジニアとして複数人でWebサイトやアプリを開発するようになった時にdivタグまみれの長文コード(※どれがどのdivの閉じタグかわからない)や、コメントが全くない状態でこのカタマリはどの部分のコードなの?と思われるようなコーディングは周囲を困惑させてしまいます。
結果として開発が遅れたり、あなた自身のエンジニアとしての評価を下げることにもなりかねません。
とは言え一朝一夕に見に着くものではないので、どうせなら基礎の時点から慣れておいた方が得ですよね。
こちらではhtmlでコーディングを始める上での基礎中の基礎、絶対に必要なタグとよく使われるタグを紹介してくれています。
またサイトのデザイン部分にかかわってくるcssとの連携のためのidとclassについても触れてくれています。
こちらのサイトではタグの一覧が掲載されており、「リンクをはる時のタグはどれだっけ?」というような目的別、「確かaから始まるタグだったんだよな…」というような時のためのアルファベット順と2種類からタグを探すことができるようになっています。
例えばWebサイトのメインページを作ろうと思って作業を始めたとします。
1日の作業でページを完成させることができる人は初心者さんの中でどの程度いるでしょうか。別の日や、少し時間を空けてコードを見返したときに「ここはなんでカタマリにしてるんだっけ?」などと迷わない為にもコメント機能を上手に使いましょう。
わかりやすいコメントを書くためのポイントを3つに絞って解説してくれています。
時間がない時でもサクっと読める簡潔な文章になっているのもありがたいです。
こちらではもう少し踏み込んでコメントアウトについて詳細な解説をしてくれています。
メインはhtmlですが、他の言語のコメントアウトの一覧なども掲載されていますし、初心者がコメントアウトの際にやりがちなミスの事例などもあり大変参考になります。
わかりづらいコードはNGということは理解できたけど、じゃぁ見本をみせてよ!と言いたくなってきませんか?
自分からみても他人から見てもわかりやすいコードってどんなものなのでしょうか?
こちらではhtmlとcssにわけてコードを解説してくれています。
例としてこのようなページを作る場合のサンプルコードが掲載されています。また徹底解剖編のリンク先では更に細かくページの構成からコーディングまでの詳細を確認することができます。
ここまでで既にあなたは美しいコーディングの方法、逆にNGコード(俗にいうクソコード)とはどのようなものか、などを学んできました。
突然ですがトロトロでフワフワなオムレツがのったたいめいけんのオムライスをご存知でしょうか?
たんぽぽオムライス
自分でもあんなオムライスを作りたい!と解説や動画でやり方を学んでもいざ実践すると初回でお店と同じような仕上がりには当然なりません。
理解できていることと手が動くというのは別物なのです。
そこで自分で美しいコーディングを意識しながらLPを作ってみましょう!もし、今あなたが作りたいデザインが決まっているのであればそれを作ってみましょう。
まだhtmlをはじめたばかりでデザインまでは決まっていない…という方はコチラなんていかがでしょうか?
もちろん既にデザインが決まっている人にも参考になるテクニックが満載です。
ここまで学んできたことを活かして自分でコーディングをしてみたけど、本当にこれであってるの?と不安になる人もいるでしょう。
そんな時に心強い味方となるのが、コーディングのチェックツールです。
タイトル通り、コードのチェックツールをまとめてくれているサイトです。
中にはGoogle chromeの拡張機能でチェックする方法なども紹介されているのでchromeユーザーさんは一度確認してみてください。
ここまで”脱”初心者コードの為のコツをご紹介してきましたが、何よりも大切なのは実際にコードを書いてみることです。
コーディングは手を動かして覚えることがとても大切です。こんなページが作りたいと思ったら、とにかく設計~コーディングまでを初めてみましょう。
そこでわからないことが出てきても大丈夫です。インターネット上にはコーディングの達人たちがたくさんの知恵を残してくれています。
実はこの”わからないことを調べる”力もコードを書いていく上で必要なものなので調べることは恥ずかしいことではありません。胸を張って検索しましょう!
わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。
無料申し込み期限:
3月14日
まで
募集人数: 100名(残りわずか)