カテゴリー「Web」

ライブタイルに対応したWebサイトのピン留め

Webサイトのピン留め

世の中、あまりに保守的なユーザーが多く、Windows 8.1 に「Update」が適用され、少しずつ「スタート画面」が後景へと追いやられる予感の募る今日この頃ですが、それでも8.1のタイル表示が、私は好きです。 「ライブタイルに対応したWebサイトのピン留め」の続きを読む→

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

Web用ビットマップ画像と解像度の呪縛

はじめに

以前から私の授業では、解像度を指定した画像のブラウザーでの表示と印刷、Wordでの表示などの比較によって、「Web画像に解像度は意味を持たない、ピクセルサイズこそすべてである」ということを実証してきました。しかし、今でも「Webでの標準解像度は72もしくは96ppi」という話を耳や目にすることが多く、さらには高詳細ディスプレイの登場によって、話がややこしくなってきたので、この記事では、ビットマップ画像の原理から、Webページでの解像度の考え方までを、まとめてみました。

「Web用ビットマップ画像と解像度の呪縛」の続きを読む→

トップページの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の問題点」の続きを読む→

SVGファイルの利用

はじめに

当サイトでも各所に使用しているのが、SVGという形式の画像ファイルです。

SVGは、W3CがWeb用の標準画像形式として仕様を定めているもので、Internet Explorerの場合は9以上、他のブラウザーは最新版であればすべて表示可能です。そして、いわゆる「HTML5」の括りの中に、SVGも組み込まれています。その意味では、今後の流行りの画像形式かもしれません。

「SVGファイルの利用」の続きを読む→

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