【初心者向け】HTML5の入れ子ルールが簡単にわかるおすすめサイト!




こんにちは、プロクラスの渡辺です。
今回は、HTML5の入れ子についてです!

お恥ずかしながら、何年もコーディング作業をしているのにも関わらず「あれ…??」となることが多いのでいつでもすぐに確認ができるようにしているおすすめのサイトを2つご紹介です!
HTMLの勉強を始めた方、プログラマでHTMLのことがいまいち覚えられない…という方は参考になると思うのでぜひ見て活用をしてください~! 😉 

HTML5 入れ子チートシート さん

こちらのサイトは非常にシンプルです。だからこそ一目でわかる、すごいチートシートを作成されています!
https://yoshikawaweb.com/element/

この画像は「q」タグの「親」をクリックしたときの画像です。
色が水色になっているところはqタグの親として使用することができるのが一目でわかりますね!
また、「子」をクリックすると、子として使用できるタグがオレンジ色に変わるようになっています。

自分が確認するためにも使用しますが、実際にプログラマさんにこれを見せたほうが文字をだらだらと打ってチャットに投げるよりも早く、そしてわかりやすいという、文句なしのチートシートです!(実際にそんな風に使わせてもらいました。)
最近HTMLを始めた方に教えたいときも、とっても便利なんではないでしょうか 😳

こんな素晴らしいものを作ってくださって感謝しかないですね…私は先人の方々が残してくれた便利ツールがないと生きていけません 😳 
ポチポチ押すだけでも楽しいです(笑)

webliker さん

こちらのサイトを運営されている「web兄さん」さんのアイコンめちゃくちゃかわいいです。
HTML5でのタグの入れ子ルールを徹底的にまとめてくださっている記事を紹介します!

■【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
https://webliker.info/46840/

こちらのサイトさんは、入れ子ルール以外にもコーディングをするうえで、「めっちゃ助かる~~!!」っていう情報をたくさん掲載されているので上記のページ以外にもたくさんお世話になっています。

入れ子のルールから使い方まで丁寧に書かれているので、読むたびに勉強になります。
HTMLの勉強を始めたい方、始めたばかりの方にはこちらのサイトが本当におすすめです!!紹介した記事以外にも、「HTML入門」の記事など役に立つものばかりです。
あとデザイン的にもめちゃくちゃ見やすい記事でいつも感心してしまいます 😆

最後に

いかがでしたでしょうか?
普段からコーディングをしていても、聞かれたときに「ええ~(なんとなく使ってるよぉ~)」っていうことも多いのですが、私はこの2サイトでほぼほぼ何とかなりそうだなって思っています!

プロクラスでは簡単にサイトを作れる、「はじめてのWordPress」講座も用意しています!
最初はWordPressで簡単に素敵なサイトを作ってから、本格的にHTMLを学ぶのもいいかもしれませんね♪

——**———–**————**————-**———-**——
■簡単ホームページ作成!はじめてのWordPress
授業詳細:https://proclass.jp/class/detail1301/
現在は新型コロナウイルス感染症対策のため、オンラインレッスンのみの開催となります。
ご自宅などで受講できます!
——**———–**————**————-**———-**——