SQLの窓

2016年02月01日


A 要素と CSS だけでボタンを表現する 『BUTTONS』

ボタンそのものの下に浮いたような影が付いているのは、このブログ用の CSS で行っています
影の付かないノーマルの表示サンプルはこちらから


BUTTONS


ダウンロードして実装するのもいいですが、基本 CSS は、CDNJS でホスティングされています。

❶ https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css
( link 要素で参照するだけです )

※ ここでは SPAN 要素に対して設定しているのでリンクではありません( 強調として )
※ こんな感じです class="button button-primary"

BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』 では、アイコン用にフリーフォント用の CSS が必要でしたが、A 要素のみで使用する場は必要ありません。テキストとして使用できるものは全て利用可能です

❷ 基本は、class 属性の値として button を指定します
 ( ありがちな値なので競合に注意して下さい )

❸ 次にサイズ用の値
 ( button-tiny / button-small / button-large / button-jumbo / button-giant )
※ 省略すると標準の大きさ

❹ 次に色
 ( button-primary / button-action / button-highlight / button-caution / button-royal )
※ 省略すると灰色
button-inverse で黒を指定できます

になります。ここまででも通常状態で作成されますが、さらに形状を指定できます

❺ button-rounded / button-pill / button-3d / button-raised / button-longshadow-right / button-glow

button-rounded で角丸

button-pill で錠剤形状

button-3d で立体形状

button-longshadow-right で文字の影
( 色によっては、影が出なかったり見えにくかったりします )
button-longshadow-left( 左向きの影 )もあります

button-glow で全体が点滅

▼ class="button button-3d button-border"
さらに、button-border と組み合わせて白抜きの表現が可能になっています

button button-glow button-border

▼ 以下の二つの組み合わせは使えませんね
button button-raised button-border
( button button-raised button-border )

button button-longshadow-right button-border
( button button-longshadow-right button-border )

基本形状の組み合わせも可能です


サイズ : button-tiny

Go Go Go


サイズ : button-small / 色 : button-primary

Go Go Go

サイズ : 指定なし / 色 : button-action

Go Go Go

サイズ : button-large / 色 : button-highlight

Go Go Go

サイズ : button-jumbo / 色 : button-caution

Go Go Go

サイズ : button-giant / 色 : button-royal

Go Go Go

表現方法 : button-3d

日本語でもOKですが

button クラスの font-family を

上書きしないと

想定したフォントになりません

表現方法 : button-raised

ようこそ! Go こんにちは!

黒は button-inverse

表現方法 : button-longshadow-right

普通の文字でも 影は 使えます


表現方法 : button-glow

Go Go Go Go


表現方法 : button-3d と button-border

OK

br 要素で改行する場合は
heightとline-height指定が必要です


表現方法 : button-glow と button-border

OK

br 要素で改行する場合は
heightとline-height指定が必要です


<style>
.button {
	font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif!important;
}
</style>

<link id="link" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">

<div id="buttons_a">
<br><br><b class="gttl">サイズ : button-tiny</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-tiny">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-rounded button-tiny">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-pill button-tiny">Go</a>

<br><br><b class="gttl">サイズ : button-small / 色 : button-primary</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-small">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-rounded button-small">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-primary button-pill button-small">Go</a>

<br><br><b class="gttl">サイズ : 指定なし / 色 : button-action</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-action">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-action button-rounded">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-action button-pill">Go</a>

<br><br><b class="gttl">サイズ : button-large / 色 : button-highlight</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-large">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-rounded button-large">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-highlight button-pill button-large">Go</a>

<br><br><b class="gttl">サイズ : button-jumbo / 色 : button-caution</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-jumbo">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-rounded button-jumbo">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-caution button-pill button-jumbo">Go</a>

<br><br><b class="gttl">サイズ : button-giant / 色 : button-royal</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-giant">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-rounded button-giant">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-royal button-pill button-giant">Go</a>

<br><br><b class="gttl">表現方法 : button-3d</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-primary button-rounded">日本語でもOKですが</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-action button-pill">button クラスの font-family を</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-caution">上書きしないと</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-3d button-royal">想定したフォントになりません</a>

<br><br><b class="gttl">表現方法 : button-raised</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-primary button-pill">ようこそ!</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-caution">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-royal">こんにちは!</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-pill button-inverse">黒は button-inverse</a>
  
<br><br><b class="gttl">表現方法 : button-longshadow-right</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-primary button-pill button-longshadow-right">普通の文字でも</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-caution button-longshadow-right">影は</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-raised button-royal button-longshadow-right">使えます</a>
<br>
<a href="http://matome.naver.jp/odai/2131896140848768101" class="button button-raised button-pill button-inverse button-longshadow-right"><span style="font-size:30px;">&#9822;</span></a>

