57日目に引き続き、フォトショップを使ってのWebデザインです。
今回は、フッター部と、ページの右上によくある、お問い合わせの部分のデザインでした。

フッターは、全幅の四角形を描いて、そこに、コピーライト、テキストナビ、ロゴを入れました。

お問い合わせの部分は、下のような手順で作りました。

1. 長方形角丸ツールで四角形を描きます。この時、右側は後でスパッと落とすので、大きめに描いておきます。
2. バウンディングボックスを表示して、Ctrlキーを押しながら、ボックスの左下角をドラッグしつつ、さらにShiftキーを押しながら右にドラッグして離します。
3. 長方形ツールで、一部型抜き（-）にして、右側のいらないところを囲んで消します。

プログラム例

script部
$(function() {
　　$(‘.table tr:even’).addClass(‘kisuu’);
　　$(‘.table tr:odd’).addClass(‘guusuu’);
　　$(‘.table .button’).click(function(){
　　　　$(‘.table tr’).toggleClass(‘kisuu guusuu’);
　　});
});

CSSL部

.kisuu {
　　background-color:#ffffe0;
}
.guusuu {
　　background-color:#ffddff;
}

HTML部
<div class="table">
<input class="button" type="button" value="切り替えボタン" />
<table>
<tr>
<td>真弓</td><td>34本</td>
</tr>
<tr>
<td>バース</td><td>54本</td>
</tr>
<tr>
<td>掛布</td><td>40本</td>
</tr>
<tr>
<td>岡田</td><td>35本</td>
</tr>
</table>
</div>

説明

$(‘.table tr’).toggleClass(‘kisuu guusuu’)

class="table"のtrタグのクラスを、guusuuまたはkisuuがある場合は削除し、guusuuまたはkisuuuが無い場合は追加します。

結果

ページが開かれた時のイベントに処理を指定します。

プログラム例

script部
$(function() {
　　ページが開かれた時の処理
});

説明

｛　｝内に、ページが開かれた時の処理を記述します。

クリックされた時のイベントに処理を指定します。

プログラム例

script部
$(function() {
　　$(‘.power p’).addClass(‘itte’);
　　$(‘.power p’).click(function(){
　　　　$(this).fadeOut(300,function(){
　　　　　　$(this).toggleClass(‘itte coi’);
　　　　});
　　　　$(this).fadeIn(300);
　　});
});

CSS部

.power p {
width:100px;
height:20px;
text-align:center;
font-weight:bold;
color:#000000;
cursor:pointer;
}
.power .itte {
background-color:#dcdcdc;
}

.power .coi {
background-color:#ff0000;
}

HTML部
<div class="power">
<p>POWER</p>
</div>

説明

$(‘.power p’).click(function(){　})

class="power"のpタグの中身がクリックされた時、｛　｝内を実行します。

$(this).fadeOut(300,xxx)

イベントの対象となったオブジェクトを、0.3秒かけてフェードアウトします。その後、xxxの処理を実行します。

