IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2016/06/10 WebTips

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

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

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

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

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

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

もちろん、これを防ぐ方法もあるのですが、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;
*/
}

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

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

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

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

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

developer.mozilla.org

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

はてなブログテーマ Hyperspace を公開しました。
はてなブログのグローバルヘッダー=PC のヘッダーをモバイル用に変更する
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com