Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

【18-4】Flexboxの orderプロパティで表示順を自由に変えよう

今回は orderプロパティを使ってみます。
コレは、これまでの Flexbox用のプロパティとは ちょっと毛色が違うので別記事にしました。
これは Flexアイテムの表示の順番を入れ替えるだけのプロパティです。

本日のINDEX
  1. 表示順を自由に変えられる orderプロパティ
    1. order は見た目の順番を変えるだけ
    2. Flexアイテムの order を全部書き出して入れ替える
    3. マイナスの値は 先頭よりも前に出る

Flexbox に関しては、記事を分けています。

【18-1】Flexbox を使おう!(display:flexでFlexboxを作る)
display: flex で「Flexコンテナ」を作ります。
flex-basis、flex-grow、flex-shrink、justify-contentプロパティを使ってみます。
【18-2】Flexbox内のボックスの配置方法を指定しよう
flex-wrap、flex-directionプロパティを使います。
【18-3】Flexbox内の縦(垂直)方向を揃えよう
align-items、align-self、align-contentプロパティを使います。
【18-4】Flexboxの orderプロパティで表示順を自由に変えよう ←今日はココ
orderプロパティを使います。
【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ
Flexboxの各ブラウザの対応やベンダープレフィックスについて。

参考資料:W3C CSS Flexible Box Layout Module Level 1

表示順を自由に変えられる orderプロパティ

orderプロパティは、Flexアイテムの表示の順番を変えることができます。

orderプロパティによって Flexアイテムの表示順がカウントされます。
デフォルトでは「0」から始まって1、2、3 とカウントされ、その順に表示されています。
このカウントの数値をorderプロパティで入れ替えることで、表示順が変わります。
マイナスの値も使えるので、ある Flexアイテムにマイナスのカウントを付ければ、先頭のアイテムよりも前に来ます。

order の値
整数 順番のカウントを整数で。デフォルトは0。マイナスの値も使えます
値の継承 なし 適用できる要素 Flexアイテム な要素。
Flexコンテナに対して絶対位置指定された子要素

order は見た目の順番を変えるだけ

order は、あくまでも表示上の(見た目の)順番を変えるだけで、HTML文書上の順序を書き換えたりしません

じゃあコレ、いったいどんなときに使うの?と思ったら、
W3Cの勧告候補ページに使用例が載っていました。

タブを使ったレイアウトで、アクティブなタブが「order: -1」でいつも先頭になるという仕掛けです。
WordPressなどで動的にHTMLが生成される場合なら簡単に使えそう。
これなら見た目だけの表示順を変えてもHTML文書的に問題は無く使えますね。

Flexアイテムの order を全部書き出して入れ替える

さっそくサンプルです。これは Flexアイテムを全部書きだして order を入れ替えています。

div#container {
	display:flex;
    flex-wrap:wrap;
	justify-content: space-between}
div#container section {flex:100px}
/*↓アイテムを全部書き出して、1番目と5番目のorderのみ入れ替えています*/
div#container section:nth-child(1) {order:5}
div#container section:nth-child(2) {order:2}
div#container section:nth-child(3) {order:3}
div#container section:nth-child(4) {order:4}
div#container section:nth-child(5) {order:1}
div#container section:nth-child(6) {order:6}

このように、1番目と5番目のアイテムの順序が変わります。
(↓クリックでサンプルファイルが開きます)

マイナスの値は 先頭よりも前に出る

Flexアイテムは、左から右(縦に並んでいる場合は上から下)へカウントされます。
先頭は「0」から始まるのが通常。なので order の値をマイナスにすれば、先頭よりも前に出ることになります。

マイナスの値を使ったサンプルソースです。

div#container2 section:nth-child(6) {order:-2}
div#container2 section:nth-child(5) {order:-1}

これでこのように、6番目のアイテムが先頭に、5番目がその次になります。
(↓クリックでサンプルファイルが開きます。先ほどと同じサンプルファイルです)

次回予告

Flexbox で使用するプロパティはこれで全部。今回で終わりです。
ただしこれらは、今のFlexboxの仕様(の勧告候補)です。
Flexboxには今まで何度か仕様が変わってきた歴史があるので「ブラウザのバージョンによって仕様が違う」というややこしい事態もあるんですって。
これについて次回は触れておきたいと思います。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

関連記事

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2016/12 | 01
- - - - 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
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.