<br><br><b class="gttl">表現方法 : button-glow</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-raised button-primary">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-highlight">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-caution">Go</a>
<a href="http://unicorn-ui.com/buttons/" class="button button-glow button-rounded button-royal">Go</a>
  
<br><br><b class="gttl">表現方法 : button-3d と button-border</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-3d button-primary button-rounded button-jumbo">OK</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-3d button-caution button-rounded" style="height:80px;line-height:40px">br 要素で改行する場合は<br>heightとline-height指定が必要です</a>

<br><br><b class="gttl">表現方法 : button-glow と button-border</b><br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-glow button-primary button-rounded button-jumbo">OK</a>
<br><br>
<a href="http://unicorn-ui.com/buttons/" class="button button-border button-glow button-caution button-rounded" style="height:84px;line-height:40px">br 要素で改行する場合は<br>heightとline-height指定が必要です</a>



</div>



タグ:CSS
posted by lightbox at 2016-02-01 14:34 | Comment(0) | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2015年12月24日


BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』

BUTTONS


実際は、A 要素もボタンになるのですが、ここではアイコンボタンのみ考えます。ダウンロードして実装するのもいいですが、基本 CSS は、CDNJS でホスティングされています。

アイコンに関しては、Font Awesome よりダウンロードできますが、これも //netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css を使うことができます ( ライセンスページ )

アイコンの種類と名前に関しては、こちらを参照して下さい

画像として簡単に手にいれたい場合は、こちら(フリーフォントで簡単ロゴ作成)でダウンロードできます( フォントのライセンスは SIL Open Font License 1.1 です )

  
  


サイズ : button-tiny



サイズ : button-small / 色 : button-primary



サイズ : 指定なし / 色 : button-action



サイズ : button-large / 色 : button-highlight



サイズ : button-jumbo / 色 : button-caution



サイズ : button-giant / 色 : button-royal



表現方法 : button-3d



表現方法 : button-raised



表現方法 : button-longshadow-right



表現方法 : button-glow



表現方法 : button-3d と button-border



表現方法 : button-glow と button-border


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">

<button class="button button-square button-tiny"><span class="fa fa-glass"></span></button>
<button class="button button-box button-tiny"><i class="fa fa-music"></i></button>
<button class="button button-circle button-tiny"><i class="fa fa-search"></i></button>

<button class="button button-primary button-square button-small"><i class="fa fa-envelope-o"></i></button>
<button class="button button-primary button-box button-small"><i class="fa fa-heart"></i></button>
<button class="button button-primary button-circle button-small"><i class="fa fa-star"></i></button>

<button class="button button-action button-square"><i class="fa fa-star-o"></i></button>
<button class="button button-action button-box"><i class="fa fa-user"></i></button>
<button class="button button-action button-circle"><i class="fa fa-film"></i></button>

<button class="button button-highlight button-square button-large"><i class="fa fa-th-large"></i></button>
<button class="button button-highlight button-box button-large"><i class="fa fa-th"></i></button>
<button class="button button-highlight button-circle button-large"><i class="fa fa-th-list"></i></button>

<button class="button button-caution button-square button-jumbo"><i class="fa fa-check"></i></button>
<button class="button button-caution button-box button-jumbo"><i class="fa fa-remove"></i></button>
<button class="button button-caution button-circle button-jumbo"><i class="fa fa-search-plus"></i></button>

<button class="button button-royal button-square button-giant"><i class="fa fa-search-minus"></i></button>
<button class="button button-royal button-box button-giant"><i class="fa fa-power-off"></i></button>
<button class="button button-royal button-circle button-giant"><i class="fa fa-signal"></i></button>

<button class="button button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-raised button-action button-box button-giant"><i class="fa fa-home"></i></button>
<button class="button button-raised button-highlight button-circle button-giant"><i class="fa fa-file-o"></i></button>

<button class="button button-longshadow-right button-caution button-box button-giant"><i class="fa fa-clock-o"></i></button>
<button class="button button-longshadow-right button-royal button-circle button-giant"><i class="fa fa-road"></i></button>

<button class="button button-glow button-box button-giant"><i class="fa fa-download"></i></button>
<button class="button button-glow button-primary button-circle button-giant"><i class="fa fa-arrow-circle-o-down"></i></button>

<button class="button button-border button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-border button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-border button-glow button-box button-giant"><i class="fa fa-arrow-circle-o-up"></i></button>
<button class="button button-border button-glow button-primary button-circle button-giant"><i class="fa fa-inbox"></i></button>


関連する記事

