今回はHTMLのソースの記述順とは異なる見た目の並び順にする方法をご紹介いたします。
「float」、「position」使う方法
サイドバーを左、メインを右の表示にする(2カラム)
html
<div class="main">
メイン
</div>
<div class="sidebar">
サイドバー
</div>
htmlのソースはメイン、サイドバーの順番となっています。
ソース上ではメイン、サイドバーという順番ですが、サンプルを見ると、実際の表示ではサイドバー、メインという逆の順番になっています。
css
.main {
float: right;
width: 70%;
height: 300px;
background: #E3F0FB;
}
.sidebar {
float: left;
width: 30%;
height: 300px;
background: #CCC;
}
メインに「float: right;」、サイドバーに「float: left;」を指定して、並び順を逆にしています。
- html：メイン、サイドバーの順。
- 表示：サイドバー、メインの順。
サイドバーを左右、メインを中央の表示にする(3カラム)
html
<div class="box-left">
<div class="box-mid">
<div class="main">
メイン
</div>
<div class="sidebar01">
サイドバー01
</div>
<div class="sidebar02">
サイドバー02
</div>
</div>
</div>
htmlのソースはメイン、サイドバー01、サイドバー02の順番となっています。
ソース上ではメイン、サイドバー01、サイドバー02、という順番ですが、サンプルを見ると、実際の表示ではサイドバー01、メイン、サイドバー02という順番になっています。
css
.box-left {
position: relative;
right: 25%;
}
.box-mid {
position: relative;
right: 50%;
}
.main {
position: relative;
left: 98%;
float: left;
width: 54%;
height: 300px;
background: #E3F0FB;
}
.sidebar01 {
position: relative;
left: 21%;
float: left;
width: 23%;
height: 300px;
background: #CCC;
}
.sidebar02 {
position: relative;
left: 75%;
float: left;
width: 23%;
height: 300px;
background: #CCC;
}
「.box-left」と「.box-mid」で全体の位置を調整しています。「.main」、「.sidebar01」、「.sidebar02」に「position: relative;」を指定し、「left」プロパティの各値で、メインとサイドバーの並び順を変更しています。
- html：メイン、サイドバー01、サイドバー02の順。
- 表示：サイドバー01、メイン、サイドバー02の順。
CSS3の「Flexbox」を使う方法
サイドバーを左、メインを右の表示にする(2カラム)
html
<div class="container">
<div class="main">
メイン
</div>
<div class="sidebar">
サイドバー
</div>
</div>
htmlのソースはメイン、サイドバーの順番となっています。
ソース上ではメイン、サイドバーという順番ですが、サンプルを見ると、実際の表示ではサイドバー、メインという逆の順番になっています。
css
.container {
display: flex;
}
.main {
order: 2;
width: 70%;
height: 300px;
background: #E3F0FB;
}
.sidebar {
order: 1;
width: 30%;
height: 300px;
background: #CCC;
}
メインとサイドバーの親要素である「.container」に「display: flex;」を指定します。メインとサイドバーには「order」プロパティを指定し、先に表示する要素に対して若い数字を指定します。
「.main」に「order: 2;」、「.sidebar」に「order: 1;」とすることで、サイドバー、メイン、といったように並び順を変更することができます。「order」プロパティの値は、数字が若い順に要素を表示します。
また、「display: flex;」によって「float」が必要なくなります。
- html：メイン、サイドバーの順。
- 表示：サイドバー、メインの順。
サイドバーを左右、メインを中央の表示にする(3カラム)
html
<div class="container">
<div class="main">
メイン
</div>
<div class="sidebar01">
サイドバー01
</div>
<div class="sidebar02">
サイドバー02
</div>
</div>
htmlのソースはメイン、サイドバー01、サイドバー02の順番となっています。
ソース上ではメイン、サイドバー01、サイドバー02という順番ですが、サンプルを見ると、実際の表示ではサイドバー01、メイン、サイドバー02という順番になっています。
css
.container {
display: flex;
}
.main {
order: 2;
width: 54%;
height: 300px;
background: #E3F0FB;
}
.sidebar01 {
order: 1;
width: 23%;
height: 300px;
background: #CCC;
}
.sidebar02 {
order: 3;
width: 23%;
height: 300px;
background: #CCC;
}
メインとサイドバーの親要素である「.container」に「display: flex;」を指定します。メインとサイドバー01、02には「order」プロパティを指定し、先に表示する要素に対して若い数字を指定します。
「.main」に「order: 2;」、「.sidebar01」に「order: 1;」、「.sidebar02」に「order: 3;」とすることで、サイドバー01、メイン、サイドバー02、といったように並び順を変更することができます。「order」プロパティの値は、数字が若い順に要素を表示します。
また、「display: flex;」によって「float」が必要なくなります。
- html：メイン、サイドバー01、サイドバー02の順。
- 表示：サイドバー01、メイン、サイドバー02の順。
まとめ
- 「float」、「position」でソースとは異なる並び順にできる。
- 「display: flex;」の「order」で、より簡単に異なる並び順にできる。
いかがでしょうか。リキッドレイウトでご紹介したので、「float」と「position」の方はCSSが少し複雑になってしまいました。固定であればもっとシンプルになります。
「Flexbox」の方は「display: flex;」と「order」によって従来では考えられないほど、横並びや表示順の変更が楽になりました。
「Flexbox」の詳しいブラウザのサポート状況は、「Can I use… Support tables for HTML5, CSS3, etc」から確認できます。「Flexbox」が使える状況であれば、利用を検討してもいいと思います。
「Flexbox」は横並びや表示順を変えるには、持ってこいの方法ですよね。
コメント