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

サイトマップ

お問い合わせ

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

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

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

RSS

カテゴリー: フロントエンド

リンクエリアをブロック要素全体に広げ、新しいタブで開くキーボードショートカットに対応する

近年、スマホ等で閲覧した際のユーザビリティを考慮して、クリックやタップできるリンク範囲を広げる手法がよく使われています。

  • HTML5 で複数のブロック要素を a 要素で囲む方法
  • CSS の position プロパティを使って a 要素を直前のブロック要素に被せる方法
  • jQuery を使って a 要素を含むブロック要素のクリックに反応させる方法

などありますが、jQuery を使う方法は私もよく使います。

以前から多くのブログ等で紹介されている記述は次のようなものです。

$(function(){
  $('div.linkBox').click(function(){
    window.location = $(this).find('a').attr('href');
    return false;
  });
});

ただ、この方法は本来のリンク要素外の範囲では、リンク先を新しいタブで開くキーボードショートカットに反応しません。Windows では [ctrl] キーを、Mac では [command] キーを押しながらクリックすると、リンク先が新しいタブで開くというものです。

“リンクエリアをブロック要素全体に広げ、新しいタブで開くキーボードショートカットに対応する” の続きを読む »

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

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

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

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

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

linear-gradient() で斜線を表現する際のアンチエイリアス

CSS で背景にグラデーションを表現する際に利用する linear-gradient() ですが、次のように値を指定することで斜線を表現することができます。

※以下の具体例の表示は、実際に CSS を使って表示しています。ブラウザによって見た目が異なるほか、Internet Explore 9 など linear-gradient() に対応していないブラウザでは斜線が表示されません。

.selector {
  background: linear-gradient(45deg, #fff, #fff 49%, #f00 49%, #f00 51%, #fff 51%, #fff);
}

45度の方向(左下から右上となります)で、領域の0から49%までを白、49%から51%までを赤、51%から100%までをまた白で塗り潰すという感じですね。

しかし、45度に傾いた斜線の場合は比較的きれいに表示されるのですが、中途半端な角度ではギザギザが目立ちます。まるでアンチエイリアスが効かない古いブラウザで見ている感覚です。

“linear-gradient() で斜線を表現する際のアンチエイリアス” の続きを読む »

世界標準時(UTC)で表示された日時を jQuery で書き替える

WordPress では、一般設定でタイムゾーンを設定することによって、投稿日時などがその地域の日時で表示されます。日本時間の場合は "東京" または "UTC+9" を設定します。

先日、ユーザー管理のために使用したプラグインで、登録日時は日本時間で表示されるのに、更新日時とログイン日時が9時間プラスされて表示されるという現象が発生しました。世界標準時(UTC)は日本時間より9時間遅れ。今回は9時間プラスなので、世界標準時で表示されているわけでもありません。

原因がわからないので、仕方なく jQuery で日時を修正することにしたのですが、実装後あらためて確認すると、一般設定で "東京" を設定しているうえに、functions.php に

date_default_timezone_set('Asia/Tokyo');

を記述していたことが原因のようでした。通常はこのように設定していても問題ないと思うのですが、プラグインのバグでしょうか、functions.php の記述を削除したら正しく表示されました。

でも折角ですし、また何か役立つ場合があるかもしれませんので、今回は表示された日時を9時間戻しましたが、世界標準時(UTC)で表示された日時を日本時間に書き替える(9時間進める)方法を記しておきます。

“世界標準時(UTC)で表示された日時を jQuery で書き替える” の続きを読む »

HTML5、CSS3 の古いブラウザへの対応について

この記事は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 の古いブラウザへの対応について” の続きを読む »

1 2

このページの先頭へ