easy slider1.5

デモ

• デモ１（cssスタイルなし）
  デモ２（cssスタイル適用）
  デモ３（cssスタイルなし、垂直方向にスライド）
  デモ４（cssスタイル適用、自動スライド）
  デモ５（複数のスライダーを設置）

設置方法

easy slider 配布ページよりデータをダウンロードします。

head要素に以下を埋め込みます。（デモ４）

<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/easySlider1.5.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true });
});
</script>

表示する部分は次の通りです。

<div id="slider">
<ul>
<li>画像や文章その1</li>
<li>画像や文章その2</li>
<li>画像や文章その3</li>
</ul>
</div>

CSSの設定（デモ４）

#slider{}
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{
	width:696px;
	height:241px;
	overflow:hidden;
	}
#prevBtn, #nextBtn{
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:71px;
	}
#nextBtn{
	left:696px;
	}
#prevBtn a, #nextBtn a{
	display:block;
	width:30px;
	height:77px;
	background:url(images/btn_prev.gif) no-repeat 0 0;
	}
#nextBtn a{
	background:url(images/btn_next.gif) no-repeat 0 0;
	}

画像やテキストなどを配置することが可能です。スライドのコントローラーはテキストや画像を使用することができます。

その際、どのようなイメージで何色を基調にサイトを作るか。
これが決まらないとなかなか先に進めません。

企業だったらコーポレートカラーやロゴで使用している色、またクライアントの希望する色をうかがってベースとなるカラーを決めるのですが、商用サイトなどは、さまざまなコンテンツの組み合わせでできているので、それらを区別するための配色のバランスなど迷うこともあります。

そんなときに参考にしたいサイト。

『WEB色見本 原色大辞典 – HTML Color Names』

＊色の名前とHTMLタグが一目でわかるWEB色見本

『Adobe kuler』

＊配色をWebブラウザ上で作成・共有できるWebアプリケーションツール。

「Create」からベースカラーを決め、「From a Rule」から
「Analogous（類似色）」
「Monochromatic（単色）」
「Triad （3分割）」
「complementary（補色）」
「Compound（間色）」
「Shades（階調）」
のいずれかのルールを選択するだけで、2〜5 色の配色パターンを作成できます。

その他にも「Popular（定番配色）」や「Highest Rated（人気配色）」、「Newest（新しく公開された配色）」といったメニューがあり、色のタイトルを参考に選ぶこ とができます。

Styleneat

自作のCSSを見やすく整えてくれるツールです。