技術情報 – webdev

CSSのグラデーションでストライプをつくる

CSSのrepeat-gradientを使って、画像を使わずストライプをつくります。

See the Pen Stripe Background by webdev (@webdev-jp-net) on CodePen.0

“CSSのグラデーションでストライプをつくる” の続きを読む

レスポンシブデザイン実装のブレークポイント

レスポンシブデザインのCSSmediaqueryの設定サンプルです。

See the Pen Responsive break point by webdev (@webdev-jp-net) on CodePen.0

サンプルを別窓表示するリンク

“レスポンシブデザイン実装のブレークポイント” の続きを読む

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

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

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

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

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

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

JavaScriptのprototypeをつかったオブジェクト指向サンプルソース

セレクトボックスで選択した値に応じて特定要素の表示を切り替える11行のJavaScriptを
prototypeを使ったオブジェクト指向の組み方などでがっちりかためてみたサンプルです。

$(function(){
	var ui_selecter = $('select[data-script*="visible-selector"][data-target]');
	if(ui_selecter[0]) ui_selecter.each(function(i, o) {
		if($($(o).attr('data-target'))[0]) $(o).on('change', function() {
			var current = $(this).find('option[data-id]:selected'),
				$target = $($(o).attr('data-target')).find('[data-id="' + current.attr('data-id') + '"]');
			if($target[0]) $target.show().siblings('[data-id]').hide();
		});
		$(o).trigger('change');
	});
});

See the Pen visible selector by webdev (@webdev-jp-net) on CodePen.0

JavaScriptを使わない簡易コンテンツライブラリー

HTMLのラジオボタンとCSSで、JavaScriptを使わずに
文字情報や写真を切り替える簡単なライブラリを作成できます。

See the Pen POgxaV by webdev (@webdev-jp-net) on CodePen.0

input form をリセットするJavaScript

<input type="file">は、JavaScriptでvalueをリセットしても選択したファイルの情報が残ってしまうので
入力前のinputタグごとDOMを削除再描画して復元する方法でリセットを実行しています。

See the Pen input file by webdev (@webdev-jp-net) on CodePen.0

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をグラデーションで塗りつぶす” の続きを読む