初心者のスタイルシート(CSS)講座 divとspanの活用法

 スタイルシート(CSS)を上手く使いこなすためには、『div』と『span』を活用しなければいけません! その活用についての講座です。

 『div』と『span』について、語る前にブロック要素とインライン要素について知っておいた方がいいです。その講座についてのリンクを貼りました。まだ知らないなら、一度覗いてみてください!  ブロック要素とインライン要素

 大体、ブロック要素とインライン要素と似ているのですが、この初心者のスタイルシート講座で『div』と『span』の活用の仕方で理解を深めていただければいいなぁ〜と思います。では、講座開始!

『div』・・・・・・複数の要素などの広い範囲にスタイルシートを適用する
『span』・・・・・テキスト、文字などの狭い範囲にスタイルシートを適用する

 つまり『div』は見出しや段落、またはレイアウトの大まかな区切りとして利用されます!当サイトの初心者の講座で言えば、上のヘッダー部分とこの本文と右のサイド、そして下のフッター部分はすべて『div』を使っていますよ。このように広い範囲に、そしてその範囲には要素を含むことができます。  要素についてはこちらをクリック!→htmlタグの基本構造

 『span』は狭い範囲、文単位や単語単位での範囲にスタイルシート(CSS)を適用させる場合に使います。実際に『div』と『span』を比べてみましょう。全く同じスタイルシート(CSS)を適用してみます。まずは『div』から!

ブロック要素

インライン要素

 ブロック要素とインライン要素の違いでも言いましたが、ブロック要素はその適用範囲が広く、端から端までになります。対してインライン要素はその開始タグと終了タグで囲んだ範囲内のみの適用になります。

 ブロック要素とインライン要素の講座はコチラをクリックしてください>>ブロック要素とインライン要素 
htmlタグの要素に関してはコチラをクリック>> htmlタグの基本構造

 あなたが作るホームページ内で何度も同じスタイルシート(CSS)設定を使う場合はスタイルシート(CSS)の外部リンクにして、『class』を使うと作業効率が上がりますよ。  スタイルシート(CSS)外部リンクについて