説明の前に。ブロックレベル要素とインライン要素について
なんだか意味不明な文字ですが、HTMLではとても重要な概念です。タグの種類は大きく分けてこのブロックレベル要素とインライン要素に分けられます。
ブロックレベル要素とは、そのタグの終了時に改行されるものを指します。見出しのh1〜h6やpタグ、div やtableなどその数は多いです。すべて終了時に自動で改行されますよね。
それに対してインライン要素は終了時に改行されません。代表的なものでは a や img タグがあります。たとえば
上のように二つ続けて書いた場合、右側につながっていきます。
※例
ヤフー ヤフー2
これがインライン要素の特徴です。これに対してブロックレベル要素を続けて書いた場合、改行されます。
このように書くと
ヤフー ヤフー2
となります。これがブロックレベル要素の特徴です。この違いを理解できればあとは楽勝です＾＾
■特定の範囲の指定（クラスの概念）
class属性 と id属性 （名前は難しいけど、別に難しくありませんよ^_^;）
たとえば、同じ p タグでも、こっちは黒で、こっちは赤にしたいというときは、名札を付ける（好きな名前をつけれます）という意味の、このclass属性 か id 属性を使います。この二つ、意味は同じですが、id はページ中に同じ名前を２回使えません。class は何回でも使えます。使い方は
上の二つは同じ意味です。実際に色を変えるには、スタイルシートで指定します。
class の場合は、class名の前にドット（.）を入れます。
id の場合は、id名の前に#（シャープ）を入れます。
上の二つも同じ意味です。ややこしいのでclass だけ使っていればいいと思いますよ＾＾；
これで、クラスをつけた方は
文字の色が変わります。もちろん、p タグのほかにもいろいろなタグに対して使えますよ。
また、もっと広い範囲を指定したい場合は div タグを使います。
こうすれば、広い範囲を指定できます。
また、classの中のh1だけの色を変えたい場合は、class名のあとに、半角スペースを入れます。
また、divはブロックレベル要素でもpタグや見出しのように上下に余白ができません。なので、余計な余白を作りたくないときにはこのdivが威力を発揮します。pタグの変わりにdivを使うのもありです。
通常このように記述すると、上下に余白ができます。
※表示 余白を作りたくありませ〜ん
余白を作りたくありませ〜ん2
これをdivに変えると、
と記述すると、
※表示例 余白を作りたくありませ〜ん
余白を作りたくありませ〜ん2
このように、余白が発生しません。これは結構便利。img などを囲むのにも使えます。
このように、これを使いこなせれば、かなり便利です。というか慣れた人には必需品のタグです。
|
