カテゴリー「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 グリッドレイアウト」の続きを読む→

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

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

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を人様に教える身である以上、他の機器でもどのように表示されるか、やはり気になってきました。

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

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)