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いいねボタンをページ毎に表示したいと・・・。

どうすればいいのか調べて　一番よいと思ったのが、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で指定する。

ホームページやブログで表などを表示するときに　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>

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

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制作中にいろいろな場面で使えるんですね。