有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > CSS

フロントエンドエンジニアのblog

RSS

タグ: CSS

サイトマップのツリー構造を CSS のみで表現する

この記事は2016年12月4日に書かれたものです。情報が古い可能性がありますのでご注意ください。

次のようにサイトマップのツリー構造を表現する際、これまでずっとラインの画像をリストの背景として設定し、表現してきました。

画像:サイトマップイメージ

古い Internet Explorer が 6、7、8 と次々にサポートが打ち切られた今、これまで画像で表現していたデザインを CSS のみで表現できるようになり、様々な場面で画像を使わなくなりました。一方、サイトマップについては惰性で長らく画像を使っていたのですが、これも CSS のみでできるんじゃないかと思い、やってみました。

“サイトマップのツリー構造を CSS のみで表現する” の続きを読む »

ビジュアルエディタと公開画面で CSS を共有する

この記事は2016年7月22日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の CSS を作成して管理画面に読み込ませることができますね。editor-style.css などとして CSS ファイルを用意し、functions.php の中で

add_editor_style("editor-style.css");

を記述することで、ビジュアルエディタにeditor-style.css が適用されます。

しかし、これでは記事部分の CSS を変更する際に、公開画面用の CSS とビジュアルエディタ用の CSS の両方を編集する必要があります。

そこで editor-style.css を公開画面と共有すると便利です。header.php の中で style.css と共に読み込ませるか、style.css の先頭で editor-style.css をインポートすればよいわけですが、記事部分を囲む要素の class 属性の値を工夫する必要があります。

“ビジュアルエディタと公開画面で CSS を共有する” の続きを読む »

アクセシブルなタブ切り替えUIを考える

この記事は2015年12月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。

多くのコンテンツをコンパクトに表示するために、よく用いられるタブ切り替えUIですが、スクリーンリーダーでの利用やキーボド操作を考慮した場合に、アクセシブルではないと思えるものが少なくありません。

例えば、スクリーンリーダー利用者はタブ切り替えUIであると認識することが難しいと思われます。タブ切り替えUIは一種のページ内リンクと考えられますので、一つのタブを選択したらそのタブが示す先のコンテンツにフォーカスが移動しなければなりません。しかし、多くのタブ切り替えUIは、タブを選択した後に[tab]キーを押すと、リンク先のコンテンツ内、あるいはその次のリンクにジャンプすることはなく、選択したタブの次のタブにフォーカスが移動します。つまり、ページ内リンクとして機能していないということになります。

そのため、これまで jQuery Accessible Tabs をよく利用していましたが、もっと気軽に、自由に設定できるように、jQuery Accessible Tabs の挙動を参考にして簡単な jQuery と CSS で実装してみました。

“アクセシブルなタブ切り替えUIを考える” の続きを読む »

pre 要素(整形済みテキスト)の折り返しを切り替え可能にする

この記事は2015年7月25日に書かれたものです。情報が古い可能性がありますのでご注意ください。

ソースコードを掲載する時に code 要素と併せて利用する pre 要素(整形済みテキスト)。通常は折り返さずに表示されますので、CSS で overflow: auto; として横スクロールバーを表示するようにしている場合が多いかと思います。

敢えて CSS で記述していなくても、ソースコードをハイライトして読みやすく表示させる SyntaxHighlighter などの JavaScript ライブラリを使うことで、同等の表示になっている場合もあります。

ちなみにこの blog では、ソースコードをハイライト表示するために google-code-prettify を利用しています。

pre 要素内で overflow: auto; によりスクロールが発生した場合(以降、これを “擬似的なインラインフレーム” と称します)、もちろんマウスで操作すれば見えていなかった部分をスクロールして表示することができますが、キーボード操作ではアクセシビリティ上の問題があります。

多くのブラウザでは、その中に a 要素(リンク)がない限り、キーボードで擬似的なインラインフレームにフォーカスすることができませんので、キーボード操作ではスクロールができず、見えない部分を確認することができないからです。

“pre 要素(整形済みテキスト)の折り返しを切り替え可能にする” の続きを読む »

データテーブルとレイアウトテーブルを区別する

この記事は2015年3月19日に書かれたものです。情報が古い可能性がありますのでご注意ください。

CSS によるレイアウトが当たり前となり、十数年前のようなバリバリのテーブルレイアウトというのはほとんど見られなくなりました。一方で、CMS の普及により、WYSIWYG エディタ上の編集エリア内で、複雑なレイアウトを実現するためにテーブルを使うという場合があると思います。

当然、編集エリアにデータテーブルを置く場合もありますので、枠線の有無やセル内余白など、レイアウトテーブルとデザインを区別する必要があります。

WYSIWYG エディタのスタイルボタンなどに予めレイアウトテーブル用の class を登録しておくという方法も考えられますが、最も単純で明快なのは、テーブルの枠線を付けるか付けないかという区別です。

HTML5 では、table 要素の border 属性の値には、1 または空文字列(border="")のみを指定することができ、これ以外の値を指定することはできません。( WYSIWYG エディタによっては、テーブルを挿入する際の枠線の初期値が 0 になっているものが多く、これは HTML5 では使えないので、設定ファイルで初期値を 1 か空に修正しておく必要があります。)

以前、テーブルの枠線は CSS で付けるべきで、border 属性は使うべきでないという考え方もありましたが、HTML5 では、table 要素に border="1" を追加することで、その表がレイアウト目的ではないということを示すことができます。

“データテーブルとレイアウトテーブルを区別する” の続きを読む »

このページの先頭へ