このページの本文へ

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

有限会社Willさんいん

このページの位置: home カテゴリー: HTML/CSS/JS 3ページ目

“HTML/CSS/JS” カテゴリの記事(15件)

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

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

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 で書き替える

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

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

Web フォントを使ってみました

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

Willさんいんでは、モリサワのすべてのフォントが使用できる MORISAWA PASSPORT を契約していますが、すべての MORISAWA PASSPORT 製品契約者は、追加料金なくモリサワの Web フォント(モリサワでは“クラウドフォント”と称しています)TypeSquare を利用できるということで、Willさんいんのサイトに導入してみました。この MORISAWA PASSPORT プランは、利用可能書体数、利用可能ドメイン数に制限がなく、1,000万PV/年まで無料で利用できます。

今回、視認性が高く、読みやすいというユニバーサルデザインフォントを採用し、本文を含むすべてに “UD新ゴ” をベースフォントとして使い、見出しには “UD新丸ゴ” を使ってみました。

くもやじ” とか “プリティー桃” とか “はるひ学園” とか “すずむし” といったデザインフォントも使えます。

“Web フォントを使ってみました” の続きを読む »

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

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

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

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

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

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

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

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

1 2 3

page top