サイズが可変のtableのセルに斜線を引くCSS

SVGを活用すると、可変になっている矩形の端から端にスタイルシートでナナメの線を引くことができます。

リキッドの<table>対戦表でセルに斜線を引く場合などでいかがでしょうか。

See the Pen stretch slash css by webdev (@webdev-jp-net) on CodePen.0

パソコンのブラウザの場合は、ウィンドウ幅を変更して
スマートフォンの場合は画面を回転させて、テーブルのサイズを変更してみてください。

“サイズが可変のtableのセルに斜線を引くCSS” の続きを読む

SVGにwidth,heightを指定していないとIEでbackground-sizeより縮小されるバグ

IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際
画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。

これを回避するためには、SVGにwidth,heightを指定した上で、CSSのbackground-sizeも指定します。

サンプルソース※IEで表示すると症状が再現します

.pattern {
	width: 100vw;
	height: 10vw;
	background: url('dot.svg');
	background-size: 5vw;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
	<circle cx="0" cy="0" r="12"/>
	<circle cx="30" cy="30" r="12"/>
	<circle cx="60" cy="60" r="12"/>
	<circle cx="0" cy="60" r="12"/>
	<circle cx="60" cy="0" r="12"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 60 60">
	<circle cx="0" cy="0" r="12"/>
	<circle cx="30" cy="30" r="12"/>
	<circle cx="60" cy="60" r="12"/>
	<circle cx="0" cy="60" r="12"/>
	<circle cx="60" cy="0" r="12"/>
</svg>

SVGをグラデーションで塗りつぶす

Illustratorでグラデーションで塗りつぶしたベクター画像をSVG書き出しすると、
わざわざグラデーション部分をラスタライズ画像として保存しマスキングする構造のSVGを生成してくれます。
せっかくビットマップ画像と決別したかったのにこれでは煮え切らない (笑)
ということでXMLコードだけでfillをグラデーションにする方法を探しました。

“SVGをグラデーションで塗りつぶす” の続きを読む

特殊文字をCSSのcontentへ表示

CSSのcontentでは文字を挿入することもできますが
「&(&amp;)」「>(&gt;)」などの特殊文字はコードのまま出力されてしまいます。

contentで特殊文字を使うときは、16進数の数値文字参照コードの& # x を、\や0に置き換え、セミコロンをとると指定できます。

  • & → \
  • # → 0
  • x → 0

「>」の記号をCSSの擬似要素で表示

「>」の参照はこうなります

  • 文字参照 → &gt;
  • 10進数の数値参照 → &#62;
  • 16進数の数値参照 → &#x003E;

16進数の数値参照 &#x003E; の記号を置換します。

  • &#x003E; → \00003E

これをCSSのcontentに設定。

// > を挿入
.btn_next::after {
	content: '\00003E';
}

ボタンに>>をスタイルで表示するサンプル

See the Pen Enter entities in CSS’s content property by webdev (@webdev-jp-net) on CodePen.0

CSSのpointer-eventでマウスイベントを制御

pointer-event: none; を使うと、CSSでクリックイベントを無効にできます。
工夫すれば、従来Javascriptを使用していた制御もCSSだけで実現できます。

pointer-eventは、最新ブラウザでは実装されています。
Internet Explorer 10未満でサポート外となっているので、レガシーな環境へ対応が必要なクライアントワークでは使うことができません。

参考:
Can I use… pointer-events

“CSSのpointer-eventでマウスイベントを制御” の続きを読む

記号(:や/)が連続するとword-bleak: break-all;の折り返しが効かない

最近知ってしまった真実…
一部のブラウザで、CSSの強制折り返しが効かないケースがあることがわかりました。

* {
	word-bleak: break-all;
}

こうしときゃ万能だろうという神話を信じていたのに、:(コロン)や/(スラッシュ)が連続している場合は折り返してもらえません。

2016年11月2日現在ではこうなっていました。

  • Safari 10.0.1 … OK
  • Chrome 54.0.2840.71 … NG
  • Internet Explorer 11 … NG

“記号(:や/)が連続するとword-bleak: break-all;の折り返しが効かない” の続きを読む