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

backdrop-1838492_1280
LINEで送る
Share on GREE
Share on LinkedIn

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

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

とりあえず、そうした時のターゲットは画像ファイルと思われる。
出来る限りHTML1ファイル内で記述できる、またはJSのソースコードで出力できる形が望ましいので、今回はCSSでアイコンを書いて
細かなファイル数を減らしてみたいと考えた。

ピクトグラムのような画像は、ドット絵のようなピクセル単位の画像よりは、ベジェ曲線のような、ライン描画の方が圧倒的に軽いはず。
SVGでもいいのだが、出来る限りファイル数を減らすという事が今回の目的だ。

Closeボタン

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

ソースコード

サンプル

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です