カテゴリー「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月)」の続きを読む→

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)