こんにちは やはです
前回の記事は理解できましたか？
文を構成する上でとても大切な内容なので
繰り返し記事を読んで自分の知識に入れていきましょう
さらには
今回の記事は前回の記事を
理解しているかどうかで
理解できる量が変わります
前回の記事が理解できていないと
今回の記事を読んでも頭に入らないと思います
なので、今回の記事を読んで理解できない時は
戻って文章を読んでみましょう
人と比べるとペースが乱れてしまいますので
自分のペースでゆっくり勉強していってください
それでは始めていきましょう
- インライン要素って？
- インライン要素の代表的なタグ
- ブロック要素との使い分け
今回はこの内容です
ブロック要素との違いをしっかり理解していきましょう
- インライン要素って？
前回のブロック要素は縦に積み重なるとお話ししました
対してインライン要素は
横に並んでいく要素となっています
ブロック要素をつけた場合
文は改行されていきます
<h1>や<p>を使えばわかると思います
インライン要素はタグを使用したからと言って
文が改行されていきません
なので
インライン要素は文の中に入れるタグ
と覚えてもらえるといいと思います
皆様はインライン要素のタグを
まだ使っていません
次の目次から一緒に学んでいきましょう
- インライン要素の代表的なタグ
インライン要素も複数あります
今回はその中でもよく使っている物を
抜擢して解説します
- br要素
これはとてもよく使います
これは文章に段落をつけるタグになります
もちろん<p>を使えば改行できます
margin・paddingという物がどうしてもついてきます
この二つは簡単にいうと余白です
画像で見てみましょう
コードを打ち込んでみました
これをウェブで確認してみましょう
こう表示されました
余白があるのでちょっと文字間が広く見えますね
これだと別々の文章という印象を受けます
その際に使うのがbr要素となります
こちらは開始タグのみで使えるタグで
前回の記事でお話ししたいわゆる空要素
というタグになります
使い方をみていきましょう
先ほどの文を少し変更します
文をまとめました
一文になりました
これにbr要素をつけて改行しましょう
この様に使います
わかりやすくbr要素の後に段落をつけましたが
つけなくても問題はありません
自分の使いやすいやり方で使用しましょう
それではウェブで確認します
こうなりました
先ほどと比べてどうでしょう？
文字間が狭まり
文章がわかりやすくなりましたね
文が長くなってしまった際に
br要素を使って改行をしていく事で
とても読みやすいホームページに変えていく事ができます
積極的に使っていきましょう
- sup要素
これもよく使います
こちらは文章を小さくして、上部につけるタグです
イメージがわかないと思うのでコードを使いましょう
打ち込んでみました
ウェブで確認しましょう
こう表示されました、わかりますか？
よくケータイ料金の説明部分や
お問い合わせの必須項目のマークとして
使われていますね
文字を小さくして上部につけていきます
注意マークや項目として使う場面がよく出てきますね
これはお問い合わせフォームを作成する際に
とても使います
覚えておきましょう
また下側につけるタグでsub要素もあります
対義語みたいな物ですが
こちらはあまり使う場面がないので
そういうタグがあると覚えておくだけでいいでしょう
- small要素
次はこちらです
こちらはタグで囲んだ文字を小さくする要素です
しかしフォントサイズはスタイルで指定できますよね？
では、何のためにあるのでしょうか
ホームページの下の部分をみてみると
Copyright ~~~~~
みたいな文字が書いてあるサイトがあります
これは著作権を表す文字になります
これが書いてあるという事は
このサイトには著作権がありますよ
と、いう意味になりますね
その際にこのsmall要素を使います
現在のHTMLの意味ではこちらのsmall要素を使う事で
著作権表記があると判断されるタグになるんです
なので
最後の著作権表記を表記する際に使う要素と覚えておいてください
使用頻度はとても高い要素ですが
ここでしか使わないコードです
単純で覚えやすいかと思いますね
- span要素
こちらは使用頻度が高い要素です
div要素のインライン版
と思ってくれるといいかと思います
この要素自体には何も効果はありません
しかし
こちらで囲むことにより
その部分をspan要素としてグループを作る事ができます
使用例をみてみましょう
先ほどの改行を入れた文に
span要素を入れてみました
こうすることにより
<p>の中にspan要素を持った文が構成されます
では何ができるのでしょう？
何でもできます
今回は文字カラーを変えてみます
ウェブで確認しましょう
部分的にカラーをつける事ができました
この様にその部分を指定して
スタイルを適用させる時に重宝されます
応用するとこういうやり方も可能です
span要素を２つつけて
class名redをつけました
class属性にスタイルを指定しました
こう表示されました
この様に
複数のspan要素にCLASS属性をつけて
スタイルを指定する事で
一括でスタイルを適用させる事ができます
このタグのいい部分は
div要素と同様
これ自体には何の意味もない要素です
なので
要素を使用したところで文に影響は与えません
なので使い勝手がいい要素なんです
とても便利なので覚えておきましょう
※div要素は余白ができるので使いすぎは注意！
ブロック要素との使い分け
インライン要素とブロック要素に関しては
ある程度知識がついたのではないかと思います
インライン要素は基本的に
ブロック要素の中に使われる要素です
逆をいうと
ブロック要素はインライン要素の中に入れる事はできません
これはしっかり覚えておきましょう
あくまで、ブロック要素の中に入る
要素の１つ
親要素と子要素ですね
これを頭に入れておきましょう
今日のまとめ
- インライン要素は横につける要素
- インライン要素はブロック要素の中に入れる
- インライン要素の中にブロック要素は入れれない
前回と合わせて
ブロック要素・インライン要素を勉強しました
少し難しい部分でしたね、どうでしたか？
頭で考えると難しい部分ではありますが
慣れてくるとブロック要素とインライン要素の使い分けが
自然とできる様になります
自然とできるくらい
しっかりと勉強して
実践に生かしていきましょう
勉強は自分のペースで
こちらが大事です
それではお疲れ様でした
やはでした！！
よくわかるHTML5+CSS3の教科書【第3版】
Amazon（アマゾン）
3,080〜8,927円
私はこちらの参考書を使って勉強していきました。
テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが
一番のポイントかと思います。もし自分でもどんどん学習したいのであれば
数ある参考書の１つの目安として考えてもいいかもしれません。