タグ「CSS3」

CSS グリッドレイアウト

はじめに

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

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

「CSS グリッドレイアウト」の続きを読む→

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

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

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

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

はじめに

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

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

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と縦組み・ルビ・組数字」の続きを読む→

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

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