ワクガンス　|　CSSの覚書

1行で文字を左右に分ける

	<div style="width:500px;background-color:#ceedc5">
		<div style="float:left" >左の文字</div>
		<div style="text-align:right">右の文字</div>
	</div>

サンプル

ブロックレベルで中央揃え

ブロックレベルで中央揃えするサンプルコード

	<div style="margin-left : auto ; margin-right : auto ;" >TEST</div>

中央揃えのデモ

TEST

位置指定 | position

CSS	説明/サンプル
position:relative	topやleftは親要素の左上を基準にする。相対位置配置
position:static	top,left,bottom,rightを無視する。親要素の左上に固定される。
position:absolute	topやleftはページ全体の左上を基準にする。絶対位置配置
position:fixed	topやleftはページ全体の左上を基準にする。またスクロール固定される。スクロール固定

注意：top,leftがbottom:rightより優先される

bottomとrightで指定する場合、topとleftを除去する必要がある。

jQueryで右下にスクロール固定で配置する例

	$('#xxx').css({
		'top':'',
		'left':'',
		'position':'fixed',
		'bottom':'4px',
		'right':'4px',
		'z-index':'2147483647',
	});

ボタンに画像を貼り付ける

	<style>
	#sample4{
		border:0px;
		width:15px;
		height:15px;
		background-image: url('img/sec1-4-off.png') ;"
	}

	#sample4:hover{
	    border:0px;
		width:15px;
		height:15px;
		background-image: url('img/sec1-4-on.png') ;"
	}
	</style>
	<input type="button" id="sample4" value="" />

サンプル→

要素を重ねる

「position:relative;」と「position:absolute;」の組み合わせで、重ね合わせを実現できる。
また要素は2重のくくりとなる。

CSSソースコード

	#box_b2{
		width:500px;height:25px;
		background-color:#4a88e3;
		position:relative;
		top:20px;
		left:30px;
		
	}
	#box_b3{
		width:500px;height:50px;
		background-color:#399f26;
		position:absolute;
	}

HTMLソースコード

	<div id="box_b2"><div id="box_b3"> いろはにほ </div></div>

サンプル

ul要素リストマーカーの代わりにラベルを表示する

ul要素に日付などのラベルをリストマーカーのように表示する。

ソースコード

	<style>
		#list_label{
			list-style-type:none;
		}
		#list_label div{
			float:left;
			width:120px;
		}
	</style>

	<ul id="list_label">
		<li><div>ラベルA</div>アザラシの日</li>
		<li><div>2015-9-21</div>敬老の日</li>
		<li><div>2015-9-23</div>秋分の日</li>
		<li><div>2015-10-12</div>体育の日</li>
		<li><div>2015-11-3</div>文化の日</li>
		<li><div>2015-11-23</div>勤労感謝の日</li>
		<li><div>ラベルB</div>テストの日</li>
	</ul>

サンプル

ラベルA
アザラシの日
2015-9-21
敬老の日
2015-9-23
秋分の日
2015-10-12
体育の日
2015-11-3
文化の日
2015-11-23
勤労感謝の日
ラベルB
テストの日

ブロックの左寄せ、中央揃え、右寄せ

基本的にブロック要素における、左寄せ、中央揃え、右寄せは、widthで幅を指定したから左右のmarginを自動(auto)にする。

ブロック要素の左寄せ

	width:○○px;
	margin-right:auto;

ブロック要素の中央揃え

	width:○○px;
	margin-left:auto;
	margin-right:auto;

ブロック要素の右寄せ

	width:○○px;
	margin-left:auto;

サンプル

左寄せ

中央揃え

左寄せ

ブラウザのサイズ縮小に対応

ブラウザのサイズを小さくしたときは、各要素を改行させたい場合、widthの代わりに、max-widthを用いるとよい。

例：縮小に対応したブロック要素の右寄せ

	max-width:○○px;
	margin-left:auto;

2013-9-3 | 2017-2-22

CSSだけで画面右下にスクロール固定

右下にスクロール固定するCSS

	position:fixed;
	bottom:0px; 
	right:0px;
	z-index:2;

ソースコード

	<html lang="ja">
		<head>
			<meta charset="utf-8">
			<style>
				#test{
					position: fixed;
					bottom:0px; 
					right:0px;
					z-index: 2;
				}
			</style>
		</head>
		<body>
			<div style="height:3000px;background-color:#8fbcac">
				<div>画面を下にスクロールしてみてください。</div>
				<div id="test" style="width:100px;margin-left:auto;">いろはにほへとちりぬるをわかよたれそつねならむ</div>
				<div>うゐのおくやまけふこえてあさきゆめみしゑひもせす</div>
			</div>
		</body>
	</html>

サンプル
参考：position:fixed; コンテンツの固定表示

リストの横並び

サンプル

TEST1

CSS

	.ul_side_by_side{
		padding-left: 0px;
		list-style-type: none;
	}
	.ul_side_by_side li{
		float:left;
		margin-right: 5px;
	}

HTML

	<ul class="ul_side_by_side">
	<li><a href="#" >TEST1</a></li>
	<li><input type="button" value="test2" /></li>
	<li><input type="button" value="test3" /></li>
	</ul>
	<div style="clear:both"></div>

右隅に表示

「float:right」を指定するのみ。

サンプル

×閉じる

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす

閑さや岩にしみ入る蝉の声

五月雨をあつめて早し最上川

人民の人民による人民のための政治

ソースコード

	<div>
		<div style="float:right;>×閉じる</div>
		いろはにほへとちりぬるをわかよたれそつねならむ
		うゐのおくやまけふこえてあさきゆめみしゑひもせす
	</div>