読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

スタイルを変更する

css

jQueryObject.css('プロパティ','値');

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="styles.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>


《script.js》

$(function(){
	$('#div1').css('border', '3px solid red'); //3pxの赤い線がつく
	$('#div2').css('background', 'pink'); //背景色がピンクになる
	$('#div3').css('background', 'green'); //背景色が緑になる
	$('#div3').css('opacity', 0.5); //半透明になる
});


スタイル変更の優先順位
<style>
	#somediv p{ color:red; }
	.somediv p{ color:blue; }
</style>
<div id="somediv" class="somediv">
	<p>赤か青か</p>
</div>
スタイルをまとめて指定
$('#somediv').css({
	color: 'red',
	display: 'block',
	top: 120,
	left:100
});
  • css()のなか全体を{}で囲み、プロパティと値のペアを複数「,」で区切っていれます
  • {}で囲まれたもののことをオブジェクトといい、一連の値をまとめて渡すことができます

show/hide

jQueryObject.show();
jQueryObject.hide();


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="styles.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">最初は非表示になっているdiv</div>
<div id="div2">最初は表示されているdiv</div>
</body>
</html>


《style.css

#div1{ display: none;}
#div2{ display: block;}


《script.js》

$(function(){
	$('#div1').show();
	$('#div2').hide();
});


  • 「#div1」は、「display: none」で非表示になっていますが、ページの読み込みが完了した時点で「show()」としているため、ブラウザでは表示されています
  • 「#div2」は、「display: block」で表示になっていますが、ページの読み込みが完了した時点で「hide()」としているため、ブラウザでは表示されません


CSSメソッドの場合

jQueryObject.css('display', 'block'); //show()とほぼ同じ
jQueryObject.css('display', 'none'); //hide()とほぼ同じ
アニメーションする「show/hide」
$(function(){
	$('#div1').show(500); //0.5秒で表示させるアニメーション
	$('#div2').hide(500); //0.5秒で非表示にするアニメーション
});

width/height

jQueryObject.width( 幅 );
jQueryObject.height( 高さ );


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" href="styles.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">width</div>
<div id="div2">height</div>
</body>
</html>


《style.css

div{
	background: pink;
	margin: 10px;
}


《script.js》

$(function(){
	$('#div1').width(300);
	$('#div2').height(300);
});




CSSメソッドの場合

$(function(){
	$('#div1').css('width', 300);
	$('#div2').css('height', 300);
});