タグ「フレキシブルボックス」

フレキシブルボックス レイアウト 完全解説

「フレキシブルボックス レイアウト 完全解説」の続きを読む→

Firefoxとflex-flow

概要

おおよそ1年前、Firefoxのバージョンは20でした。その際、このブラウザーのフレキシブルボックスレイアウト(CSS Flexible Box Layout Module Level 1)の対応度を調べたところ、以下のような問題点がありました。

  • プロパティ値はdisplay:-moz-boxのまま
  • フレックスコンテナ/コンテンツにoverflow:hiddenを適用するとフレキシブルボックスが正しく表示されない
  • %単位のサイズ指定がフレックスアイテムに反映されない

その後、CSS Flexible Box Layout ModuleはLevel 1として最終草案(2014年3月25日付)まで策定が進み、一方、Firefoxもバージョン28.0となっています。この28では、上記の問題も解消されていました。 「Firefoxとflex-flow」の続きを読む→

フレキシブルボックスにおけるOperaの問題点

最近投稿したいくつかのページをOperaで表示したところ、フレキシブルボックスによるレイアウトが崩れていることに気付きました。

Operaの不正表示1
Opera 12でフレキシブルボックスレイアウトが崩れた状態

「フレキシブルボックスにおけるOperaの問題点」の続きを読む→

フレックス/フロート表示結果

はじめに

当サイトをフレキシブルボックスレイアウト化した後の、各ブラウザーでの表示結果を掲載します。

IE10、Opera、Chromeは、フレキシブルボックスが使われています。IE9、IE8、IE7、IE6およびFirefoxは、フロートが使われています。

「フレックス/フロート表示結果」の続きを読む→

フレキシブルボックスレイアウトの構成

はじめに

先に掲載した、「フレキシブルボックスレイアウトのおさらい」の続きです。「フレキシブルボックスレイアウト」化を果たした当サイトですが、そのレイアウト構成から分析してみましょう。

サイトの主要ページは、以下のようなレイアウトを基に構成されています。

ボックス構成図
krzm.jp主要ページのボックス構成

これらのうち、topnav内のナビゲーションボタンと、メインコンテンツに当たるarticles・footnote・sidebarの三段組部分で、フレキシブルボックスレイアウトを使用しています。

もちろん、フレキシブルボックスレイアウト非対応のブラウザー(主としてInternet Explorer 9以下)でもレイアウトを再現するため、従来のfloatプロパティも維持しなければなりません。ですから、前提として、floatによるレイアウト構成を考えます。

「フレキシブルボックスレイアウトの構成」の続きを読む→

フレキシブルボックスレイアウトのおさらい

はじめに

以前、当サイトの「フレキシブル ボックス レイアウト」化を断念した記事を書きましたが、Windows 8とともにInternet Explorer 10も使うことができるようになり、なおかつWindows 7向けのIE 10も公開された今日、そろそろ時節到来ということで、当サイトのフレキシブル ボックス レイアウト化を実現してみました。その詳細は今後の記事で説明するとして、まずはフレキシブル ボックス レイアウトのおさらいをしておきましょう。

「フレキシブルボックスレイアウトのおさらい」の続きを読む→

フレキシブルボックスのメロディ ― CSSの無知への傾向と対策

はじめに

「不良少年のメロディ ― 愛の鞭への傾向と対策」は、The Kinksのアルバム「The Kinks Present Schoolboys in Disgrace」の邦題です。高校時代への愛惜、詰め込み式教育への皮肉などを謳い、RCA在籍時の最後のロック・オペラとなった、(知る人は知っている類の)傑作です。

不良少年のメロディ ジャケット写真

ちなみに、上の画像をクリックしても、どこかのショッピングサイトに繋がることはないので、安心してください。反商業主義の当krzm.jpサイトは、いわゆるアフィリエイトという小遣い稼ぎは行っておりません。

それはそれとして、この記事では、Kinksのアルバム名とその精神にちなみ、ボックスレイアウトの傾向と対策を、当サイトのデザイン設計などに絡めて解説していきます。

「フレキシブルボックスのメロディ ― CSSの無知への傾向と対策」の続きを読む→

krzm.jp:not(so-called mobile friendly)