スペースの空いた要素と長さの違う要素を合わせる。
こんにちは、ゼノフィ渡部です。
スマートフォン表示で、スペースの空いた要素と長さの違う要素を、縦の位置に対して合わせる方法をご紹介いたします。
画面いっぱいに表示する、5つのリストからなるナビゲーションリンクを例にしてCSSからご紹介いたします。
1行目の「ul.navi li」クラスでリストの基本プロパティを指定しています。
2行目の「display: inline-block;」でリストを横並びにし、3行目の「width: 50%;」で幅を50%、9行目の「padding: 0 10px 10px 0;」で右と下に対して10pxのパディングをとります。ここでマージンではなく、パディングを採用する理由は4行目の「box-sizing: border-box;」にあります。
「box-sizing: border-box;」を指定するとパディングとボーダーを幅と高さに含めることができるので、右パディングの10pxも横幅の50%内に含めることができます。結果、カラム落ちを防いでいます。
通常は幅に右10px分のパディングが加わり、カラム落ちが発生してしまいます。
1 2 3 4 5 6 7 8 9 10 | ul.navi li { display: inline-block; width: 50%; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0 10px 10px 0; } |
1行目の「ul.navi li:nth-child(even)」で偶数番目のリストに対して右パディングを0にしています。
5行目の「ul.navi li:last-child」で最後のリストに対して幅を100%、右パディングを0にしています。
右パディングを0にしない場合、10px分、偶数番目と最後のリストが内側(左側)に寄ってしまいます。
1 2 3 4 5 6 7 8 | ul.navi li:nth-child(even) { padding-right: 0; } ul.navi li:last-child { width: 100%; padding-right: 0; } |
1行目の「ul.navi li a 」ではa要素に対しての基本プロパティを指定しています。
2行目の「 display: block;」、3行目の「width: 100%;」、４行目の「padding: 10px;」で表示範囲を広げています。
7行目の「box-sizing: border-box;」でリンク要素をリスト要素と同じ表示範囲にしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ul.navi li a { display: block; width: 100%; padding: 10px; color: #FFF; background: #1E547B; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } |
次にHTMLをご説明いたします。
通常のHTMLの記述方法では、「display: inline-block;」や「box-sizing: border-box;」だけでは要素を横並びで画面いっぱいに表示させることはできません。
理由としては「HTMLはソース中での改行が半角スペースとして表示される」からです。
プログラムを使用し、改行時の半角スペースを除去する方法もありますが、HTMLのみで完結させる場合、以下のような方法があります。
一つ目は「</li>」から「<li>」の間にコメントアウトを記述し、改行を除去する方法。
二つ目は「<li>」から「</li>」を1行で記述する方法、等があります。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 「</li>」から「<li>」の間にコメントアウトを記述。 <ul class="navi"> <li><a href="#">ナビ1</a></li><!-- --><li><a href="#">ナビ2</a></li><!-- --><li><a href="#">ナビ3</a></li><!-- --><li><a href="#">ナビ4</a></li><!-- --><li><a href="#">ナビ5</a></li> </ul> 「<li>」から「</li>」を1行で記述。 <ul class="navi"> <li><a href="#">ナビ1</a></li><li><a href="#">ナビ2</a></li><li><a href="#">ナビ3</a></li><li><a href="#">ナビ4</a></li><li><a href="#">ナビ5</a></li> </ul> |
サンプルを見ると、「リストにコメントアウトを記述し、改行を除去する方法」、「リストを1行で記述する方法」のどちらも画面いっぱいで、スペースの空いた要素と長さの違う要素が縦の位置で揃っている表示が確認できると思います。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | body { font-size: 20px; text-size-adjust: none; -o-text-size-adjust: none; -ms-text-size-adjust: none; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; } ul { margin: 0; padding: 0; list-style: none; } ul.navi li { display: inline-block; width: 50%; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0 10px 10px 0; } ul.navi li:nth-child(even) { padding-right: 0; } ul.navi li:last-child { width: 100%; padding-right: 0; } ul.navi li a { display: block; width: 100%; padding: 10px; color: #FFF; background: #1E547B; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <p> 「</li>」から「<li>」の間にコメントアウトを記述。 </p> <ul class="navi"> <li><a href="#">ナビ1</a></li><!-- --><li><a href="#">ナビ2</a></li><!-- --><li><a href="#">ナビ3</a></li><!-- --><li><a href="#">ナビ4</a></li><!-- --><li><a href="#">ナビ5</a></li> </ul> <p> 「<li>」から「</li>」を1行で記述。 </p> <ul class="navi"> <li><a href="#">ナビ1</a></li><li><a href="#">ナビ2</a></li><li><a href="#">ナビ3</a></li><li><a href="#">ナビ4</a></li><li><a href="#">ナビ5</a></li> </ul> |
