Blue Point Solutions

ウェブサイトを HTML&CSSに基礎から構築　〜第 3 回〜

ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。
ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明しています。
これが今回のチュートリアルで作って出来上がったウェブサイトです。

完成したサイト

１．スライダープラグインをダウンロード

画像を順番に表示させる、スライダー系のプラグイン色々とありますが、今回は、CSS Tricksの運営者Chris Coyierが初めて作って、その後数人のでプログラマーが参加し強化された、AnythingSliderを使いたいと思います。
AnythingSliderは、機能が豊富なのと、自分が好きな様にスタイルができるので、とても重宝すると思います。
それでは、早速ここからダウンロードしてください＝＞AnythingSlider ダウンロード

２．スラーダー用のファイルの設置

お決まりですが、とりあえずjQueryのスクリプトのリンクとAnythingSliderのスクリプトファイルと自分たちのスクリプットファイルをヘッダー内にリンクを挿入してください。
それと、AnythingSliderのCSSをリンクさせてください。これで、最低限必要なファイルは、全部OKです。

	<link type="text/css" href="css/anythingslider.css" rel="stylesheet" media="screen" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.anythingslider.min.js"></script>
	<script type="text/javascript" src="js/d3m.main.js"></script>

３．スライダー用にのHTMLマークアップ

Anythingスライダーは、ul li を使いますので、一個一個のスライダーは必ず li の中に入れてください。今回は、li の中に入るのは、画像だけですので、とても単純に以下の様になります。
画像は、適当に用意いたしました。今回使う画像のサイズは、800×280 です。

	<ul id="slider">
		<li><img src="images/css_tutorial_header_slider_01.jpg" alt="Slider 3" /></li>
		<li><img src="images/css_tutorial_header_slider_02.jpg" alt="Slider 2" /></li>
		<li><img src="images/css_tutorial_header_slider_03.jpg" alt="Slider 1" /></li>
	</ul>

４．Javascriptの設定

実際にスライダーを稼動させるには、Jqueryのいつもの $(document).ready(function(){}); のファンクション内にさっき程ulにつけたIDを指定して、anythingSliderのファンクションを付けます。
$(document) は、文字どうりドキュメントが、　.ready() で用意できたらー、となるので、訳すと”このファイルが全部ダウンロード完了したら” になります。
そして、.ready() 内に新しいファンクション function(){} を入れることで、実際にダウンロードが完了するとそのファンクションが稼動されます。いわゆる、callback ですね。
さて、今回のanythingSliderの設定は以下になります。

	$('#slider').anythingSlider({
		width          : 800,
		height         : 280,
		buildNavigation: false,
		autoPlayLocked: true,
		enableKeyboard: false
	});

初心者でも理解出来る様に、上の各ラインが何しているか説明して行きたいと思います。

まず、DOM（簡単に言うとHTMLの各部分のことですが、詳しい説明は、WIKIでご覧ください。) を指定して、

	 $('#slider')

これで、さっき程の ul で指定した ID をターゲット完了です。
そして、それに対して、anythingSlider のファンクションを発動させます。

	$('#slider').anythingSlider();

これで、発動は完了です。
ただ、これでは、すべてのオプションがデフォルトのままになりますので、anythingSlider のファンクション内に、自分たちの好きなオプションを加えます。指定出来るオプションは、各ファンクションによって決まっています。anythingSlider のファンクションが指定できるオプションは、CSS TricksのスライダーのデモのページのDefault Optionのリストをご覧ください。
実際今回必要なのは、左と右の矢印だけなので、必要なオプションは、以下になります。

		width          : 800,
		height         : 280,
		buildNavigation: false,
		autoPlayLocked: true,
		enableKeyboard: false

widthとheightで横幅と縦のサイズを指定して、buildNavigationをfalseで、ナビーゲーションの作成（スライダーの数や現在地の表示）は、なしに指定。

autoPlayLockedをTrueで、右クリックや左矢印を押しても、自動的にローテーションは止めない。
enableKeyboardをfalseキーボードでのスライダーのコントロールは OFF にしてしました。

コンマ区切りでオプションを指定して、最後のオプションのコンマはいりません。すべてのオションは、javascriptのobject literalとしてファンクション内に指定しますので、 {}　で閉じてください。
なので、最終的に全部をまとめると以下の用になります。

	$(document).ready(function(){
		$('#slider').anythingSlider({
			width          : 800,
			height         : 280,
			buildNavigation: false,
			autoPlayLocked: true,
			enableKeyboard: false
		})
	});

５．CSSの調整

あとは、自分のサイトのデザインに会う様に CSS でマークアップをしていきます。anythingslider.css 内のcssを変更してもいいのですが、新しいバージョンにアップデートした場合に、簡単に上書きできないので、すべてのCSSは、自分のサイトのメインのstyle.cssに入れていきましょう。

div.anythingSlider {
	top: 45px;
	margin-bottom: 45px;
	padding: 0 83px 20px 63px;
}
div.anythingWindow {
	border: 10px solid #e3762c !important;
}
div.anythingControls a.start-stop {
	display: none;
}
div.anythingSlider .arrow a,
div.anythingSlider .arrow a:hover {
    background: url("../images/icon_header_slider_arrow.jpg") no-repeat scroll 0 0 transparent;
    height: 63px;
    width: 63px;
}
div.anythingSlider .forward {
    right: 0;
}
div.anythingSlider .back {
    left: 0;
}
div.anythingSlider .forward a,
div.anythingSlider .forward a:hover,
div.anythingSlider .forward a.hover  {
    background-position: right center;
}
div.anythingSlider .back a,
div.anythingSlider .back a:hover,
div.anythingSlider .back a.hover {
    background-position: left center;
}

そんなに難しいCSSは入っていなので、説明ははぶいておきます。
なにか、分からないようなことが有れば、いつでもコメントを残してください。
これで、スライダーの完成です。必要があればスライダーのデモご覧になって遊んでみてください。

今回のチュートリアル分のデモ