【HTML基礎学習18】意味をもたない要素divタグとspanタグを使ってみよう!




こんにちは、かつコーチです。

僕は現在、プログラミングを学習していて、その学習の中で理解したことを、

リアルタイムで発信しています。

今回は、意味を持たない要素である、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タグについてご紹介しました。

ここの例ではわかりやすく色の指定をしていますが、スタイリングなので、

文字の形を変えたり、もっといろんなことができます。

でも、ここではdivタグやspanタグは直接意味は持たないけど、

Webサイトを制作する上で便利なので、知っておくと良いでしょう。

ただ、意味がある場合はちゃんとその要素を使って作成するようにして、

他に手段がないときなど、必要最低限にして使用するようにしましょう。

そうすることで、より綺麗なコードが書けると思います。

僕もまだまだ初心者なので、divタグとかついつい使っちゃうんですけどね(笑)。

プログラミング学習において参考になれば幸いです。

学習の参考になるサイト

今やプログラミングの学習はネットで学ぶことができます。

僕もここから始めています。

ネット上にはたくさんの学習サイトがありますが、おすすめとしては、

この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です!

無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、

有料プランへ変更すれば良いと思います。

有料プランはどちらも月額980円(税込)です。

まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、

こちらからやってみることをおすすめします。

初心者へおすすめの入門書籍(※2019年8月13日追記)

ある程度、動画で学んだら、もっとしっかり学びたくなるもの。

そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。

僕のおすすめの書籍は、以下の2冊めちゃくちゃわかりやすいです。

1冊目は、知識ゼロから体系的に学べる本で、最近のWebサイトの作り方も学べて、

最後には1つのサイトを構築するまで網羅しています。

難しい内容がなく、3日くらいで一気に読んでしまいました。

勿論、コードを打ちながらですが、楽しくてすぐに終わりました(笑)。

2冊目は、こちらもとても丁寧に書かれてあり、どちらかというと文法的に学べます。

勿論、知識なくとも十分に学べますが、やはり楽しいという感覚が大切だと思うので、

動画などで勉強した後に、もっと詳しく勉強する際には、この本がおすすめです。

こちらも最後には1つのサイトを作成するまでを学べます。

スクールを検討してみよう(※2019年9月13日追記)

  • 独学でやっていると、結局やらなくなってしまいそうで不安。
  • もっと効率よく早く学びたい。

と心配になる方もいるかもしれません。

そんな方は、一度スクールを検討してみることをお勧めします。

スクールでの学習なら、挫折が怖いという方もサポートを受けることが出来るので安心です。

自分の目標やゴールを、プロが一緒に設定してくれ、今後のキャリアの話もできます。

とはいえ、いきなりスクールに通うのもかなり不安ですし、それは絶対おすすめしません。

スクールに通うとなると高いお金を払うことになるので、

まずは「無料体験レッスン」を受けてみることをおすすめします。

たくさんあるスクールの中で僕がおすすめするのは、僕も通っている侍エンジニア塾です。

僕は、効率よくより早く学びたかったので、通うことに決めたのですが、

侍エンジニア塾を選んだ理由としては、圧倒的なコンサルタント力です。

実際に、僕も悩んだことがありますが、対応が早く、不安や心配にしっかり耳を傾けて、

解決へと導いてくれます。

講師だけでなく、周りのスタッフもサポートしてくれる点は大きいです。

「とりあえず話をしてみたいかも…」と思った方は、

無料体験レッスンを受けてみてはいかがでしょうか?