このページの本文へ

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

有限会社Willさんいん

このページの位置: home CSS3

タグ: CSS3

Contact Form 7 で星形の5段階評価を作成

WordPress のメールフォームプラグインといえば、Contact Form 7MW WP Form が有名ですが、それぞれに特徴があり、案件によって使い分けています。

簡単にフォームを作成できて、追加のプラグイン等による機能拡張が多いのが Contact Form 7、細かい設定ができて、出力される HTML をコントロールしやすいのが MW WP Form かなと感じています。

このたび、既に Contact Form 7 を使っているサイトで、新たなフォームの作成案件があり、その中に星形の5段階評価を付ける項目がありました。星形のインターフェイスは必須ではなかったのですが、要望ですし、フォームに(Contact Form 7 でというわけではなく)星形の5段階評価を作成する方法は、検索するといくつか紹介されていますので、できないことはないだろうと、実装してみました。

星形の5段階評価のイメージ
“Contact Form 7 で星形の5段階評価を作成” の続きを読む »

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

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

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

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

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

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

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() で斜線を表現する際のアンチエイリアス” の続きを読む »

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

page top