A 要素と CSS だけでボタンを表現する 『BUTTONS』



posted by lightbox at 2015-12-24 15:21 | Comment(0) | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年11月28日


CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い

CENTER 要素は、HTML 4 (及び XHTML)で非推奨要素に指定され、HTML5 で完全に廃止されていますが、間違って使われてしまった場合、Google Chrome( と Firefox は同じ ) と IE11 では全く表示が異なる場合があります。

DIV 要素を position:relative でラッパーにして、内部に position:absolute を指定しますが、DIV 要素は CENTER 要素によって中央に表示されるのですが、中の要素の位置が、Google Chrome と Firefox では、中央の軸が左端になって表示されます。これに関しては、IE11 の、DIV の左端に表示されるのが正しいと思うのですが、そもそも CENTER 要素を使う事が間違っているのでなんとも言えません。( 本来は、ラッパーに対して margin:auto を指定して、ラッパーの親要素の幅に対して中央位置に配置する )

Google Chrome と Firefox



IE11


<center>
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>
</center>
▼ CENTER で表示
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;margin:auto'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>

▼ margin:auto で表示
※ IE11 ではどちらも同じ表示になります


posted by lightbox at 2014-11-28 03:39 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年11月20日


INPUT type="number" の振る舞いをブラウザ間で調整する

Google Chrome と Firefox ではスピンボタンが実装されていますが、IE では何もありません。この違いは、jQuery の spinner で吸収するのですが、IE のバージョンによって input[type=number] というセレクタが使え無いので、バージョン毎の対応が必要でした。

さらに、IE で HTML5 による入力チェックが働くのは、IE10 以降なのですが、type="number" で 数字以外を入力すると、チェックされずに空文字列がサーバーに送られてしまいます。ですから、type="text" で pattern 属性で同様の対応をしています。

また、逆にスピンボタンを必要としない場合は、Google Chrome と Firefox で非表示にする必要がありますが、その場合は CSS で、ブラウザ毎に対応します。

Google Chrome : -webkit-appearance: none;
Firefox : -moz-appearance: textfield;



▼ デモページの表示イメージ

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
$(function(){

	var target = null;

	if ( userAgent.indexOf("msie") > -1 ) {
		if (appVersion.indexOf("msie 10.0") > -1) {
			target = $( "input[type=number].num_b" ).spinner()
			target.attr( "type", "text" );
			target.attr( "pattern", "^[0-9]+$" );
			target = $( "input[type=number].num_a" )
			target.attr( "type", "text" );
			target.attr( "pattern", "^[0-9]+$" );
			$("#title").text("今ブラウザは IE 10です");
		}
		else {
			target = $( "#ie9" ).spinner()
			$("#title").text("今ブラウザは IE 9 以前です");
		}
	}
	else {
		if ( userAgent.indexOf("trident/7.0") > -1 ) {
			target = $( "input[type=number].num_b" ).spinner()
			target.attr( "type", "text" );
			target.attr( "pattern", "^[0-9]+$" );
			target = $( "input[type=number].num_a" )
			target.attr( "type", "text" );
			target.attr( "pattern", "^[0-9]+$" );

			$("#title").text("今ブラウザは IE 11です");
		}
		else if (userAgent.indexOf("firefox") > -1) {
			$("#title").text("今ブラウザは Firefox です");
		}
		else if (userAgent.indexOf("opera") > -1) {
			$("#title").text("今ブラウザは Opera です");
		}
		else if (userAgent.indexOf("chrome") > -1) {
			$("#title").text("今ブラウザは Google Chrome です");
		}
		else if (userAgent.indexOf("safari") > -1) {
			$("#title").text("今ブラウザは Safari です");
		}
		else {
			$("#title").text("今ブラウザは 不明なブラウザ です");
		}
	}

	if ( target != null ) {
		target.css({"width":"300px" });
	}

});

</script>

<style type="text/css">
input[type="number"].num_a::-webkit-outer-spin-button, 
input[type="number"].num_a::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

input[type=number].num_a {
	-moz-appearance: textfield;
}

* {
	font-family: "メイリオ", Meiryo, "MS Pゴシック";
	font-size: 16px;
}

</style>
<h3 id="title" style='margin-bottom:-10px;'></h3>
<form 
	method="get" 
	id="target_form" 
	target="my_ferame" 
	action="http://winofsql.jp/php_get.php" 
	accept-charset="utf-8">
<pre>
<input 
	type="submit" 
	name="send" 
	id="send_check" 
	value="送信">
▼ type="number" でスピンボタンなし
<input
	class="num_a"
	type="number" 
	name="num[]">

