ワクガンス | CSSの覚書

表の列にCSSを適用する | td:nth-of-type

CSS2.1以降から利用可能。

xample

ID	名称	数値
1	neko	101
2	yagi	102
3	kani	103
4	same	104

css source

	#sec2-1_tbl tbody tr td:nth-of-type(2) {
			color:#eb6101;
			font-weight:bold;
	}

html source

	<table id="sec2-1_tbl">
		<thead><tr><td>ID</td><td>名称</td><td>数値</td></tr></thead>
		<tbody>
			<tr><td>1</td><td>neko</td><td>101</td></tr>
			<tr><td>2</td><td>yagi</td><td>102</td></tr>
			<tr><td>3</td><td>kani</td><td>103</td></tr>
			<tr><td>4</td><td>same</td><td>104</td></tr>
		</tbody>
	</table>

z-indexの最小値と最大値

z-indexの範囲は32bitのint型と同じ数値範囲。

z-indexの最小値～最大値

-2147483648 ～ 2147483647

ちなみにデフォルトは0

参考参考(海外サイト)

block,inline,inline-blockの違い

displayのプロパティ、block,inline,inline-blockの違いを表にまとめる。

プロパティ	width,height	margin	padding	text-align	vertical-align	デフォルト横サイズ	積まれ方	主なタグと補足
block	可能	可能	可能	子要素のインラインには適用	不可	横いっぱいに広がる	縦に積まれていく	div,h1,p,ul,table
inline	不可	左右のみ	左右のみ	親ブロックで指定すると適用	可能	文章の長さなど、内部要素の幅に合わせる	横に積まれていく	a,span,strong,label
inline-block	可能	可能	可能	親ブロックで指定すると適用	可能	文章の長さなど、内部要素の幅に合わせる	横に積まれていく	IE7以下では仕様が異なる

参考:たねっぱ

自動改行させない | white-space:nowrap

white-space:nowrap

「white-space:nowrap」を指定すると、要素内で改行をしない。
widthで横幅を指定してもはみ出す。改行コードは半角スペースに変換される。

	<div style="background-color:#e6cc80;width:300px;white-space:nowrap;">
		色はにほへど 散りぬるを 我が世たれぞ 常ならむ
		有為の奥山 今日越えて
	</div>

色はにほへど散りぬるを我が世たれぞ常ならむ有為の奥山今日越えて

