こんにちは やはです
ID・CLASS属性
お疲れ様でした
自分なりに理解はできましたか？
ブログのいいところは
繰り返し読み直せるところです
わかるまで何度も読み直して
自分なりに色々とコードを打ち込んでみましょう
実際にコードを打ち込んで
初めてわかる事もあります
実際に体験する事が
学習の１番の近道です
それでは今日もはじめていきましょう
- 文の構成
- ブロック要素って？
- ブロック要素の代表的なタグ
- 超汎用タグ「 div 」
今回はこの内容です
ここを理解しないと
この先出てくるデザインの配置等が
うまくいかなくなります
しっかり学んでしっかり理解していきましょう
- 文の構成
HTMLは文を書いて
それをタグで囲んで構成していってましたね
そして
そのタグによって囲んだ部分が
ブロック要素・インライン要素
という要素に分類されていきます
今回はそのブロック要素についての解説です
- ブロック要素って？
ブロック要素は先ほど記事に書いた通り
HTMLをタグで囲んださい
囲んでタグによって分類される要素の１部です
ブロックとはかたまりのものという意味で
それ１つをさして
１つのかたまり
という事になります
皆様が使ってきたタグ
<h >や<p>などは
ブロック要素という事になります
ここまではわかりますか？
とりあえず<h >と<p>は
ブロック要素だという事がわかりました
では、ブロック要素だとどうなるんでしょう？
HTMLの中でブロック要素ができると
縦に積み重なっていきます
画像を交えて解説していきましょう
<h1>と<p>を使ったコードを打ち込みました
この２つはどちらもブロック要素になります
ウェブで確認しましょう
この様に表示されますね
縦に積み重なっていくので
勝手に改行されている様ですね
この様に上下に並んでいく要素をブロック要素とよびます
文を構成していく時はほぼ、この縦のブロック要素を使っていきます
基本的にブロック要素の中に
ブロック要素を入れる事はできません
ですが、あくまで基本的になので
例外もあります
今回例で使った<h1>と<p>は
お互いに中に入れる事はできません
<h1>の中に<p>を入れたり
<p>の中に<h1>を入れる事はできない
という事になります
覚えておきましょう
- ブロック要素の代表的なタグ
ブロック要素についてある程度理解できました？
次はブロック要素で使う代表的なタグのお話しです
- h1~h6
これは前回お話しした通りです
使用頻度がとても高く、ブロック要素の代表的なタグです
覚えておきましょう
- p要素
これも前回の例で使いましたね
文章の構成はほぼ、これを使うと言ってもいいくらい
使用頻度が高い要素です
こちらも合わせて覚えておきましょう
その他に引用文だと示すblockquote要素
整形済みテキストである事を示すpre要素
などあります
しかし、私の感想で
ブログ記事を制作したりするわけでなければ
あんまり使用頻度が高くないものかと思っています
とりあえず上記２つはブロック要素で
ブロック要素は縦に積み重なっていくと覚えれば大丈夫です
次にお話しする「 div要素 」もブロック要素になりますが
ちょっと勝手が違う所と
スタイルを指定する際にとても重宝できるブロック要素なので
細かく説明していきます
- 超汎用タグ「 div要素 」
このブロック要素はかなり使用頻度が高い上に
使い勝手も抜群です
ぜひ覚えておいてください
こちらはブロック要素と言われていますが
タグとして何かをコードに付与するものではありません
囲んだ部分をブロック・グループするために
使われるタグとなっています
グループにして何になるの？って思いますね
画像を交えて解説していきましょう
まずはdiv要素をつける前に
先ほど作ったコードの背景に色をつけましょう
ウェブで確認してみましょう
この様になります
これはタグの背景に色をつけた為こうなります
間にある白色は
padding
margin
と呼ばれるものですが
この先出てくる内容ですので今は気にしないでください
お互いにブロック要素ですので
別々に背景色が指定されました
しかし、この内容が
文のタイトルとその説明だった場合
できれば１つにまとめたいですよね？
そういう時に「 div要素を使います 」
この様に<h1 >と<p>を囲みます
こうする事によりこの２つはグループ化されました
div要素は
ブロック要素もインライン要素も入れる事ができるブロック要素
になります
しかし、div要素はグループ・ブロック化させるだけで
文を変化させる事ができません
なので、スタイルで要素を指定する必要があります
div要素に背景色をつけてみました
ウェブでみてみましょう
こうなりました
おや？
margin・paddingの部分にのみ色がつきましたね
div要素とは隙間に色をつけるものなのでしょうか
いいえ、違います
<h1>と<p>の背景色を消してみましょう
そうすると
こうなりました
divでグループ化された為
グループ化された<h1>と<p>の背景に色がつきました
１括りになったという事ですね
この様にグループ化させる事で
その部分を一括に指定する事ができます
こうする事で今後のスタイルをつける際に
とても使い勝手が良くなります
覚えておきましょう
補足として
なぜ先ほどの画像になったかをお話しします
なぜこうなったかを１つずつ解説しますね
今回はdivの背景に青色を選択しました
しかし、グループ化されるからと言って
<h1>や<p>の要素がなくなるわけではありません
あくまでグループ化なので、この２つの要素は残っています
なので、<h1>や<p>の背景に色指定する事で
div要素の中に<h1>や<p>の背景色を指定したという事になります
div要素が一番下でその上に<h1>や<p>が
乗っていると思えば少しはわかりやすくなりますか？
divはあくまで新しいブロックを作ってグループにするだけなので
中に入れた要素を打ち消して取り込むわけではありません
覚えておきましょう
そして、margin・paddingの部分の色が変わった理由ですが
基本的にmargin・paddingは
デフォルト色でtransparentという色が指定されています
簡単にいうと透明です
margin・paddingはデフォルトが透明な為
divの背景色が写ったという事になります
ウェブで確認した時に白く見えるのは
色が指定されているわけではなく
ブラウザのデフォルト色が白色な為
そこが写っているわけです
難しいけど重要ですよ
覚えていきましょう
今日のまとめ
- 文はブロック要素とインライン要素で構成される
- ブロック要素は縦に積み重なっていく
- div要素はグループ・ブロック化させるもの
今回も少し難しめでしたね
私も説明がうまくできず大変でした
これからスタイルを指定する際に
ブロック要素でなければできないスタイル
インライン要素でなければできないスタイル
等、出てきます
ここを理解していないと
スタイルをつけても反映されないだけでなく
思ってもいないスタイルの表示のされ方にもなります
何度も反復練習を行なって頭に入れていきましょう
次回はもう１つの要素インライン要素について解説します
この２つを覚えれば文の構成はほぼマスターしたと言っても
いいと思います
難しい所ですが、がんばっていきましょう
それではお疲れ様でした
やはでした！！
よくわかるHTML5+CSS3の教科書【第3版】
Amazon（アマゾン）
3,080〜8,927円
私はこちらの参考書を使って勉強していきました。
テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが
一番のポイントかと思います。もし自分でもどんどん学習したいのであれば
数ある参考書の１つの目安として考えてもいいかもしれません。