こんにちは、かつコーチです。
僕は現在、プログラミングを学習していて、その学習の中で理解したことを、
毎回テーマを絞ってリアルタイムで発信しています。
HTMLもかなり投稿してきて、そろそろ大詰めかなー。
![かつコーチ](https://katsu-coach.com/wp-content/uploads/2022/03/profile1.png)
早くCSS行こうぜ!
って自分の中では言ってるけど、まぁもう少し。
今回は、意味を持たない要素である、「div」タグと「span」タグについてご紹介します。
意味を持たない要素とは?
「div」タグや「span」タグは、特に意味を持っていません。
意味を持っていないならどう使うのかと、僕も最初はよくわからなかったのですが、
これらがあることで、Webサイトを効率よく作成することができます。
主にCSSなどでスタイリングする際に使われます。
divタグ
「div」タグは、意味を持たないブロック要素です。
あるブロック要素だけスタイリングしたいときなどに使います。
例を紹介します。
<p>吾輩は猫である</p>
<p>吾輩は犬である</p>
<div style="color: orange;">
<p>吾輩は人間である</p>
</div>
<p>吾輩は鳥である</p>
ここでは、ある特定の段落だけ「div」タグで囲ってstyle属性で色を変えています。
ブラウザ上で確認すると、こんな感じになります。
このように、特定の要素だけスタイリングしたいときなどに、「div」タグは有効です。
尚、スタイリングそのものはCSSでします。
spanタグ
「span」タグも、「div」タグと同様、直接意味は持ちません。
使い方も似ていますが、「span」タグはコンテンツの中で使用します。
例えば、先程の例を使って以下のように書いてみましょう。
<p>吾輩は<span style="background-color: pink">猫</span>である</p>
<p>吾輩は<span style="background-color: skyblue">犬</span>である</p>
<div style="color: orange;">
<p>吾輩は人間である</p>
</div>
<p>吾輩は<span style="background-color: blueviolet;">鳥</span>である</p>
「div」タグのときと同様、色を指定していますが、
「span」タグの場合は、文章の中で使用しています。
これをブラウザで確認するとこんな感じになります。
このように、「span」タグは、文章の中で使うことができます。
多用は厳禁
「div」タグや「span」タグは特に意味を持たないので、
![かつコーチ](https://katsu-coach.com/wp-content/uploads/2022/03/profile1.png)
じゃあ、全部divタグで良いのではないかい?
って思うかもしれないですが、それだとHTMLが汚れてしまいます。
人間で例えるなら、手を足につけて、手が目につけて、ってあちこち手ができてしまうようなもの(笑)。
ちゃんと正しいマークアップをして、その上でこれらのタグを使うようにしましょう。
特に、「div」タグは多用しがちなので、注意が必要です。
まとめ
以上、今回は意味を持たない「div」タグと「span」タグについてご紹介しました。
ここの例ではわかりやすく色の指定をしていますが、スタイリングなので、
文字の形を変えたり、もっといろんなことができます。
でも、ここでは「div」タグや「span」タグは直接意味は持たないけど、
Webサイトを制作する上で便利なので、知っておくと良いでしょう。
ただ、意味がある場合はちゃんとその要素を使って作成するようにして、
他に手段がないときなど、必要最低限にして使用するようにしましょう。
そうすることで、より綺麗なコードが書けると思います。
僕もまだまだ初心者なので、「div」タグとかついつい使っちゃうんですけどね(笑)。
プログラミング学習において参考になれば幸いです。
学習の参考になるサイト
今やプログラミングの学習はネットで学ぶことができます。
僕もここから始めています。
ネット上にはたくさんの学習サイトがありますが、おすすめとしては、
この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です!
無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、
有料プランへ変更すれば良いと思います。
有料プランはどちらも月額980円(税込)です。
まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、
こちらからやってみることをおすすめします。
初心者へおすすめの入門書籍(※2020年5月13日追記)
ある程度、動画で学んだら、もっとしっかり学びたくなるもの。
そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。
僕のおすすめの書籍は、以下の2冊めちゃくちゃわかりやすいです。
それぞれご紹介します。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
まずは、今や鉄板のプログラミングの1冊目の本です。
知識ゼロから体系的に学べる本で、最近のWebサイトの作り方も学べて、
最後には1つのサイトを構築するまで網羅しています。
僕は後になって購入しました。
学習していて迷っている時、書籍でも勉強してみるかと思い手に取ると、
「もっと早く手にしておけば良かった。」そう思わせてくれた本です。
難しい内容がなく、3日くらいで一気に読んでしまいました。
勿論、コードを打ちながらですが、楽しくてすぐに終わりました(笑)。
その後も3周くらいして、一通り基礎を学べた本です。
プログラミング学習者で初心者の方には絶対におすすめします!
世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書
2冊目のこちらは、もう少し詳細まで書かれてあり、ステップアップされたい方に向いています。
とは言っても、初心者向けですので、無理なく読めます。
知識なくとも十分に学べますが、やはり楽しいという感覚が大切だと思うので、
動画などで勉強した後に、もっと詳しく勉強する際には、この本がおすすめです。
こちらも最後には1つのサイトを作成するまでを学べます。