CSSでアイコン描画「closeボタン」

2017年3月8日

CSS テクノロジー プログラミング

HTTP/2.0にするとWEBサイトが速くなるというのはまやかしだとわかった。 ただ、デモを見るとたしかに早くなっている・・・。 そもそもHTTP/1.1は6ファイルのブロッキング制御が仕様になっている事が原因でHTTP/2.0はそれを任意個数まで引き上げることができる。 たしかに、ヘッダ情報が減っていて無駄は無くなっているので転送容量は少なくなっているはずなのだが、サーバーに問い合わせする個数が変わるわけではないので、実際のサーバー負荷は変わらないと考えてもいいだろう。 そんな矛盾を解消するには、HTMLページ内の「サーバー問い合わせファイル数を減らす」、「データ転送容量を減らす」という事をするのが効果的だろう。

画像ファイル数を減らす方法

とりあえず、そうした時のターゲットは画像ファイルと思われる。 出来る限りHTML1ファイル内で記述できる、またはJSのソースコードで出力できる形が望ましいので、今回はCSSでアイコンを書いて細かなファイル数を減らしてみたいと考えた。 ピクトグラムのような画像は、ドット絵のようなピクセル単位の画像よりは、ベジェ曲線のような、ライン描画の方が圧倒的に軽いはず。 SVGでもいいのだが、出来る限りファイル数を減らすという事が今回の目的だ。

Closeボタン

ページ内で動的なコンテンツなどのサイトの場合、エレメントやオブジェクトを非表示にする時によく使われる「閉じるアイコン」のCSSを作ってみたので、サンプルとしてソースコードを掲載しておく。

ソースコード

<style> .close{ position:absolute; display:inline-block; top:0px; left:0px; width:32px; height:32px; border:0; background-color:black; border-radius:32px; margin:0; padding:0; transform:scale(0.5); cursor:pointer; } .close:before{ content:""; position:absolute; display:inline-block; top:4px; left:13px; width:6px; height:24px; border:0; margin:0; padding:0; background-color:white; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } .close:after{ content:""; position:absolute; display:inline-block; top:4px; left:13px; width:6px; height:24px; border:0; margin:0; padding:0; background-color:white; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } .close:hover{ background-color:red; } </style>

サンプル

・・・おわりです・・・

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。