▼ type="number" でスピンボタンあり
<input 
	class="num_b" 
	type="number" 
	id="ie9" name="num[]">
</pre>
</form>
<iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>

関連する記事

INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン

参考

Styling new Chrome number input (spin box) - Stack Overflow

※ 参考ページでは、スピンボタンのカスタマイズについて書かれています(自前のスピンボタンの使用)


posted by lightbox at 2014-11-20 16:21 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年11月07日


META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。

meta要素の内容を構文解析エラー:
';' は有効なキーと値のペアの区切りではありません。代わりに ',' を使用してください。
単純にコピーペーストで使っており、実際動作していたので気が付きませんでした。ちょっと調べてみると、世の中では実際混在しているようでしたが、基本的にはカンマを使うべきなのでしょう
<meta name="viewport"
	content="width=1280,initial-scale=1.0">

<meta name="viewport"
	content="width=1280;initial-scale=1.0">
The value "1280;initial-scale" for key "width" was truncated to its numeric prefix. 
The key "1.0" is not recognized and ignored.
Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead. 
iOS Developer Library : Configuring the Viewport
<meta
	name="viewport"
	content="initial-scale=2.3, user-scalable=no">

Mozilla | MDN : Using the viewport meta tag to control layout on mobile browsers
<meta 
	name="viewport" 
	content="width=device-width, initial-scale=1">

▼ Microsoft は、META 要素における viewport そのものの解説を見つけられませんでした…

MDSN : How to display dynamically generated web content using the WebBrowser control for Windows Phone 8



posted by lightbox at 2014-11-07 12:30 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年09月25日


CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認

jQuery で、設定をを切り替えています。変更できる内容は以下のようにしています
1) block
2) inline-block
3) inline-table
4) list-item
5) inline
list-item を同時にテストする為、一番外側のブロックには ul を使用しています。

    テキスト
    テキスト(自動改行をさせる)テキスト(自動改行をさせる)

inline-table が扱いやすい

ブロック内のテキストが自動改行されて複数行になった場合に、一番上の行に合わせてレイアウトされます。さらに、ブロックの高さより、テキストが多くなっても自動的にブロックの高さが調整されます。これは、そもそも float を指定するかわりの代替として使われるべきものです。

inline-block では、ブロックが単純に行の上に乗る形で上へ伸びます。また、ブロックの高さは固定で、テキストが多い場合ははみ出るので、ブロックによる背景色等の効果を期待できません、つまり、ブロック内のテキストの改行数によって 全体の見え方がかなり変化する事になります。

list-item は、標準のマーカーを使う場合はいいですが、画像を list-style-image で変更すると、画像のサイズによって、意図しないレイアウトになるようなので使わないほうがいいと思います。

<script type="text/javascript">
if ( window['loadjQuery'] !== true ) {
	window['loadjQuery'] = true;
	document.write("<"+"script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></"+"script>");
}
</script>
<script type="text/javascript">
$(function(){
	$("#change_type").change(function(){
		$("#jquery_test div")
			.css({ "display": $(this).val() } );
	});
});
</script>
<style type="text/css">
#jquery_test {
	width: 550px;
	border: dotted 1px #c0c0c0;
}
#jquery_test div {
	display: block;

	width: 100px;
	height: 50px;
	border: solid 1px #000000;
	padding: 5px;
}
#jquery_test .next {
	margin-left: 20px;
}
</style>
<ul id="jquery_test">
	<select id="change_type">
		<option>block</option>
		<option>inline-block</option>
		<option>inline-table</option>
		<option>list-item</option>
		<option>inline</option>
	</select>
	<hr>
	テキスト 
	<div>
		テキスト(自動改行をさせる)テキスト(自動改行をさせる)
	</div>
	<div class="next">テキスト(自動改行をさせる) 
	</div>
	<div class="next">テキスト 
	</div>
</ul>


posted by lightbox at 2014-09-25 14:03 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年09月08日


ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ

Vertical align anything with just 3 lines of CSS
jQuery UI に resizable があります。これを使って、外側のサイズをリアルタイムに変更して中央のブロックレベル要素が中央に表示されるのを確認できます。

jQuery は、IE の古いバージョン用に 1.xx を使用していますが、結局 IE8(IE11 のエミュレータ) では正しく中央にはなりませんでした。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() {
	$( "#base_box" ).resizable({});
});
</script>
<style>
#base_box {
	width:450px;
	height:200px;
	border: solid 3px #f00;
}
#inner_box {
	width: 100px;
	height: 50px;
	border: solid 1px #000;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);

}
</style>
<div id="base_box">
<div id="inner_box"></div>
</div>


タグ:jquery
posted by lightbox at 2014-09-08 20:24 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年01月13日


IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol

IEは、やっと IE9 でまともに使えるようになったという事で、他のブラウザでは普通に使用できていました。
※ Google Chrome や Firefox では、アドレスバーに直接セットしても表示されます( IE は アドレスバーに長さ制限ある上、そもそも対応していない )



IE9 に関する公式の記述

以下の小さな画像は、その下のソースコードで表示されています。インターネット上の画像をこのような Base64 に変換するツールはこちらになります。
<img id="png_base64"> 
<script type="text/javascript"> 
document.getElementById("png_base64").src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAA3NCSVQICAjb4U/gAAAAYnpUWHRSYXcgcHJvZmlsZSB0eXBlIEFQUDEAAHicVcixDYAwDADB3lN4hHccHDIOQgFFQoCyf0EBDVee7O1so696j2vrRxNVVVXPkmuuaQFmXgZuGAkoXy38TEQNDyseBiAPSLYUyXpQ8HMAAAM2SURBVDiNfZRvTJtVFMZ/71vCJE1DIdQBrbhu3WbsnDEx7jVRMBgT/2OzzRgSjUswBovRRaMoGbgm6khcYMZCoIuaqAxMNqfgh7WdMfPDDHXBhLd2m7YrdVSUAW2poHbr8UNRQIjPx3Of55znnHvuVUSEdTH9KycHWFzg8aeptK7PkbU4E5B9D0g5sgO5FalEnrpPzgTWEpXlyr9NceIjvK/wFxjgHlfX1B/ZyxMHKoWfIyzCdfD8EXY/ibmsoPhHHLvIlu3cRsbAT9dMEw89N3XTznc6OxdzuVdffKH81Al7xL/diOUafA+pWUrLlm2nPC8fMlOxuiOHw+FwOFZGyuHQBmY/6CmoEBHJ/fkWAM1ut9/vn5ycXNteMpkMBoOFFG9XLZUsAhg5vncTr8c5FwpdPH++pqams7PT5/MNDQ2VlpYqiiIiJSUlqqoCn2yhUYXvznL7nSpA7wFHMWOfDoyOjs7NzQUCAbfb7XQ66+rqUqmUrusmk8nv91ssFkA7+D55+Pg9ALmgSzWyV0vMzACRSKS9vV3TtIKxtra2+vr6QCAAxONxIHFlRu7fKhYkk0IO7pdNSHDkx4kEEIvFWltba2trRaS5ubm4uBgwm83/ziwnIqc+l2pk4GgRhiKuQsVGRaQwfMBkMnV3d/f29mqaFo1GW1pacrmcoigul6sImJ5iA0xdVuRCmDonjzwa9fQ7qiqj0ajP5wuHw06nU9d1TdMGBwfHx8dX3eEuhQSE4irbbuYWO6e/YHxs5c4ajcZ0Om21WnVdX6U89y2/QN1d2G5UAZ71UAxez0qOwWDIZDINDQ1AR0fH8sGH3ajwzGuACvDwHrLIpbMAqprP5/P5fDKZtNlsZWVlfX19Ho+nqalpNp1mPs3xIUrg3gdXvCrP/j0Fw4u/Dw6PFGp4vd7C4WfDw4VI445tX1cj/YdXrKfIkZ4e4CsbshlpbwEwmhdyV5dSJ2ILL+17d+OS8TcPrxZn5rOXIj/I0S5xIJuZ3skV1y45/aV8E5Tdd8j1iB3ZinS9EQ6F5rPZVeJl5PNy8pjUW6UGsSNWpAJ54m7xD//vZ/Af6GMM9HODnccaqbKtS/kbZXYMZaJnrD4AAAAASUVORK5CYII%3D'; 
</script> 
data Protocol に関する Microsoft のドキュメント

▼ それによると、フォーマットは
data:[sMediaType;][sBase64Encoding;],sResourceData

▼ IE9 に関する抜粋
データ URI とは、Web ページのコンテキストにデータを直接埋め込む手段です。

最も一般的な例は、以下のような Web ページに埋め込まれた小さな画像です:

-------------------------------------------------
data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP
-------------------------------------------------

img 要素の src 属性に置くと、このテキストは、ページのマークアップに画像を効果的に埋め込みます。Internet Explorer には、Internet Explorer 8 においてデータ URI が導入されました。

Internet Explorer 9 では、開発者は script 要素の src 属性でデータ URI を使用できるようになりました。

