カテゴリー「Web」

CSS グリッドレイアウト

はじめに

いわゆるCSS3のグリッド レイアウト(CSS Grid Layout Module Level 1)に、Firefox 52が対応しました。Internet Explorer 11とMicrosoft Edgeはベンダー接頭辞付きの旧仕様で対応済みなので、これらのブラウザーでグリッドレイアウトが利用できます。また、仕様も2017年2月9日付で、W3C勧告候補まで昇格していました。

このスタイルシートは、IE10の頃には使えるようになっていたのですが、その他のブラウザーが今日まで対応せず、利用機会が限定されていました。インターネットで「グリッド レイアウト」を検索しても、デザイン技法としての「グリッド レイアウト」を無理やりWebページ上で実現させるような話題ばかりで、「CSS グリッド レイアウト」を解説したものは皆無に近いといえる状態でした。しかし、とりあえず3種類のブラウザーが対応するようになったことで、このスタイルの可能性も広がるかもしれません。

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

HTML5の技術的考察

はじめに

2014年10月末、HTMLの最新版である「HTML5」が、遂にというか、やっとというか、正式な仕様として確定されました。HTML5に対しては、4年ぐらい前から関心を持ち、その技術を試してみる目的で、2010年10月に「音の無いアルバム」というWebサイトを制作しました。また、その制作過程で得た知識を基に、同サイトに「HTML5の技術・政治的考察」という記事も掲載しました。それから4年経ち、HTML5の仕様も部分的に改訂されながら策定が進んだため、以前の記事に加筆・修正し、2014年版として作り直してみました。それが、本記事です。

HTML5がやっと日の目を見るに至ったとはいえ、2010年と比べ現在は、せっかく政治の表舞台から掃き捨てられたと思っていた安倍晋三が首相に返り咲き、また中国・韓国を念頭に民族主義や排外主義を振りかざす連中が厚顔無恥にも闊歩する、見るも無残な時代状況に陥っていますが、当然、本記事の読者としては、そういった輩を想定してはいません。いかなる科学技術も、政治に対して中立であることはなく、何らかの形で政治を媒介するものである以上、主要にはWeb技術を扱っている本記事も、何らかの政治的傾向の下にあることは間違いありません。なんて、回りくどいことを言わずとも、本記事は左翼が書いたのだから、もしも保守や右翼が(ついでにスターリニストも)本記事を利用するなんてことがあるとしたら、そうした連中の価値観からしても、恥知らずの誹りを免れないでしょう。というわけで、民族だの国益だののくだらなさ、そして金儲けの卑劣さや恥ずかしさ(←記事本文の中では、ここにだけstrong要素を使っています)を知っている、そんな心の美しい方々に向けて、本記事は幅広く技術的門戸を開いています。

なお、演習用として利用可能なHTMLや画像ファイルは、「krzm_html5.zip」にまとめてアップロードしてあります。この記事で紹介しているコーディング内容は、krzm_html5.zip内のchapter02_test.htmもしくはcanvas.htmファイルで試すことができます。

「HTML5の技術的考察」の続きを読む→

夏休み自由研究: タブレットの表示

はじめに

近頃は、Webサイト閲覧に使用する機器が、従来のパソコン一辺倒から、タブレットやスマートフォンへと多様化しています。私は、パソコン派なのですが、HTML/CSSを人様に教える身である以上、他の機器でもどのように表示されるか、やはり気になってきました。

用意したタブレット

もちろん、様々な意味でプライバシーを侵害する機器であるスマートフォン(や携帯電話)を持つ気にはなれないので、とりあえずはタブレットを探求してみることにしました。昨年、記念すべきMicrosoft純正ハードウェアとして登場したSurface Proを皮切りに、この夏までに計3台のタブレットを購入。以下の表が、その概要です。

「夏休み自由研究: タブレットの表示」の続きを読む→

IE11と縦組み・ルビ・組数字

概要

Microsoft社が、Internet Explorerの開発者向けに情報提供を行っている「IEBlog」によると、2014年6月のInternet Explorer 11(以下IE11)に対するアップデートで、縦組みテキストに対する改良が行われたそうです。
Vertical writing mode improvements in IE11

また、その効果を確認するデモが、IE Test Driveサイトにも設けられています。
Vertical Writing Mode Improvements

これらの情報を頼りに、私もIE11で縦組み、ルビ、そして組数字(縦中横)を実際のサンプルで試してみました。この記事内に、そのサンプルテキストを6つ掲載していますが、これらを期待どおりに表示させるには、当然ながら、2014年6月のアップデートが適用されたIE11が必要です。また、テキストにはWindows 8.1でOSに添付されるようになった、游ゴシック/游明朝フォントを使用しているので、Windows 8.1以降での閲覧を推奨します。

なお、縦組み・ルビ・組数字にFirefoxは全く対応していないので、このブラウザーでは全くお話になりません。

「IE11と縦組み・ルビ・組数字」の続きを読む→

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