function(){$(this).toggleClass(‘itte coi’)｝　　(上のxxx)

イベントの対象となった要素のクラスを、itteまたはkoiがある場合は削除し、itteまたはkoiが無い場合は追加します。

結果

マウスオーバーされた時のイベントに処理を指定します。

プログラム例

script部
$(function() {
　　$(‘.table tr:even’).css(‘backgroundColor’,’#ffffe0′);
　　$(‘.table tr:odd’).css(‘backgroundColor’,’#ffddff’);
　　$(‘.table tr’).mouseover(function(){
　　　　$(this).css(‘backgroundColor’,’#ff0000′)
　　});
　　$(‘.table tr:even’).mouseout(function(){
　　　　$(this).css(‘backgroundColor’,’#ffffe0′)
　　});
　　$(‘.table tr:odd’).mouseout(function(){
　　　　$(this).css(‘backgroundColor’,’#ffddff’)
　　});
});

HTML部
<div class="table">
<table>
<tr>
<td>34本</td>
</tr>
<tr>
<td>バース</td><td>54本</td>
</tr>
<tr>
<td>掛布</td><td>40本</td>
</tr>
<tr>
<td>岡田</td><td>35本</td>
</tr>
</table>
</div>

説明

$(‘.table tr’).mouseover(function(){　})

class="table"のtrタグ中身がマウスオーバーされた時、｛　｝内を実行します。

$(‘.table tr:odd’).mouseout(function(){　})

class="table"のtrタグの偶数番目の中身からマウスが離れた時、｛　｝内を実行します。

結果

css()メソッドを使用してスタイルシートを書き換えます。

プログラム例

script部
$(function() {
$(‘.table tr:even’).css(‘backgroundColor’,’#ffffe0′);
$(‘.table tr:odd’).css(‘backgroundColor’,’#ffddff’);
});

HTML部
<table class="table">
<tr>
<td>真弓</td><td>34本</td>
</tr>
<tr>
<td>バース</td><td>54本</td>
</tr>
<tr>
<td>掛布</td><td>40本</td>
</tr>
<tr>
<td>岡田</td><td>35本</td>
</tr>
</table>

説明

$(‘.table tr:even’).css(‘backgroundColor’,’#ffffe0′)

class="table"のtrタグの奇数番目のタグに、style="background-color:#ffffe0"を、書き加えます。

$(‘.table tr:odd’).css(‘backgroundColor’,’#ffddff’)

class="table"のtrタグの偶数番目のタグに、style="background-color:#ffddff"を、書き加えます。

結果

※これをスタイルシートで実現しようとすると、すべてのtrタグにクラス指定する必要があります。
また、真ん中で行を足すと、それ以降のtrタグのクラス名を変更しなくてはなりません。
なので、このような表を作る時は、jQueryが非常に有効です。

CSSプロパティを一括して指定できます。

プログラム例

script部
$(function() {
　　$(‘ .button’) .click(function() {
　　　　$(‘.contents p’).css({
　　　　　　’fontSize’:’150%’,
　　　　　　’fontWeight’:’bold’,
　　　　　　’color’:’#ff0000′
　　　　});
　　　　$(‘.contents li’).css({
　　　　　　’color’:’#0000ff’,
　　　　　　’backgroundColor’:’#99ff99′
　　　　});
　　});
});

HTML部
<div class="contents">
<input class="button" type="button" value="書き換え" />
<p>p の中身</p>
<ul>
<li>li の中身</li>
<li>li の中身</li>
<li>li の中身</li>
</ul>
</div>

説明

$(‘.contents p’).css({
　　　　　　’fontSize’:’150%’,
　　　　　　’fontWeight’:’bold’,
　　　　　　’color’:’#ff0000′
　　　　})

class="contents"のpタグに style="font-size:150%;font-weight:bold;color:#ff0000" を書き加えます。

結果

CSSのクラスを追加、削除、切り替えします。

プログラム例

script部
$(function() {
　　$(‘.contents .button’) .click(function() {
　　　　$(‘.contents li:first’).addClass(‘futo’);
　　　　$(‘.contents li:eq(1)’).removeClass(‘ao’);
　　　　$(‘.contents li:last’).toggleClass(‘aka’);
　　});
});

CSS部

li.futo {
font-weight:bold;
}
li.aka {
color:red;
}
li.ao {
color:blue;
}

HTML部
<div class="contents">
<input class="button" type="button" value="書き換え" />
<ul>
<li>li の中身</li>
<li class="ao">li の中身</li>
<li>li の中身</li>
</ul>
</div>

説明

$(‘#contents li:first’).addclass(‘futo’)

class="contents"の最初のliタグに、class="futo"を書き加えます。

$(‘#contents li:eq(1)’).addclass(‘futo’)

class="contents"の1番目(最初のタグが0番目)のliタグに、class="ao"を書き加えます。

$(‘#contents li:last’).addclass(‘futo’)

class="contents"の最後のliタグに、class="aka"を、呼ばれる度に追加と削除を繰り返します。

結果