white-space:normal(もしくは未指定）

white-spaceのデフォルトはnormalである。 widthで指定した幅に合わせて、文字列は改行される。

	<div style="background-color:#e6cc80;width:300px;white-space:normal;">
		色はにほへど 散りぬるを 我が世たれぞ 常ならむ
		有為の奥山 今日越えて
	</div>

色はにほへど散りぬるを我が世たれぞ常ならむ有為の奥山今日越えて

white-space:pre

	<div style="background-color:#e6cc80;width:300px;white-space:pre;">
		色はにほへど 散りぬるを 我が世たれぞ 常ならむ
		有為の奥山 今日越えて
	</div>

<pre>タグと同じく、タブや改行がそのまま表示される。

		色はにほへど 散りぬるを 我が世たれぞ 常ならむ
		有為の奥山 今日越えて
	

参考:クイックリファレンス

パネルの活用サンプル

bootstrapパネルの活用サンプル一覧

boostrap-select | リッチなセレクトボックス

サンプル公式サイト

bootstrapのセレクトボックスは地味であるが、 boostrap-select.jsを組み込むとセレクトボックスの見た目がリッチになる。

一覧の検索機能を付加できる。
他にも全選択機能や、カテゴリ別に分ける機能など備えている。

HTML


	<!DOCTYPE html>
	<html lang="ja">
	<head>
		<meta charset="UTF-8">
	
		<title>サンプル1</title>
		
		<link href="jquery-ui.min.css" rel="stylesheet">
		<link href="bootstrap.min.css" rel="stylesheet">
		<link href="bootstrap-select.min.css" rel="stylesheet">
	
		<script src="jquery-1.11.1.min.js"></script>
		<script src="jquery-ui.min.js"></script>
		<script src="bootstrap.min.js"></script>
		<script src="bootstrap-select.min.js"></script>
	
	</head>
	<body>
	<div class="container">
	
	<h2>サンプル</h2>
	<select class="selectpicker" data-live-search="true" title="天然記念物ヤドカリの選択">
		<option>ムラサキオカヤドカリ</option>
		<option>オカヤドカリ</option>
		<option>ナキオカヤドカリ</option>
		<option>サキシマオカヤドカリ</option>
		<option>オオナキオカヤドカリ</option>
		<option>コムラサキオカヤドカリ</option>
	</select>
	<hr>
	
	<select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ...">
		<option>Hot Dog, Fries and a Soda</option>
		<option>Burger, Shake and a Smile</option>
		<option>Sugar, Spice and all things nice</option>
		<option>Baby Back Ribs</option>
		<option>A really really long option made to illustrate an issue with the live search in an inline form</option>
	</select>
	<hr>
	
	</div><!-- content -->
	</body>
	</html>

2016-9-26

指定TR要素に間隔仕切りを入れる

指定のTR要素に間隔仕切りを入れる場合、border-topを使うか、空行を追加するしかないようである。
margin-top,heightなどは効かない。

サンプル

ソースコード


	<style>
	.new_line{
		border-top: 8px #d5d5d5 double;
	}
	</style>
	
	
	<table class="table">
		<thead>
			<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
		</thead>
		<tbody>
			<tr><td>1</td><td>neko</td><td>猫</td></tr>
			<tr><td>2</td><td>yagi</td><td>山羊</td><td>草食</td></tr>
			<tr><td>3</td><td>same</td><td>鮫</td></tr>
			<tr><td>4</td><td>wasi</td><td>鷲</td></tr>
			<tr class="new_line"><td>5</td><td>goki</td><td>御器</td></tr>
	
		</tbody>
	</table>

2016-10-5

TD要素を横並び以外の並び構造に変更する

TR要素やTD要素のdisplayをblockやinline-blockに変えることことにより、並び構造を変更することができる。

サンプル

ソースコード


	<style>
		tr{
			display:block;
			width:160px;
			background-color:#f8dac7;
			border: 1px #d1d1d1 solid;
			clear:both;
			
		}
		tr td:nth-child(1){
			color:red;
			display:inline-block;
			float:left;
			width:80px;
			height:80px;
			background-color:#f5cecb;
		}
		tr td:nth-child(2){
			color:blue;
			display:inline-block;
			width:70px;
			height:40px;
			background-color:#c5d8f5;
		}
		tr td:nth-child(3){
			color:green;
			display:inline-block;
			width:40px;
			height:40px;
			background-color:#c9f5e0;
		}
	</style>
	
	
	<table>
		<thead>
			<tr><th>id</th><th>コード</th><th>名前</th><th>備考</th></tr>
		</thead>
		<tbody>
			<tr id="a0"><td id="a1">1</td><td id="a1">neko</td><td>猫</td id="a1"></tr>
			<tr><td>2</td><td>yagi</td><td>山羊</td></tr>
			<tr><td>3</td><td>same</td><td>鮫</td></tr>
			<tr><td>4</td><td>wasi</td><td>鷲</td></tr>
			<tr><td>5</td><td>goki</td><td>御器</td></tr>
	
		</tbody>
	</table>

2016-10-6

bootsrapの次にjquery.uiを読み込む

jQuery.uiダイアログの閉じるアイコンに×印が表示されないことがある。
この場合、bootsrap.cssのあとにjquery.ui.cssを読み込むことで解決できる。

2016-10-28

ボタンを画像化する

サンプル

ソースコード


	<style>
	#sec2-10a1{
		border: 0px;
		width:15px;
		height:15px;
		background: url(img/detail_toggle_btn_off.png) left top no-repeat;
	}
	#sec2-10a1:hover{
		cursor: pointer;
		opacity:0.7;
	}
	</style>

	<button id="sec2-10a1" type="button"></button>

参考：WEBデザイナーズNEXT

2017-1-13

