Tag: チュートリアル

ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明しています。 これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座 １．スライダー プラグインをダウンロード 画像を順番に表示させる、スライダー系のプラグイン色々とありますが、今回は、CSS Tricksの運営者Chris Coyierが初めて作って、その後数人のでプログラマーが参加し強化された、AnythingSliderを使いたいと思います。 AnythingSliderは、機能が豊富なのと、自分が好きな様にスタイルができるので、とても重宝すると思います。 それでは、早速ここからダウンロードしてください＝＞AnythingSlider ダウンロード ２．スラーダー用のファイルの設置 お決まりですが、とりあえずjQueryのスクリプトのリンクとAnythingSliderのスクリプトファイルと自分たちのスクリプットファイルをヘッダー内にリンクを挿入してください。 それと、AnythingSliderのCSSをリンクさせてください。これで、最低限必要なファイルは、全部OKです。 ３．スライダー用にのHTMLマークアップ Anythingスライダーは、ul li を使いますので、一個一個のスライダーは必ず li の中に入れてください。今回は、li の中に入るのは、画像だけですので、とても単純に以下の様になります。 画像は、適当に用意いたしました。今回使う画像のサイズは、800×280 です。 ４．Javascriptの設定 実際にスライダーを稼動させるには、Jqueryのいつもの $(document).ready(function(){}); のファンクション内にさっき程ulにつけたIDを指定して、anythingSliderのファンクションを付けます。 $(document) は、文字どうりドキュメントが、　.ready() で用意できたらー、となるので、訳すと”このファイルが全部ダウンロード完了したら” になります。 そして、.ready() 内に新しいファンクション function(){} を入れることで、実際にダウンロードが完了するとそのファンクションが稼動されます。いわゆる、callback ですね。 さて、今回のanythingSliderの設定は以下になります。 初心者でも理解出来る様に、上の各ラインが何しているか説明して行きたいと思います。 まず、DOM（簡単に言うとHTMLの各部分のことですが、詳しい説明は、WIKIでご覧ください。) を指定して、 これで、さっき程の ul で指定した ID をターゲット完了です。 そして、それに対して、anythingSlider のファンクションを発動させます。 これで、発動は完了です。 ただ、これでは、すべてのオプションがデフォルトのままになりますので、anythingSlider のファンクション内に、自分たちの好きなオプションを加えます。指定出来るオプションは、各ファンクションによって決まっています。anythingSlider のファンクションが指定できるオプションは、CSS TricksのスライダーのデモのページのDefault Optionのリストをご覧ください。 実際今回必要なのは、左と右の矢印だけなので、必要なオプションは、以下になります。 widthとheightで横幅と縦のサイズを指定して、buildNavigationをfalseで、ナビーゲーションの作成（スライダーの数や現在地の表示）は、なし に指定。 autoPlayLockedをTrueで、右クリックや左矢印を押しても、自動的にローテーションは止めない。enableKeyboardをfalseキーボードでのスライダーのコントロールは OFF にしてしました。 コンマ区切りでオプションを指定して、最後のオプションのコンマはいりません。すべてのオションは、javascriptのobject literalとしてファンクション内に指定しますので、 {}　で閉じてください。 なので、最終的に全部をまとめると以下の用になります。 ５．CSSの調整 あとは、自分のサイトのデザインに会う様に CSS でマークアップをしていきます。anythingslider.css 内のcssを変更してもいいのですが、新しいバージョンにアップデートした場合に、簡単に上書きできないので、すべてのCSSは、自分のサイトのメインのstyle.cssに入れていきましょう。 そんなに難しいCSSは入っていなので、説明ははぶいておきます。 なにか、分からないようなことが有れば、いつでもコメントを残してください。 これで、スライダーの完成です。必要があればスライダーのデモご覧になって遊んでみてください。 今回のチュートリアル分のデモ 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座