月別: 2013年4月の投稿

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

modern.IE日本語版サイト公開

以前から英語版は公開されていた、MicrosoftのInternet Explorer向け互換性検証サイト、「modern.IE」の日本語版が公開されました。

このサイトではURLを入力し、そのWebページのIE旧バージョン由来の互換性問題や、HTML5等の新仕様との互換性をスキャンして、問題点があれば改善策を提案してくれる機能を備えています。

スキャン機能はまだベータ版とのことですが、当サイトのトップページや記事ページをスキャンしてみたところ、以下のような結果になりました

modern.IEスキャン結果
modern.IEでのスキャン結果

Windows 8新機能のための提案は置いておくとして、「レスポンシブWebデザイン」の項目では、小画面または大画面用に設計された最新のブラウザーでは適切に表示されない可能性があるという結果が出ました。またこのスキャンでは、現在、メディア クエリを検出しますとも表示されるのですが、当サイトではメディアクエリを使用して、複数の異なるサイズでレイアウトを切り分けています。ですので、メディアクエリ自体を正しく検出できなかったのか、それとも指定しているサイズが不適切なのかは、残念ながら分かりません。

また、「ブラウザー検出」の項目はOKのようなのですが、この Web ページは、最新のブラウザーをサポートするためにブラウザー検出を使用していません。機能検出を実装していない場合は、実装をお勧めしますという説明が書かれていました。IEコメント分岐を使って、旧バージョンの検出と対応はしっかりやってきたつもりですが、最新ブラウザーを検出する意味がよく分かりませんでした。提案する追加の操作はありませんということなので、現状でも構わないのかもしれませんが。

しかし、概ね、当サイトは問題なさそうなので、努力は報われているという感じです。ちなみに、英語版でも何度かチェックしていたのですが、同じ結果でした。その説明や提案を、日本語で読むことができるようになり、なかなか便利なサイトになってくれました。

Firefox 20…

昨日(もしくは一昨日)、Firefox ver.20が公開されていました。

いちおうアップデートして動作を確認してみましたが、

  • フレキシブルボックスレイアウトへの対応に変更なし。指定は、display:-moz-boxのまま。overflow:hiddenでフレキシブルボックスが正しく表示されない点や、%単位の幅のフレックスアイテムを正しく表示できない点も変化なし
  • SVGファイルの表示で、倍率によってぼやけた表示になる点も変化なし
  • 当サイトのトップページ等で分かるとおり、CSS Animationの圧倒的な遅さに変化なし

という結果でした。

知の好循環

HTML5でHTMLページを記述する際、新しく追加された要素に対応していない、旧バージョンのブラウザーへの対応が必要になります。

新しい要素、すなわち旧いブラウザーにとっては「未知の要素」ですが、少なくともタグとして< >を付けておけば、「何かの要素なんだね、僕にはわからないけど」とブラウザーは好意的に解釈してくれるので、基本的には表示に影響を与えません。ただし、インライン表示で扱われるので、たとえばsection要素のようにブロックレベル表示であるべきものには、スタイルシートで指定しなければなりません。

一方、Internet Explorer 8以下は、「僕にはわからないから迷っちゃうな」という感じで、未知の要素の開始タグと終了タグを、別個の空要素として閉じてしまいます。section要素であれば、以下のような結果になり、囲んであった要素内容は外に放り出されてしまいます。


<section />
要素内容
</section />

というのが、HTML5での注意点なのですが、この記事の本題は、そこにはありません。

「知の好循環」の続きを読む→

フレキシブルボックスにおける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)