カテゴリー「CSS」

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

基本概念

フレキシブルボックス レイアウトは、W3Cの仕様書「CSS Flexible Box Layout Module Level 1, W3C Candidate Recommendation, 1 March 2016」によって定義されている。従来、floatプロパティ等によって裏技的に行われてきた、段落ボックスを横並びにするといった配置を行うためのスタイルである。その名称どおり、単なる横並びだけでなく、より柔軟に配置を行う手段が用意されている。

仕様書では、以下のとおり、その概要が述べられている。

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. The contents of a flex container:

  • can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
  • can have their display order ‘reversed’ or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
  • can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
  • can “flex” their sizes to respond to the available space
  • can be aligned with respect to their container or each other on the secondary (cross)
  • can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

構造

フレキシブルボックス レイアウトの構造は、以下の図のごとく定義されている。

図1a

フレキシブルボックス レイアウトを実現する領域を表す要素をフレックス コンテナ、その領域内で実際に配置される要素をフレックス アイテムと呼ぶ。

フレックス アイテム(以下、アイテム)が配置される方向を軸(axis)と呼び、当該言語の文字と行の送りに応じて、文字送りが主軸(main axis)、行送りが交差軸(cross axis)と定義される。日本語横組みのテキスト、すなわち文字が左から右へ、行が上から下へ送られる場合、水平方向が主軸、垂直方向が交差軸となる。一方、日本語縦組みテキストでは主軸が垂直方向、交差軸が水平方向となる。

これらの軸の方向を表すものとして、始点と終点が定義される。日本語横組みテキストの場合、左端が主始点(main start)、右端が主終点(main end)、上端が交差始点(cross start)、下端が交差終点(cross end)である。startとendという概念は、関連プロパティの値に反映されている。

また、主軸方向の”幅”を主サイズ(main size)、交差軸方向の”高さ”を交差サイズ(cross size)と呼ぶ。すなわち、フレックス コンテナ(以下、コンテナ)の幅と高さということである。当然、縦組みテキストにおいては、主サイズが高さ、交差サイズが幅となるのは、自明の理であろう。

コンテナの定義

任意の要素をコンテナとして定義するには、displayプロパティを使用する。この値をflexもしくはinline-flexにすることで、当該要素はコンテナとなる。

  • 例1 display: flex;
  • 例2 display: inline-flex;

displayプロパティそのものは、CSS Level 2以前の太古の昔から存在するが、その値がCSS Flexible Box Layout Module Level 1モジュールにおいて拡張されたことになる。

コンテナとなる要素の態様に目を向けてみるならば、値がflexの場合、当該要素はブロックレベル表示で扱われる。故に、display: blockの場合と同じように、元来インライン表示のa要素に適用し、コンテナ要素自体に幅や高さを指定することが可能になる。

同様に、値がinline-flexの場合はdisplay: inline-blockと同等であり、幅や高さが指定できる段落内文字列としてコンテナ要素が扱われる。

そのうえで、コンテナ要素の直接の子要素に対し、フレキシブルボックスによる配置が適用されるようになる。なお、コンテナの要素内容がテキストだった場合でも、その文字列全体をひとつのアイテムとして、配置が適用される。

ただし、アイテムが要素ではなく文字列のみの場合は、アイテム側専用のプロパティを、要素内容(文字列)に対して使用することはできない。

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

CSS3各モジュールの現況(2015年8月)

CSS3モジュール一覧表

またしても半年以上、更新を怠っていた「CSS3モジュール一覧」ですが、今年は9月にCSS3の講義を行うことになったので、夏休み中に仕様の現況をチェックしてみました。すると、新しいモジュールや分類項目が結構増えていたので、一覧表を作り直すことにしました。

それに伴い、表の「状況」欄には、前バージョンの仕様書と比較した状態を記してあります。初出のものが「新規」、策定レベルが同じで更新されたものが「改訂」、策定レベルが変更されたものが「昇格」もしくは「降格」です。また、作業草案段階の「Level 1」と「Level 4」は、いわゆる「Level 3」とは分けてあります。

「CSS3各モジュールの現況(2015年8月)」の続きを読む→

