WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

復習

自分なりに調べて答えを出してみました。問題はこちら

d.hatena.ne.jp

 

課題1

 

<script>
$(function(){
$('.test').css({'color':'yellowgreen','font-size':'36px','font-weight':'bold'});
});
</script>

<body>
<div class="test">
<p>これはdiv要素の子要素</p>
</div>
<p>これはp要素</p>
</body>

 

 

課題2

 

<script>
$(function(){
$('[name=demo]').css({'color':'#ff8048','font-weight':'bold'});
});
</script>

<body>
<div name="test">
<p>これはname属性testの子要素。</p>
</div>
<div name="demo">
<p>これはname属性demoの子要素。</p>
</div>
</body>

 

 

課題3

 

<script>
$(function(){
$('#test p').css('color','red');
});
</script>

<body>
<!-- div要素のid属性”test”の子要素に対してのみ、赤色のスタイルが設定される -->
<div id="test">
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
</div>
</body>

 

 

課題4

 

<script>
$(function(){
$('.demo').css('color','red');
});
</script>

<body>
<div>
<!-- .testと.demoが両方指定されている箇所に対してのみ、赤色のスタイルが設定される -->
<div class="test demo">これはdiv要素の子要素(クラス名:test、demo)</div>
<p class="test">これはdiv要素の子要素(クラス名:test)</p>
<div class="demo test">これはdiv要素の子要素(クラス名:demo、test)</div>
<p class="test">これはdiv要素の子要素(クラス名:test)</p>
</div>
</body>

 

クラス名の後ろにに半角スペースを開けるとクラス名をもうひとつ指定できる。

この場合クラス名「test」と「demo」両方有しているので他の要素に使われていないクラス名「demo」を使用。

 

 

課題5

 

<script>
$(function(){
$('p:even').css('color','red');
});
</script>

<body>
<div>
<!-- p要素の偶数番目の要素に対してのみ、赤色のスタイルが設定される -->
<p>0番目のp要素</p>
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
</div>
</body>

 

:evenはインデックス(0から始まる)が偶数番目の要素を指定。

 

 

課題6

 

<script>
$(function(){
$('p:odd').css('color','red');
});
</script>

<body>
<div>
<!-- p要素の奇数番目の要素に対してのみ、赤色のスタイルが設定される -->
<p>0番目のp要素</p>
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
</div>
</body>

:oddはインデックス(0から始まる)が奇数番目の要素を指定。

 

 

課題7

 

<script>
$(function(){
$('p:first').css('color','red');
});
</script>

<body>
<div>
<!-- p要素の一番最初の要素に対してのみ、赤色のスタイルが設定される -->
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
<p>6番目のp要素</p>
</div>
</body>

CSSセレクターではfirst-child擬似クラスがあるがQueryの独自セレクタ:firstを使用する。

 

 

課題8

 

<script>
$(function(){
$('p:last').css('color','red');
});
</script>

<body>
<div>
<!-- p要素の一番最後の要素に対してのみ、赤色のスタイルが設定される -->
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
<p>6番目のp要素</p>
</div>
</body>

 

 

課題9

 

<script>
$(function(){
$('#firstLine').text('最低限使うものだけ覚える!')
.css({'font-weight':'bold','color':'red'});
});
</script>

<body>
<div id="firstLine">行く川のながれは絶えずして、しかも本の水にあらず。</div>
<div id="secondLine">よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。</div>
</body>

 

テキストを変更する場合は$(変更する要素).text('変更後のテキスト')となる。

 

 

課題10

 

<script>
$(function(){
$('#secondLine').before('行く川のながれは絶えずして、しかも本の水にあらず。');
$('#thirdLine').after('玉しきの都の中にむねをならべいらかをおらそへる、たかきいやしき人の<br>すまひは、代々を經て盡きせぬものなれど、これをまことかと尋ぬれば、<br>昔ありし家はまれなり。');
$('*').css('color','blue');
});
</script>

<body>
<div id="secondLine">よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。</div>
<div id="thirdLine">世の中にある人とすみかと、またかくの如し。</div>
</body>

 

.before.afterは要素の前、後にHTMLを挿入する。

*(アスタリスク)はユニバーサルセレクター(全ての要素を指定する)

処理する内容の中のテキストは改行<br>が使用できる。

 

 

課題11

 

<script>
$(function(){
$('#secondLine').css({'background':'yellowgreen','padding':'20px','color':'#FFF','font-weight':'bold'});
$('*').css({'width':'500px'});
});
</script>

<body>
<div id="firstLine">大抵のイズムとか主義とかいうものは無数の事実を几帳面な男が束にして頭の抽出へ入れやすいように拵えてくれたものである。</div>
<div id="secondLine">一纏めにきちりと片付いている代りには、出すのが臆劫になったり、解くのに手数がかかったりするので、いざという場合には間に合わない事が多い。</div>
</body>

 

 

課題12

 

<script>
$(function(){
$('#addText').text('文字列を要素に追加')
.css({'font-size':'24px','color':'red'});
});
</script>

<body>
<p id="addText"></p>
</body>

 

 

課題13

 

 

 

課題14

 

<script>
$(function(){
$('#heading1').prepend('極意:');
});
</script>

<body>
<h1 id="heading1">最低限使うものだけ覚える!</h1>
</body>

 

.prepend要素内の先頭にHTMLを挿入する。

 

 

課題15

 

<script>
$(function(){
$('#heading1').append('極意:');
});
</script>

<body>
<h1 id="heading1">最低限使うものだけ覚える!</h1>
</body>

 

.appendは要素内の最後にHTMLを取得する。

 

 

