読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

Flexbox = IE9 を捨てさえすればレイアウトが圧倒的に楽になる

Web Tips

はてなブログのテーマストアで公開しています「Hyperspace - テーマ ストア」(当サイトと同等)では、通常メインコンテンツの下に表示され、CSS でサイトブロックとして右側に持ってくる場合が多い BOX2 を左サイドに持ってきています。

省略形ですが、ソースはこんな感じで、スタイルを指定しなければ、表示は当然下のようになります*1

<div id="content">
  <div id="wrapper">
    メインコンテンツです
    ・
  </div>
  <div id="box2">
    ボックス2です
    ・
  </div>
</div>

f:id:ausnichts:20160610135231p:plain

で、これを横並びにするには、子要素のブロックをフロートさせるわけですが、float: left; すれば、いわゆる2カラムのブログらしい右サイドバーのレイアウトになりますし、float: right; させれば、左サイドバーになります。

#wrapper {
  background: red;
  float: left;
  width: 70%;
}
#box2 {
  background: green;
  float: left;
  width: 30%;
}

f:id:ausnichts:20160610142414p:plain

ただ問題は、これですと子要素の内容によって高さがまちまちになってしまいます。背景に何もスタイルを指定していなければいいのですが、上の例のように色を付けていると途中で色がなくなってしまいます。

もちろん、これを防ぐ方法もあるのですが、CSS3 には、CSS Flexible Box Layout - CSS | MDNという実に簡単な方法が用意されています。

親要素のブロックに次のスタイルを指定すれば、簡単に横並びになり、高さも揃います。ブロックを逆にしたい場合は、下の2行を追加します。flex-direction: row がデフォルト値ですので、指定しなければ左から順番に並び、row-reverse とすれば右から並びます。

#content {
  display: -webkit-flex;
  display: flex;
/*
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
*/
}

f:id:ausnichts:20160610143602p:plain

f:id:ausnichts:20160610144139p:plain

いや~簡単でいいですね。

ただ、ブラウザの対応状況が IE11以上(IE10はベンダープレフィックスで可能らしい)となっていますので、IE9 を捨てる決断が必要ということになります。

なお、「Hyperspace - テーマ ストア」や当サイトでは、完全には IE9 を捨てきれず、Flexbox は一部にしか使用せず、支障のない程度には表示されるよう対応しています。

f:id:ausnichts:20160610150016p:plain

Can I use... Support tables for HTML5, CSS3, etc

その他のプロパティなど詳しくは、下記サイトをご覧ください。

developer.mozilla.org

*1:#content に width 指定しています。