角丸ボタン


	<style>
	.btn-success2 {
		font-size:1.2em;
		font-weight:bold;
		text-decoration:none;
		border: 0px;
		display:block;
		text-align:center;
		padding:2px 5px;
		color:#fff;
		background-color:#19a15f;
		border-radius:5px;
		box-shadow:2px 2px #555;
	}
	.btn-success2:disabled{
		background-color:#c2f5dd;
	}
	</style>
	
	<input type="button" value="DEMO" class="btn-success2" />

2019-1-31

ボタン画像はデータURLスキームにする

サンプル

ソースコード


	<style>
	#sec2-11a1{
		border: 0px;
		width:15px;
		height:15px;
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABGdBTUEAAK/INwWK6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACOSURBVDhPY/wPBAxkAiYoTRYYbJqXpDMwPL4A5eAG2DXfO87A0GLIwLAohYHh82uoICbA7+yjcxkYalUZGPb0MTD8+QUVRADCfv7+kYFhdTEDwzR/DAMIa2bnYWAI7WVgyNrIwMDCBhWEAPyarZOBfr/NwOBShKERDEApDAMsTvv//9F5KAc3GHnJk4EBAD0vWo13a+ePAAAAAElFTkSuQmCC) left top no-repeat;
	}
	#sec2-11a1:hover{
		cursor: pointer;
		opacity:0.7;
	}
	</style>

	<button id="sec2-11a1" type="button"></button>

2017-1-13

Boostrapのボタンを画像ボタン化してみる

サンプル

TEST

ソースコード


	<style>
	.sec2-12a1{
		margin:0px;
		padding:0px;
		border: 0px;
		width:15px;
		height:15px;
		background: url(img/detail_toggle_btn_off.png) left top no-repeat;
	}
	.sec2-12a1:hover{
		cursor: pointer;
		opacity:0.7;
 	} 
	</style>

	<button  type="button" class="btn btn-success btn-lg sec2-12a1"></button>
	<input type="button" class="btn btn-success sec2-12a1" value="TEST" />
	<a href="#" class="btn btn-success sec2-12a1">TEST</a>

2017-1-23

リンクを画像ボタン化する

サンプル

ソースコード


	<style>
	#sec2-13a1{
		display:block;
		border: 0px;
		width:15px;
		height:15px;
		background: url(img/detail_toggle_btn_off.png) left top no-repeat;
	}
	#sec2-13a1:hover{
		cursor: pointer;
		opacity:0.7;
	}
	</style>

	<a href="" id="sec2-13a1"></a>

2017-1-24

背景は画像、表記は文字列のボタン

サンプル

input要素,button要素,a要素（アンカー）に対してCSSを適用する。
背景画像はwidth,heightで伸縮調整ができる。

アンカー

元サイズの背景画像

ソースコード


	<style>
	.sec2-14a1{
		display:block;
		text-align:center;
		border: 0px;
		width:225px;
		height:40px;
		background: url(img/btn_back.png) left top no-repeat;
		-moz-background-size:100% 100%;
		background-size:100% 100%;
		color:white;
		text-shadow: 1px 2px 3px #808080; 
	}
	a.sec2-14a1{
		padding-top:7px;
		color:white;
	}
	.sec2-14a1:hover{
		cursor: pointer;
		opacity:0.7;
	}
	</style>

	<input type="button" class="sec2-14a1" value="input" />
	<button class="sec2-14a1" type="button">button</button>
	<a href="" class="sec2-14a1" >アンカー</a>

2017-1-25

CSSの覚書

表の列にCSSを適用する | td:nth-of-type

xample

css source

html source

z-indexの最小値と最大値

block,inline,inline-blockの違い

自動改行させない | white-space:nowrap

パネルの活用サンプル

boostrap-select | リッチなセレクトボックス

指定TR要素に間隔仕切りを入れる

TD要素を横並び以外の並び構造に変更する

bootsrapの次にjquery.uiを読み込む

ボタンを画像化する

角丸ボタン

ボタン画像はデータURLスキームにする

Boostrapのボタンを画像ボタン化してみる

リンクを画像ボタン化する

背景は画像、表記は文字列のボタン

xxx