スマホでは、サイドに文字がぴったりくっついていると、その先に文字が存在するのではないかという疑念が出てきます。その疑念を排除するため、両サイドに少しスペースを開けるレイアウトが採用されます。
しかしながらあえて両サイドぴったりのレイアウトにしたいケースがあります。そのようなレイアウトを実現するためのクラスが「spFull」です。要素のclass属性に <div class="spFull"> のように指定します。
※実際の表示状態の下にコードを表示してます。
※このページの説明はスマホレイアウトで成立します。
▼ 単純に配置した場合
サンプルページ見出し
| 111 | aaa | あああ |
| 222 | bbb | いいい |
|
1 2 3 4 5 6 7 8 |
<h2>サンプルページ見出し</h2> <img src="https://www.clean-info.net/img/A-1header01.jpg"> <table class="border-100"> <tr><td>111</td><td>aaa</td><td>あああ</td></tr> <tr><td>222</td><td>bbb</td><td>いいい</td></tr> </table> |
▼ 【全幅表示その１】<div class="spFull">で囲んだ場合
サンプルページ見出し
| 111 | aaa | あああ |
| 222 | bbb | いいい |
|
1 2 3 4 5 6 7 8 9 10 |
<div class="spFull"><h2>サンプルページ見出し</h2></div> <div class="spFull"><img src="https://www.clean-info.net/img/A-1header01.jpg"></div> <div class="spFull"> <table class="border-100"> <tr><td>111</td><td>aaa</td><td>あああ</td></tr> <tr><td>222</td><td>bbb</td><td>いいい</td></tr> </table> </div> |
▼ 【全幅表示その２】要素に class="spFull" をつけた場合
サンプルページ見出し
| 111 | aaa | あああ |
| 222 | bbb | いいい |
|
1 2 3 4 5 6 7 8 |
<h2 class="spFull">サンプルページ見出し</h2> <img class="spFull" src="https://www.clean-info.net/img/A-1header01.jpg"> <table class="border-100 spFull"> <tr><td>111</td><td>aaa</td><td>あああ</td></tr> <tr><td>222</td><td>bbb</td><td>いいい</td></tr> </table> |
