先日、macOS版のFirefoxブラウザにてメディアクエリに関する不具合を確認しました。その件について調べたこと、わかったことをメモとして残しておきます。 以下、不具合発生時のOSとブラウザのバージョンです。 macO […]
タグ: CSS
WordPressのプラグイン “TinyMCE Advance” では、表組み（table要素）の罫線をちょっと動かすだけでも、”width”や”height […]
ディスプレイの幅に合わせてレイアウトが変化するレスポンシブデザインのページに、幅が可変の動画を配置するため以下のCSSを指定しました。 video { width: 100%; max-width: 100%; heig […]
ホームページ制作の際、ローカルの（PC内の）HTMLファイルをIE9/10で検証する際は、IEのデフォルトの設定を変更する必要があります。 一つは互換表示をオフにする、もう一つはJavaScriptを実行するための設定で […]
表組みにするTABLE要素は、内包する要素をすべてを読み込んでから描画するため表示が遅くなります。 描画速度を早くするには、スタイルシートの「table-layout:fixed」を使います。この「table-layou […]
最終更新日：
ヘッダ固定でスクロールできるテーブル
HTMLで縦に長い表のときは、見出しを固定（エクセルの「ウィンドウ枠の固定」）して、スクロールできるようにしたい。この動作をCSSだけで実現するようにできたのでメモ。 （2013年8月6日改訂） 動作検証ブラウザ Win […]
最終更新日：
表組の奇数行／偶数行で色分けするCSS3/JS
CSS3では、:nth-child疑似クラスがサポートされました。これを使うと、表組などで奇数行、偶数行それぞれに背景色を付けることなどが簡単にできます。 ただし対応しているブラウザはFireFox3.6, Safari […]
最終更新日：
子セレクタ、隣接セレクタ、属性セレクタの合わせ技
このサイトではヘッダ部をCSSで position:fixed;にしています。 これはヘッダ部をスクロールさせたくないからですが、実際に運用してみると問題が発覚。 内部リンク先を表示した際、リンク先がヘッダに隠れてしまう […]
最終更新日：
IEのFilterの検証
CSS3や透過PNGを未実装のIE用にFilterを使用することがあります。filterはInternetExplorer4から導入された独自機能ですが、調べてみると指定方法が2、3種類あります。 今まであまり深く考えず […]
作成中のホームページで「ページトップへ戻る」リンクの下に、リンクを追加したところ、IE7、6でアンカーにhoverするとその親要素が伸び縮みするという不具合が起こりました。［サンプルページ１］ ソースは以下の通りです。（ […]