CSSモジュール一覧更新(2014年11月)

前回の2014年3月20日以来、ずっと確認を怠ってきたのですが、例年のCSS3講義が近づいてきたので、8か月ぶりにCSSモジュールの更新状況をチェックしてみました。さすがに、半年以上も経過すると多くの変更点が存在するため、以下の表にまとめてみました。また、「CSS3モジュール一覧」ページの表も、更新してあります。

「CSSモジュール一覧更新(2014年11月)」の続きを読む→

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」の続きを読む→

メディアクエリーでTransitionを実行する

いわゆる「レスポンシブデザイン」

最近では、犬も杓子も、いわゆる「レスポンシブデザイン」もしくは「マルチデバイスデザイン」なるものに憑りつかれているようです。ようは、スマートフォンやタブレットといった機器の普及により、同一ソースのHTMLをパソコン以外の機器でも表示できるようになったので、それらに如何に対応するべきかというところから、話が始まったわけです。そして、CSSでの解答のひとつが、「メディアクエリー」という技術・技法です。

当サイトのデザインも、このメディアクエリーを使って、現在では以下のとおりに表示内容の幅を設定しています。

表示画面が幅1024ピクセル以下
770ピクセル
XGA以下のディスプレイを想定
表示画面が幅1025~1664ピクセル
970ピクセル
SXGA~WXGA+程度のディスプレイを想定
表示画面が幅1665ピクセル以上
1600ピクセル
WSXGA+以上のディスプレイを想定

一般的には、スマートフォンを前提に、最小の表示画面を320~480ピクセルあたりに想定することが多いようですが、私はスマートフォンや携帯電話は持たない主義なので、500ピクセル以下の画面は想像にも上りません。また、実際のところ2014年現在では、スマートフォン等の5インチ程度のディスプレイですら、フルHDの解像度(1920×1080ピクセル)を持つに至っているので、小型携帯機器用に小さい画面解像度を想定するという前提が、最早崩れています。そうしたことも理解せず、やれレスポンシブだ、マルチデバイスだとはしゃいでる姿は滑稽としか言いようがありません。

故に私は、いわゆる「レスポンシブ」という恥ずかしい言葉を使いたくはありません。CSSの技術としては、メディアクエリーという呼び名が、元からあるのですから。その使用方法を試す目的と、近年ワイド型として横へ広がっていくディスプレイと表示内容との隙間を埋めるため、以前から当サイトにもメディアクエリーを使用していたのですが、私はそれを「(メディアクエリーを利用した表示機器に対する)動的可変レイアウト」と呼んでいます。略称はDVLbMQfVDです。 「メディアクエリーでTransitionを実行する」の続きを読む→

トップページのCSS3効果②

はじめに

この記事では、トップページのナビゲーションボタンに使用している、CSS3の効果について、解説します。

他の記事でも触れましたが、ナビゲーションボタンはWordPressのカスタムメニュー機能で出力されたもので、HTMLの構造は、ul要素、li要素、a要素によるリンクリストです。


<div id="headers">
	中略
	<nav id="top_topnav">
		<h2 class="hide">サイトナビゲーション</h2>
		<ul id="menu-sitenav_top" class="menu">
			<li id="menu-item-741" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-741"><a href="https://www.krzm.jp/category/news/">news</a></li>
			<li id="menu-item-744" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-744"><a href="https://www.krzm.jp/category/corel/coreldraw/">draw</a></li>
			<li id="menu-item-745" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-745"><a href="https://www.krzm.jp/category/corel/photopaint/">photo-paint</a></li>
			<li id="menu-item-746" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-746"><a href="https://www.krzm.jp/category/gallery/">gallery</a></li>
			<li id="menu-item-742" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-742"><a href="https://www.krzm.jp/category/web/">web</a></li>
			<li id="menu-item-743" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-743"><a href="https://www.krzm.jp/category/another/">another</a></li>
			<li id="menu-item-738" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-738"><a href="https://www.krzm.jp/blog/">blog</a></li>
		</ul>
	</nav>
</div>

「トップページのCSS3効果②」の続きを読む→

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

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

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

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

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