fc2ブログ

ロールオーバーでゆっくり画像を切り替える

  • 2011.12.21 16:30
  • Cat:web
画像を簡単にロールオーバーさせるには、


<img src="画像URL" onmouseover="this.src='マウスがのった時の画像URL';
" onmouseout="this.src='画像URL'" />


すれば マウスをのせたら 画像が切り替わる。


しかし なんだか さみしい。


ロールオーバーでゆっくり画像が切り替わるだけで、カッコいいのでは?

そこで参考になるサイトを書きとめときます。

http://www.htmldrive.net/items/show/940/JQuery-Animations-Button

http://www.hongkiat.com/blog/simple-call-to-action-button-with-css-jquery/

ダウンロードして サイトに設置できます。

facebookいいねをHPに表示

  • 2011.10.15 11:20
  • Cat:web
facebookいいねボタンをページ毎に表示したいと・・・。

どうすればいいのか調べて 一番よいと思ったのが、jQueryプラグインで表示。

本当に簡単にTwitter・facebookいいね!・GREEいいね・はてなブックマークなどの表示が出来るんです。

下記のサイトで詳しく説明
http://itra.jp/jquery_socialbutton_plugin/

jQuery本体は→ http://docs.jquery.com/Downloading_jQuery

jquery.socialbuttonプラグインは→ http://plugins.jquery.com/project/socialbutton

普通のHTMLで作ったサイトでも、CMSなどでも簡単に設置できるので 良いですね。


WEBのテーブルをCSSで指定

  • 2011.07.28 15:30
  • Cat:web
WEBのテーブルをCSSで指定する。

ホームページやブログで表などを表示するときに table(テーブル)を使います。

CSSで指定すると良い感じにできるんですよ。

<table class="table01">
<tbody>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
</tbody>
</table>

上記のように入力すると下記のように表示されます。











WEBおぼえがきテーブルを良い感じに
WEBおぼえがきテーブルを良い感じに


もう少し スマートな感じに

<table style="border-style: solid; border-width: 1px 0 0 0;
border-color: #666 #fff #666 #fff; border-spacing: 0;">
<tbody>
<tr>
<th style="padding: 8px; border: #666 solid; border-width: 0 0 1px 0;
background: #ccc; color: #000; font-weight: bold;">WEBおぼえがき</th>
<td style="padding: 8px; border-style: solid; border-width: 0 0 1px 0;
border-color: #666 #fff #666 #fff; color: #000;">テーブルを良い感じに</td>
</tr>
<tr>
<th style="padding: 8px; border: #666 solid; border-width: 0 0 1px 0;
background: #ccc; color: #000; font-weight: bold;">WEBおぼえがき</th>
<td style="padding: 8px; border-style: solid; border-width: 0 0 1px 0;
border-color: #666 #fff #666 #fff; color: #000;">テーブルを良い感じに</td>
</tr>
</tbody>
</table>

上記のように入力すると下記のように表示されます。












WEBおぼえがきテーブルを良い感じに
WEBおぼえがきテーブルを良い感じに


外部のスタイルシートを使う場合は

CSSは、
.table01 { border-style: solid; border-width: 1px 0 0 0; border-color: #666 #fff #666 #fff; border-spacing: 0;}
.table01 th { padding: 8px; border: #666 solid; border-width: 0 0 1px 0; background: #ccc; color: #000; font-weight: bold;}
.table01 td { padding: 8px; border-style: solid; border-width: 0 0 1px 0; border-color: #666 #fff #666 #fff; color: #000;}

htmlは、

<table class="table01">
<tbody>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
</tbody>
</table>


色々と面白そうな表が出来そうな感じがしませんか?
試してみてくださいね。

WEBのラインをCSSで指定する

  • 2011.07.26 16:54
  • Cat:web
HTMLでラインを引く時に


<hr>


って指定するとラインが引けます。

そのラインをCSSで指定できるんですね。

直接CSSをHTMLに入力しても使えます。


<hr style="border-width: 1px 0px 0px 0px; border-style: dotted;
border-color: #000000; height: 1px;">








HTML
<hr class="s001">



スタイルシート
hr.s001 { border-width: 1px 0px 0px 0px; border-style: dotted;
border-color: #000000; height: 1px; }

上記のように設定するんです。

s001の所の名前を替えて設定するといろいろな線を設定しておけるんですね。

border-styleの部分は、線の設定なので、下記に入れ替えると簡単に変わるんで使えますね。

solid
1本線で表示。

double
2本線で表示。

dashed
破線で表示。

dotted
点線で表示。


border-colorの部分は、線の色の指定です。

→ WEBの色見本 

何種類か用意しておくとWEB制作中にいろいろな場面で使えるんですね。

プルダウンをyoutubeの上に表示

プルダウンをyoutubeの上に表示する為には、どうすればいいの?

マウスが乗ったら右側に表示するようなボタンを作った場合。

Youtubeをそのまま右側に挿入すると、Youtubeにボタンが隠れちゃうんです。

ではどうすればよいのか?

下記のようにすれば、表示されますね。

大きさは、自由に調整してくださいね。


<object width="500" height="350">
<param name="movie" value="http://www.youtube.com/v/youtubeのコード" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
<embed width="500" height="350" allowscriptaccess="always"
src="http://www.youtube.com/v/youtubeのコード" type="application/x-shockwave-flash"
wmode="transparent" allowfullscreen="true">
</embed></object>


フラッシュの場合も同じようになりますので、この方法は使えますね。