この記事は2022年6月23日に書かれたものです。情報が古い可能性がありますのでご注意ください。
2022年6月16日、 ついに Internet Explorer（以下、IE）のサポートが終了しましたね。私たち Web 制作者はこれまで長年 IE に苦しめられてきましたが、これでやっと解放されました。思えば、IE のバージョンごとに CSS ハックを使って調整したり、CSS3 などの技術が使えずヤキモキしたり、過去には Mac 版の IE なんてものもありました。
複数のバージョンの IE がサポート対象だった頃は、Parallels Desktop の仮想マシンにこれまた異なる複数のバージョンの Windows を入れ、それぞれの IE でWebページの表示確認を行なっていた時期もありました。IE5.5 ～ IE10 までの動作確認ができる “IETester” というツールもありましたが。
近年はサポート対象バージョンが IE11 だけとなったので、Parallels Desktop の仮想マシンも Windows 10 のみとしていましたが、このたび Windows 11 にアップグレードしました、というかアップグレードすることができず、新規にインストールすることになりました。
“Parallels Desktop 上の Windows 10 を Windows 11 にアップグレード（新規インストール）する” の続きを読む »
カテゴリー: アクセシビリティ
この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。
ソースコードを掲載する時に code 要素と併せて利用する pre 要素（整形済みテキスト）。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。
敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。
ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。
pre 要素内で overflow: auto; によりスクロールが発生した場合（以降、これを “擬似的なインラインフレーム” と称します）、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。
多くのブラウザでは、その中に a 要素（リンク）がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。
“pre 要素（整形済みテキスト）の折り返しを切り替え可能にする” の続きを読む »
カテゴリー: WordPress
この記事は2015年7月16日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の ビジュアルエディタ TinyMCE の機能を拡張するプラグインとして、TinyMCE Advanced が有名です。この TinyMCE Advanced、バージョンが 4.0 以上になってから更に使いやすくなり、挿入されるタグも非推奨タグが少なくなってきたように思います。まだ一部テーブル関連で非推奨属性が残っていますが。
この設定方法や使い方は、数々のブログ等で山ほど紹介されていますのでここでは書きませんが、ブロック要素の選択肢とフォントサイズの選択肢をもう少し踏み込んで設定するうえで、あまり情報が無かった以下の2件のカスタマイズ方法を紹介します。
- ブロック要素（見出し）の選択肢を、投稿タイプによって切り替える
- フォントサイズの選択肢を、ラベルを px、値を % で定義する
“TinyMCE のブロック要素とフォントサイズの選択肢” の続きを読む »
カテゴリー: HTML/CSS/JS
この記事は2015年5月26日に書かれたものです。情報が古い可能性がありますのでご注意ください。
2014年10月28日に HTML5 が正式に勧告となりましたが、それ以前より多くのWebサイトが HTML5 や CSS3 を採用しています。弊社でも2012年辺りから HTML5 を採用し、丸角やシャドウ、グラデーションなどの CSS3 の一部のプロパティやセレクタを取り入れてきました。
特に、近年はレズポンシブWebデザインによるスマートフォンやタブレット対応も施していますので、CSS3 を使うことによって画像を少なくできることは、マークアップ作業やメンテナンスを楽にするだけでなく、通信速度やデータ量の面でも有効です。
ただ、そこで問題となるのが主に Internet Explorer 9 以前の古いブラウザへの対応です。HTML5 については IE8 以前が対応していませんし、CSS3 については IE8 以前のみならず、IE9 でも背景のグラデーションなどに対応していなかったり、IE10 でも対応していないプロパティがあります。
そのような古いブラウザ（というか、IE ）に対して、HTML5 と CSS3 を適用させる方法として、以下の JavaScript ライブラリが有名です。
“HTML5、CSS3 の古いブラウザへの対応について” の続きを読む »