課題16

 

<script>
$(function(){
$('#heading1').before('極意:');
});
</script>

<body>
<h1 id="heading1">最低限使うものだけ覚える!</h1>
</body>

 

 

課題17

 

<script>
$(function(){
$('#heading1').after('極意:');
});
</script>

<body>
<h1 id="heading1">最低限使うものだけ覚える!</h1>
</body>

 

課題18

 

 

<script>
$(function(){
$('p:first').empty();
});
</script>

<body>
<div id="point">
<p>1.どの箇所に対して</p>
<p>2.何をさせる</p>
<p>3.どのタイミングで?</p>
</div>
</body>

 

.empty()は要素の子要素を削除する。(各要素の子要素)

CSS3のセレクター:emptyとは別

他に.remove()でもできる。(全ての要素)

 

 

課題19

 

<script>
$(function(){
$('#click_btn').click(function(){
alert('クリックされました');
});
});
</script>

<body>
<p><button id="click_btn">ここをクリック</button></p>
</body>

 

 

課題20

 

<script>
$(function(){
$('#click_btn').hover(function(){
$('#description').css({'color':'red'});
},function(){
$('#description').css({'color':'#000'});
});
});
</script>

<body>
<p><button id="click_btn">ここをマウスオーバーする</button></p>
<p id="description">マウスが上にのったら赤文字、上から外れたら黒文字</p>
</body>

 

 

課題21

 

<style>
#show_area1 {
width: 300px;
height: 300px;
background: salmon;
display: none;
}
#show_area2 {
width: 300px;
height: 300px;
background: gold;
display: none;
}
#show_area3 {
width: 300px;
height: 300px;
background: mediumseagreen;
display: none;
}
</style>

<script>
$(function(){
$('#show_area1').show('fast');
$('#show_area2').show('slow');
$('#show_area3').show(5000);
});
</script>

<body>
<div id="show_area1"></div>
<div id="show_area2">’slow’</div>
<div id="show_area3">5秒</div>
</body>

 

showはdisplay:noneの状態のHTML要素を徐々に表示する。

アニメーションのスピードは「slow」「fast」、または

ミリ秒(1000=1秒)で指定する。

$( セレクター).show(スピード,コールバック関数);

コールバック関数で指定した命令は処理が終わった後に関数を呼び出す。

 

 

 

課題22

 

<style>
#hide_area1 {
width: 300px;
height: 300px;
background: salmon;
}
#hide_area2 {
width: 300px;
height: 300px;
background: gold;
}
#hide_area3 {
width: 300px;
height: 300px;
background: mediumseagreen;
}
</style>

<script>
$(function(){
$('#hide_area1').hide('fast');
$('#hide_area2').hide('slow');
$('#hide_area3').hide(10000);
});
</script>

<body>
<div id="hide_area1"></div>
<div id="hide_area2">’slow’</div>
<div id="hide_area3">10秒</div>
</body>

 

hideは表示状態のHTML要素を徐々に非表示(display:none)にする。

 

 

課題23

 

<style>
#fadeIn_area1 {
width: 300px;
height: 300px;
background: salmon;
display: none;
}
#fadeIn_area2 {
width: 300px;
height: 300px;
background: gold;
display: none;
}
#fadeIn_area3 {
width: 300px;
height: 300px;
background: mediumseagreen;
display: none;
}
</style>

<script>
$(function(){
$('#fadeIn_area1').fadeIn('fast');
$('#fadeIn_area2').fadeIn('slow');
$('#fadeIn_area3').fadeIn(5000);
});
</script>

<body>
<div id="fadeIn_area1"></div>
<div id="fadeIn_area2">’slow’</div>
<div id="fadeIn_area3">5秒</div>
</body>

 

 

課題24

 

<style>
#show_area1 {
width: 300px;
height: 300px;
background: salmon;
}
#show_area2 {
width: 300px;
height: 300px;
background: gold;
}
#show_area3 {
width: 300px;
height: 300px;
background: mediumseagreen;
}
</style>

<script>
$(function(){
$('#fadeOut_area1').fadeOut('fast');
$('#fadeOut_area2').fadeOut('slow');
$('#fadeOut_area3').fadeOut(5000);
});
</script>

<body>
<div id="fadeOut_area1"></div>
<div id="fadeOut_area2">’slow’</div>
<div id="fadeOut_area3">5秒</div>
</body>

 

 

課題25

 

<style>
#slideDown_area1 {
width: 300px;
height: 300px;
background: salmon;
display: none;
}
#slideDown_area2 {
width: 300px;
height: 300px;
background: gold;
display: none;
}
#slideDown_area3 {
width: 300px;
height: 300px;
background: mediumseagreen;
display: none;
}
</style>

<script>
$(function(){
$('#slideDown_area1').slideDown('fast');
$('#slideDown_area2').slideDown('slow');
$('#slideDown_area3').slideDown(5000);
});
</script>

<body>
<div id="slideDown_area1"></div>
<div id="slideDown_area2">’slow’</div>
<div id="slideDown_area3">5秒</div>
</body>

 

 

課題26

 

<style>
#move_box {
width: 300px;
height: 300px;
background: salmon;
}
</style>

<script>
$(function(){
$('#move_box').animate({'margin-left':'600px'});
});
</script>

<body>
<div id="move_box"></div>
</body>

 

 

課題27

 

<style>
#move_box {
width: 300px;
height: 300px;
background: salmon;
}
</style>

<script>
$(function(){
$('#move_box').animate({'margin-left':'600px','width':'30px','height':'30px'});
});
</script>

<body>
<div id="move_box"></div>
</body>