さらに、データ URI のサイズの上限が、32 キロバイト (KB) から 4 ギガバイト (GB) (Internet Explorer 9) まで引き上げられました。
つまり、IE8 では画像のみに使用できて、かつ32K までの小さなファイルしか使え無かったという事です。他のブラウザは試しましたが、皆使えています。 この Base64 への変換ツールを二つ確認しています。一つはオンラインで実行可能です。 ★ Binary / Image File to Base64 Encoder / Translator もうひとつは、Firefox のアドオンです。 ★ Base64 Encoder また script 要素 でも利用できるので、alert("OK"); を実行する記述は以下のように書く事ができます Base64 => YWxlcnQoIk9LIik7 元の文字列 => alert("OK");
<script type="text/javascript" src="data:text/javascript;base64,YWxlcnQoIk9LIik7
"></script> 



タグ:IE9 IE
posted by lightbox at 2014-01-13 14:49 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2013年02月08日


CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い


pre {
	white-space: pre;
	white-space: pre-wrap;
/*	white-space: pre-line; */
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
}
PRE 要素内では、改行コードが改行として表現されます。しかし、white-space の pre-line を指定すると『連続する半角スペース・タブ・改行を、1つの半角スペースとして表示』するので、連続する二行の改行が存在する場合どうなるか・・・という事なんですが。

Google Chrome をメインに使っていたので

これで何が問題なのか気が付かなかったのですが、Google Chrome ですと、改行の数がそのままになって、Firefox だと、改行がなくなるようなのです。で、IE はと言うと、Google Chrome に近い結果なのですが、他のパターンだと Firefox と似ている・・・という良く解らない事実に遭遇してしまいました。

結果的に、それぞれレイアウトが違う

もともとは、pre 内の文字列を自動改行する為に使った CSS の一部だったのですが、全てのブラウザで確認しなかった為にかなり長い間放置していた事になります。

PRE で改行を含めて文字列を配置しておくと、自分にとってはいろいろいい事があるので、昔から使っていたのですが(自分で改行位置を決めていた)、スマホに対応するのに『自動改行』が必要になりました。で、インターネットで調べて Google Chrome でテストしてうまくいったのでそのまま・・・という事です。

※ DIV 内で改行を BR にまかせている場合は発生しないと思います。



posted by lightbox at 2013-02-08 23:27 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年12月04日


TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する



ヘッダー
ヘッダー
ヘッダー
左サイド
左サイド
左サイド
中央
中央
中央
中央
中央
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド

下部
下部
下部
ヘッダーと下部は通常の DIV です。その間に float:left でコンテンツエリアを作成しています。残りの右サイドには position:absolute で後から追加するといいと思います。

コンテンツエリア内に左サイド、中央、右サイドとして配置して、それぞれ float がleft、left、right と設定して横に並べています

※ 実際は、BODY に margin:0px を設定してキッチリとはめ込みます
<style>
.layout {
	border: solid 1px #404040;
}
.inner {
	margin: 6px;
}
</style>
<div
	class="layout"
	style='width:598px;height:100px;background-color:#e1e1e1;'>
	<div class="inner">
		ヘッダー<br>
		ヘッダー<br>
		ヘッダー<br>
	</div>
</div>

<div style='width:600px;background-color:#e2ffe2;float:left;'>

	<div class="layout" style='width:98px;background-color:#c8e8e8;float:left;'>
		<div class="inner">
			左サイド<br>
			左サイド<br>
			左サイド<br>
		</div>
	</div>

	<div class="layout" style='width:394px;background-color:#e0c0e0;float:left;'>
		<div class="inner">
			中央<br>
			中央<br>
			中央<br>
			中央<br>
			中央<br>
		</div>
	</div>

	<div class="layout" style='width:98px;background-color:#e0f0e0;float:right;'>
		<div class="inner">
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
			右サイド<br>
		</div>
	</div>

</div>

<br style='clear:both'>

<div class="layout" style='width:598px;background-color:#e1e1e1;'>
	<div class="inner">
		下部<br>
		下部<br>
		下部<br>
	</div>
</div>


posted by lightbox at 2011-12-04 00:27 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年12月02日


HTML : 画像を使ったボタンのバリエーション

ボタンに画像を使うには、3通り方法があります


1) BUTTON 要素 を使う
2) INPUT 要素の type="button" を使う
3) INPUT 要素の type="image" を使う

ポイント1

1) と 3) は、FORM 要素内で記述するとサーバーに送るボタンとして使用できます
2) は、FORM 要素内で記述されてもサーバーへは送られません

ポイント2

1) と 2) は、画像の定義方法が同じで、どちらもボタンとしての効果があります
3) は画像が表示されるだけですが、その他の画像に対するスタイルを定義できます
( サーバーへ送る時にクリックした座標が送られます )
3) の場合は、カーソルはポインタカーソルになりますが、ボタンでは矢印です

