flexboxでorderプロパティの使い方。

前提・実現したいこと

趣味ですが、Flexboxを使って簡単な構造のサイト構築をしています。
様々なことを調べていてorderというものを発見しました。
https://dekiru.net/article/13236/

これを使うと順番を入れ替えられるそうですが、HTMLを書くかえるのではダメなのですか？
個人的には書き換えるのよりCSSで指定するののほうが手間に見えて仕方ないです。
orderを使うことのメリットを教えてください。よろしくお願いします。

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

回答2件

メリットは質問者さんがデメリットと感じているHTMLを書き換えないで順序の変更が出来ることでしょう。
HTMLを書き換えるということは、出来上がっている文章を並び替えるということです。並び替えた後の文章構造は福笑い状態ですよね。HTMLを見た目のために書き換えるのはあまり良いことではありません。

レスポンシブでPCとスマホで順序の変更をしたいとき、orderを用いるのが最も簡単な方法だと思います。

また、デザイン上で視線を左右に振る（奇数行は画像右テキスト左・偶数行は画像左テキスト右）ような場合orderを用いることで簡単に実装できます。

html
1<section>
2  <img src="#" alt="">
3  <div class="body">
4    テキストは左
5  </div>
6</section>
7
8<section>
9  <img src="#" alt="">
10  <div class="body">
11    テキストは右
12  </div>
13</section>
14
15<section>
16  <img src="#" alt="">
17  <div class="body">
18    テキストは左
19  </div>
20</section>

css
1section {
2  display: flex;
3}
4img, .body {
5  width: 50%;
6}
7section:nth-of-type(odd) .body {
8  order: 1;
9}

例えば上記のコードでsectionが中間に追加になった場合、cssでclass="left"とかclass="right"とかで指定してしまうと、classを書き換える手間が発生します。またミスをする可能性も出てきます。

目先のことではなく先を見据えてどっちが手間か考えると、orderは便利で使い勝手のあるプロパティだと思います。

投稿2018/05/24 17:09

tsuka_rinorino

総合スコア229

ベストアンサー

HTMLを書くかえるのではダメなのですか？

HTMLを書き換えることに問題がないのであれば、HTMLを書き換えてしまっても構わないと思います。

個人的には書き換えるのよりCSSで指定するののほうが手間に見えて仕方ないです。

質問者さんは「HTMLを書き換えるよりも面倒だ」という理由でorderプロパティをあまり好ましく感じていないようですが、orderプロパティの強みはHTMLの文書構造を一切編集せずに、見かけ上の要素の整列順序を変更できることにあります。例えば、「HTMLを編集したとしても意味的には同じだが、HTMLを編集しないほうが文書構造をより明確に表現できる」というような場合に、orderプロパティを使い文書構造を変化させずにデザインだけを変えることができます。ただし、スクリーンリーダーで読み上げられる順番やタブキーでの移動など、見た目とは関係のない操作ではorderプロパティで付けられた順序が無視されます(例)。

投稿2018/05/24 14:42