Bootstrap4の文字体裁（見出し）について

質問

現在、Bootstrap4で画面レイアウトをしています。
今まではBulmaを使っていたのですが、Bootstrap4では、classにもh1やh2などがあり、これらの使い方が検索してもよくわかりません。

Bulmaの場合は、is-size-1〜7に該当するのが、Bootstrap4のh1やh2なのですか？

それとも、やはりclass名であっても、h1やh2にマシンリーダブルな何か意味はあるのでしょうか？

以下のような記述だと、h2が抜けていることになるのでしょうか？
それとも、h4より先にh5が来てしまっていることになるのでしょうか？

宜しければ、ご教示ください。

該当のソースコード

html
1<h1 class="display-3">TOPICS</h1>
2<div class="container">
3<div class="row">
4<div class="col-6">
5<div class="h2">2018.10.20</div>
6</div>
7<div class="col-6">
8<h3 class=“h5”>2018.5.30</h3>
9<h4>The European languages are members of the same family. </h4>		
10</div>
11</div>	
12</div>
13

行動規範の内容に同意します

回答2件

Bulmaの場合は、is-size-1〜7に該当するのが、Bootstrap4のh1やh2なのですか？

「class="h1"」「class="h2"」等に該当します。※サイズは若干違います。

class名であっても、h1やh2にマシンリーダブルな何か意味はあるのでしょうか？

class名なので無いです。

h2が抜けていることになるのでしょうか？

なります。

h4より先にh5が来てしまっていることになるのでしょうか？

なりません。

投稿2018/10/20 05:33

yoshinavi

総合スコア3523

退会済みユーザー

2018/10/21 00:34

ご回答ありがとうございます！やはり、クラス名として使う場合は、それ自体の名前に機械的な意味はないのですね。今までもh×に直接スタイルを当てるのではなく装飾したいときは改めて別のクラス名をつけて、<h1 class="hogehoge">や<h2 class="hogehoge">のようにそちらで見た目を揃えていたので、Bootstrapでh×をわざわざクラス名にするのは他に何か意図があるのかと勘繰ってしまいました。そういう仕様だと理解して利用することにいたします。ありがとうございました！

行動規範の内容に同意します

.h5は<h5>が使えないけど見た目はh5に揃えたいって時に使うだけのclassですね。
h4より先にh5が来てしまっていることにはなりません。

投稿2018/10/19 11:11

recal

総合スコア1126

退会済みユーザー

2018/10/20 03:17

ご回答ありがとうございます！何となくそうかな～とは思いつつ、今までh×などのタグはSEOなどの観点からも意味のあるものと理解して使っていたので、それを見た目の体裁（もともとのh×にはデフォだと文字の大きさや太さしか指定されていないので）を揃えるためだけにクラスとして使うのに少々抵抗があったので、それで本当に使い方が正しいのか疑問に思った次第です。 `<h3 class="h5">` というのに違和感あったのですが、それがBootstrapの仕様なのであれば気にせず使うことにしてみます。ありがとうございました！！

行動規範の内容に同意します

あなたの回答