ポイント3

ボタンにテキストを指定する場合は、INPUT要素より BUTTON 要素のほうが容易です




以下の二つのボタンは、BUTTON 要素と INPUT 要素です
( ボタン画像よりエリアとして縦横 5px 大きく設定しています )





ボタン画像は、輪郭が表現されている場合が多いので、5px 大きく設定しますが、
以下は、ブラウザが自動的に付加する輪郭を省く場合の記述方法で、開始位置
を -1px として、縦横を -2px します。元の画像から考えると +3px です
( これは、IE8 でしかうまくいかないので使わないほうがいいです )



さらに、ボタン画像に含まれる輪郭を消去して使うには、開始位置をさらに
マイナスにして、サイズを調整します。この場合は、開始位置が -2px で、
画像の元のサイズからすると +1px です
( これがたぶん全てのブラウザでうまくいきそうです )





上はボタン画像では無く一般の画像です。これをボタンとするには、テキストの
色もさらに設定する必要があります

以下の3つは開始位置とサイズを変化させたバリエーションですが、通常画像の為、
大きな違いはありません。逆に画像にタイル画像を使うと繰り返して表示されるの
で小さな画像で背景パターンを使う事もできます

※ 少なくとも IE8 と その他のブラウザと仕様が違います。普通の画像の場合は、
幅を +5px ではなく、+4px が正解のようです







以下は、INPUT 要素の type="image" を使用しています。この場合はボタンと言うより、
「画像を使って(クリックした位置も)サーバーにデータを送信する」為に使います。
ですから、自動的にボタンとしての効果も無いので、クリックできる事を明示する為に
カーソルがポインタカーソルに変化するようになっています




<pre>
<img src="http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png" onclick='alert("通常のボタン用画像です")' />

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png);width:185px;height:35px;' onclick='alert("button要素 : ボタンサイズより縦横共に5px大きい設定で、画像全体とボタン効果を表現できます")' >実行</button>

<input type="button" style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png);width:185px;height:35px;' onclick='alert("input要素 : ボタンサイズより縦横共に5px大きい設定で、画像全体とボタン効果を表現できます")' value="実行" />

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png) -1px -1px;width:183px;height:33px; ' onclick='alert("ボタンサイズより縦横共に3px大きい設定で、画像全体と一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-1px)をスタイルで設定する必要があります")'>実行</button>

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png) -2px -2px;width:181px;height:31px;' onclick='alert("ボタンサイズより縦横共に1px大きい設定で、画像の輪郭を1pxづつ省いて全一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-2px)をスタイルで設定する必要があります")'>実行</button>

<img src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" onclick='alert("一般画像をボタン用として利用します")' />

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png);width:210px;height:59px;color:#ffffff' onclick='alert("ボタンサイズより縦横共に3px大きい設定で、画像全体と一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-1px)をスタイルで設定する必要があります")'>実行</button>

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png) -1px -1px;width:209px;height:57px;color:#ffffff'>実行</button>

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png) -2px -2px;width:207px;height:55px;color:#ffffff' onclick='alert("ボタンサイズより縦横共に1px大きい設定で、画像の輪郭を1pxづつ省いて全一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-2px)をスタイルで設定する必要があります")'>実行</button>

<input type="image" src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" onclick='alert("input 要素で画像をボタンとして利用します\nこの方法では、テキストを利用できませんが、クリックした位置をサーバーに送る事ができます\nまた、ボタンが押された時の効果は利用できません")' />

<input type="image" src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" style='border:solid 2px #c0c0c0' onclick='alert("input 要素で画像をボタンとして利用します\n普通の画像と同じようにスタイルで見え方を変更できます\nここでは、輪郭に実線を使って太さと色指定をしています")' />
</pre>
BUTTON 要素の中に IMG 要素とテキストを記述すると以下のようにもできます

背景用のタイル画像でボタンを表現します

▼ 元画像





posted by lightbox at 2011-12-02 14:06 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年08月19日


Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する

list-style-image を使用すると、LI 要素の前に付くマークに任意の画像を指定できますが、フォントのサイズが変わっても、画像はそのままですからバランスが悪い場合があります。

Picasa は、URL にサイズ指定できるので、以下のような運用が可能になります。

  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
  • あああああああああああああああ
こちらは、元の画像です



ここをクリックすると、以下のコードを編集しながらテストする事ができます
<style type="text/css">
.my_li li {
	font-size: 16px;
	list-style-image:url(http://lh4.googleusercontent.com/-K5VtJ3GdFXM/Tk2_0St9H3I/AAAAAAAADSI/Cbp0frLPgyU/s12/li_img.gif)
}
.my_li2 li {
	font-size: 26px;
	list-style-image:url(http://lh4.googleusercontent.com/-K5VtJ3GdFXM/Tk2_0St9H3I/AAAAAAAADSI/Cbp0frLPgyU/s18/li_img.gif)
}
</style>
<ul class="my_li">
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
</ul>
<ul class="my_li2">
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
</ul>



posted by lightbox at 2011-08-19 10:55 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年05月11日


WEB フォントの記述方法の考察

WOFF のほうがファイルサイズが小さく制限も無いようです( IE11 でも全ての ttf が表示される事は無い )

変換は、ttf to woff converter

IE9 より WEBフォントに WOFF と TrueType フォントがサポートされますが、IE8 以前でも、Embedded OpenType (EOT) でサポートされていた為、以下のような
記述が利用されているようです。
<style media="screen" type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.eot?") format("eot"),url("Maskenball04.ttf") format("truetype");
}
</style>

この、.eot の ? は、IEのバグのような仕様の為、) 以降の文字列が URL に追加されて呼び出される為、404のエラーになる為このような記述がされています。


※ ですから、実際は # にしたほうがスマートだとは思いますが。


また、format("eot") をつけている理由は、IE 以外で読み込む時に、format("eot") が無いと、使え無いフォーマットなのに読み込んでしまうからです。format("eot") を書く事によって、Firefox 等で、無視するようです。

しかし、IE9 になると、eot も、その他のフォーマットも対応する事になるので、最初に読み込めたファイルが有効になると思われるので、将来的にはあまり良く無い印象をうけます。そこで、どうせ IE だけの都合ですから、以下のように書くといいかもしれません。

2011/5/11 : IE9 で ttf が使えていません。[if lte IE 9] にする必要があります(埋め込み許可ビットというヘッダ情報が必要なようです)
<style media="screen" type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.ttf") format("truetype");
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
@font-face {
	font-family:"Maskenball04";
	src: url("Maskenball04.eot");
}
</style>
<![endif]-->

関連する記事

2014年7月7日現在。WEBフォントの実際

WEB フォントをクロスドメインで利用する




posted by lightbox at 2011-05-11 12:11 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年03月11日


これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整

本当は他に方法あるのでしょうが、ブログのリンクでしか使わないので
一般的にも簡単なほうがいいと思ったので。

テストは、リアルタイムHTML で実行してみて下さい。
  • 1行目
  • 2行目
  • 3行目
  • 1行目
  • 2行目
  • 3行目
  • 1行目

  • 2行目

  • 3行目

  • 1行目

  • 2行目

  • 3行目

<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
</ul>

<ul>
<li>1行目<br /></li>
<li>2行目<br /></li>
<li>3行目<br /></li>
</ul>

<ul>
<li>1行目<br /><br /></li>
<li>2行目<br /><br /></li>
<li>3行目<br /><br /></li>
</ul>

<ul>
<li style='line-height:0px'>1行目<br /><br style='line-height:25px'/></li>
<li style='line-height:0px'>2行目<br /><br style='line-height:25px'/></li>
<li style='line-height:0px'>3行目<br /><br style='line-height:25px'/></li>
</ul>

ただ、ブラウザによって多少高さが違うようなんですが、まあもともと
かなり違うものですからデザイナでは無いのでよしとしてもいいと思い
ます。


※ Opera はこのページでうまくいかないですね。
( CSS の important がたぶん邪魔しています )


posted by lightbox at 2011-03-11 09:55 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2011年01月09日


Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。

IE では昔から 0、1、yes、no で動作する仕様になっています。
frameBorder Property (FRAME, FRAMESET, IFRAME, ...)

Mozilla では、仕様には無いようですが、0、1、yes、no で動作します
iframe - MDC Doc Center

以下に frameborder="yes" のIFRAME があります
Google Chrome ではframeborder="1" で動作しますが、少し気持ち悪いです。
と言うのも、frameborder に文字列が指定されると、frameborder="0" 扱いになって
frameborder が数字で(例えば "9" とかで)仕様外だと、frameborder="1" 扱いになります。

Firefox では、仕様外は全て frameborder="1" 扱いです。

Opera では、frameborder を指定しない場合と、frameborder="1" でのみ動作します。
それ以外は常に境界線は引かれません。つまり、仕様外は全て frameborder="0" 扱いです。
<IFRAME
	src="http://winofsql.jp"
	frameborder="yes"
	scrolling="yes"
	width="600"
	height="100"
></IFRAME>

以下は frameborder="1"、scrolling="yes" です


タグ:トラブル
posted by lightbox at 2011-01-09 12:12 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり