著作権について このレポートは著作権法で保護されている著作物です 下記の点にご注意頂きご利用下さい このレポートの著作権は作成者 杉山 大悟 にあります このレポートに書かれた情報は 作成時点での著者の見解等です 著者は事前許可を得ずに誤りの訂正及び情報の変更 見解の変更等を 行う権利を有します このレポートは下記の事項に同意された場合のみ お読み頂くことができ ます 著作権者の許可なく このレポートの全部又は一部及び付属するデータ 等をいかなる手段においても複製 転載 流用 転売等することを禁じま す このレポートの作成には万全を期しておりますが 万一 誤り 不正確な 情報等がありましても 著者は一切の責任を負わないことをご了承願いま す このレポートを利用することにより生じたいかなる結果につきましても 著 者は一切の責任を負わないことをご了承願います 著作権等違反の行為を行った場合及びその他不法行為に該当する行 為を行った場合は 関係法規に基づき損害賠償請求を行う等 民事 刑事 を問わず法的手段による解決を行う場合があります -2Copyright(C) DAIGO SUGIYAMA All Rights Reserved
目次 はじめに １ 動きのあるホームページの仕組み １ 初心者でもわかる JavaScript ２ ちょっとリッチな動きを付けられる JQUERY ２ ホームページにちょっとリッチな動きを付ける方法 １ ホームページがフワッと現れるフェードイン １- JQUERY ファイルと JavaScript ファイルの読込み設定 ２- フェードインするホームページや画像にＣＳＳのクラスを設定 ３- フェードインするための JavaScript 関数作成 ２ クリックすると画像が出てくるスライドイメージ １２３４- JQUERY ファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定 スライドする要素を指定するためのＣＳＳ設定 スライドする画像とスライドするためのスイッチテキストを設定 スライドするための JavaScript 関数作成 ３ サンプルサイトの使い方 おわりに -3Copyright(C) DAIGO SUGIYAMA All Rights Reserved
はじめに このレポートはホームページ作成初心者の方でも 動きのあるちょっとリッ チなホームページを作るための解説書です ホームページに動きを付けたいけれど プログラムはわからないし そんなホームページ作成初心者の方でも 本レポートを読み進めながら 実践してもらうことで ホームページにちょっとリッチな動きを付けることが できます ちょっとリッチな動きを付けるために JavaScript というプログラムを使い JavaScript の機能を拡張した JQUERY というライブラリ(JavaScript のプラ グインみたいなもの)を使います と言っても難しいことは無く 書くコード自体はほんの数行です 必要なところのみ解説しますので 初めはこのマニュアル通りにやってみ て 慣れていきましょう HTML と CSS を理解できれば大丈夫なので HTML と CSS がわからない 方は 先に HTML と CSS について学んで下さい -4Copyright(C) DAIGO SUGIYAMA All Rights Reserved
動きのあるホームページの仕組み 動きのあるホームページ はＨＴＭＬやＣＳＳにプログラムを追加すること で 見映えのする表現豊かなホームページを作ることができます プログラム と聞くと 何だか難しそう と思うかもしれませんが プログラムを理解するのでは無く 先にホーム ページに動きを付ける方法だけを覚えることで プログラムを理解してい なくても表現豊かなホームページを作ることができます なぜそうやるのか を理解するのでは無くて これをこうすればこうなる という ルールをそのまま覚えることを優先していきます １ 初心者でもわかる JavaScript JavaScript というプログラム言語について少しだけお話したいと思います JavaScript は WEB ブラウザ(ホームページを見るためのソフト)上で実行 されるプログラムです と言ってもなんだかよくわかりませんよね(^^;) -5Copyright(C) DAIGO SUGIYAMA All Rights Reserved
ＷＥＢブラウザはインターネットエクスプローラ ＩＥ や FireFox などのホー ムページを閲覧するためのソフトのことです イメージで表すとこんな感じです WEB サーバーにある HTML CSS JavaScript のファイルを自分のパソコ ンにダウンロードします WEB ブラウザが HTML と CSS を解釈し ホームページを表示します JavaScript は WEB ブラウザによって実行されるという仕組みです 仕組み自体はそんなに難しくないんですね そもそもプログラムを 難しい と感じるのは シンプルなことが複雑に絡み合っている からです 一つ一つはすごく単純な仕組みなんですが 単純な仕組みの一つ一つが 関連性を持ち合い 複雑に絡み合っているから難しく見える -6Copyright(C) DAIGO SUGIYAMA All Rights Reserved
難しい という先入観はひとまず置いておいて このレポートでは こうすればこうなる というルールだけを覚えるようにしていきましょう ２ ちょっとリッチな動きを付けられる JQUERY JQUERY は JavaScript で出来ることを手助けしてくれるサポーターです JavaScript だけで行うことが難しいことを手助けしてくれます どちらかというと これからお話する ホームページがフワッと現れるフェー ドインの方法 などは この JQUERY の使い方を学ぶことになります と言っても 使い方はカンタン 使い方のヒントは包み込む(ラップする)です 例えば ボタン画像を包み込んでフワッと表示する ホームページを包み込んで フワッと表示する この 包み込む(ラップする) ということが鍵になります ではどうやって 画像やホームページを包み込むのか それを次項以降でお話ししていきますが 先に JQUERY のライブラリファ イルをダウンロードしておきましょう JQUERY は下記のサイトからダウンロードできます http://jquery.com/ -7Copyright(C) DAIGO SUGIYAMA All Rights Reserved
下図の Download jquery ボタンをクリックして JQUERY ライブ ラリファイルをダウンロードして下さい もしダウンロードできない時は 本レポート付属のサンプルサイ トに jquery.min.js (jquery Version1.9.0)を収録していますので そちらを使用して下さい -8Copyright(C) DAIGO SUGIYAMA All Rights Reserved
ホームページにちょっとリッチな動きを付ける方法 あなたのホームページをよりたくさんの人に見てもらうためには あなたのホームページを見る理由 が必要です 例えば おもしろいコンテンツや楽しいコンテンツがたくさんある デザインやレイアウトが良い ナビゲーションがしっかりしていて閲覧しやすい 頻繁に更新されていて 常に新しい情報がある 他の訪問者とコミュニケーションが取れる場がある など あなたのサイトを見ることに 価値 を感じるからこそ 訪問者はあなたのサイトを訪れます 最近はホームページの内容が充実して デザインも質の高いものが 増えてきて 他のホームページと見た目もあまり 差 を感じられ ないホームページが数多くあります そんな中で ホームページ作成初心者でも比較的カンタンに 差 を出せる要素が アニメーション です コンテンツの内容を充実させたり 見た目のデザインを良くするこ とは 経験を積んでスキルを磨いていかないとなかなか難しいです よね でも ホームページに少し動きを付けて ちょっとリッチなホーム ページにすることはできます 小さな 差 でも 少しずつホームページを良くしていくことで 数ヵ月後には大きな 差 となりますので 一つずつホームページ を良い方向に変えていきましょう -9Copyright(C) DAIGO SUGIYAMA All Rights Reserved
１ ホームページがフワッと現れるフェードイン ここからは ホームページを透明な状態から 少しずつ不透明な状態に変 化させて表示する フェードイン についてお話していきます フェードインの作成手順は １ ＪＱＵＥＲＹファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定をする ２ フェードインするホームページや画像にＣＳＳのクラスを設定する ３ フェードインするための JavaScript 関数を作成する の３つになります １ ＪＱＵＥＲＹファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定 まず 始めにフェードインさせるホームページのＨＴＭＬファイルに下記の２ つのコードを追加します 下記のコードは<head> </head>の間に追加して下さい <script type="text/javascript" src="../jquery.min.js"></script> ファイル名は実際にダウンロードした JQUERY ファイル名に変更して下さ い パスはファイルを配置したフォルダパスに変更します <script type="text/javascript" src="../function.js"></script> function.js ファイルは後ほど作成しますので ファイルを配置する予定 のフォルダのパスを入力します 上記のコードは<head> </head>の間に追加して下さい - 10 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
コードの追加例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ホームページ作成初心者でもできる 動きのあるちょっとリッチなホームページ の作り方</title> <link href="../mainbase.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript" src="../function.js"></script> </head> <body> これでＪａｖａＳｃｒｉｐｔファイルを読み込む設定が完了しました ２ フェードインするホームページや画像にＣＳＳのクラスを設定する 次にＣＳＳのクラスを利用して どの要素をフェードインさせるのかを指定 します クラス名は任意の名前でよいのですが ここでは ｓａｍｐｌｅ_ｉｍｇ というク ラス名を設定することにしました ＣＳＳファイルを作成し 下記の内容を追加して下さい.sample_img{ display: none; width:??px; margin:??px; padding:??px; border:??px; } width margin padding border の??px は任意の値を入力して下さい - 11 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
このＣＳＳファイルをＨＴＭＬで読み込みます ＣＳＳファイルの名前が mainbase.css とすると <head> </head>のタグ の間に <link href="mainbase.css" rel="stylesheet" type="text/css"> と入力して下さい そして ｈｔｍｌコード内のフェードインさせたい画像を<div> </div>タグを用 いて包み込みます これが始めに言っていた包み込む ラップ するというものです 例 <div class="sample_img"> <img src="../image/room.jpg" height=310 width=387> </div> このように先ほどＣＳＳファイルに作成したクラスを設定した<div> </div> タグで<img>タグを包み込むことにより 画像がフェードイン表示されるよう になります ホームページ全体をフェードインさせるには ホームページ全体を包み込 むように<div> </div>を設定します 実にカンタンですね こうやってさまざまな要素を包み込むことで 動画をフェードインさせたり テキストをフェードインさせたりすることができます - 12 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
３ フェードインするための JavaScript 関数を作成する 関数って何 そう思われるかもしれませんが ここでは おまじない だと思っておいて 下さい 初めにお話したとおり このレポートでは プログラムについての説明では 無く 方法だけを説明していきます なので 今はわからないところは おまじない として入れる そうすることでプログラムにつまずくことなくフェードイン表示することがで きます まず始めにＷＩＮＤＯＷＳに付属の メモ帳 notepad) で空のテキストを作 成します ファイル名を function.js として作成して下さい ちなみに拡張子が js のファイルは JavaScript コードの書かれたファイル のことです そして そこに書く おまじない は function img_fadein1(){ $(".sample_img").fadein(500); } これだけです 何か見覚えのある文字がありますね 赤文字の sample_img これはさっき設定したＣＳＳファイルのクラス名です - 13 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
その後の青文字で書いてある 500 の数字 この数字はフェードインを始めてから画像などの要素の表示が完了する までの時間を表しています 500 は 500 ミリ秒 なので 0.5 秒になります 1 秒 1000 ミリ秒 2 秒 2000 ミリ秒 10 秒 10000 ミリ秒 なので 任意のフェードイン時間を指定することができます 表示速度がどれくらい変わるのかはこのレポートに付属のサンプルを見 てみてください これでようやく完成 と言いたいところですが 実はまだ一つ設定していないことがあります いつフェードイン表示するのか ということを指定していませんよね このままでは 普通に表示されてしまいます なので ここでは ホームページ読込時 にフェードインするようにしてみま しょう この指定はｈｔｍｌコードの<body>タグの部分を <body onload="img_fadein1();"> に変更します - 14 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
赤文字の img_fadein1 は先ほど作成した function,js に書いたコードに 出てきました function img_fadein1(){ $(".sample_img").fadein(500); } これも おまじない として同じ文字にするようにしましょう これでようやく完成です ファイルを保存して ホームページを表示させてみて下さい フワっ とフェードイン表示されましたか こうやってさまざまな画像などの要素をフェードインさせることができます これであなたのホームページも ちょっとリッチ なホームページになりまし たね ただ フワツ と表示させるだけでも ホームページの印象がかなり変わり ます どの部分をフェードイン表示するのが良いのか いろいろと試してみて下 さい - 15 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
２ クリックすると画像が出てくるスライドイメージ テキストをクリックすると 画像が出てくるスライドイメージの作り方をお話 していきます スライドイメージの作成手順は １ ＪＱＵＥＲＹファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定をする ２ スライドする要素を指定するためのＣＳＳ設定をする ３ スライドする画像とスライドするためのスイッチテキストを設定する ４ スライドするためのＪａｖａＳｃｒｉｐｔ関数を作成する の４つになります １ ＪＱＵＥＲＹファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定 これは前項のフェードインで設定した方法と全く同じですので フェードイ ンの項を参照して下さい ２ スライドする要素を指定するためのＣＳＳのクラスを設定をする 次にＣＳＳのクラスを利用して どの要素をスライドさせるために利用する のかを指定します クラス名は任意の名前でよいのですが ここでは ｓａｍｐｌｅ_ｉｍｇ というク ラス名を設定することにしました ＣＳＳファイルを作成し 下記の内容を追加して下さい.slide{ width:??px; margin:??px; padding:??px; border:??px; } - 16 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
width margin padding border の??px は任意の値を入力して下さい このＣＳＳファイルをＨＴＭＬで読み込みます ＣＳＳファイルの名前が mainbase.css とすると <head> </head>のタグ の間に <link href="mainbase.css" rel="stylesheet" type="text/css"> と入力して下さい ３ スライドする画像とスライドするためのスイッチテキストを設定する ここでは テキストをクリックすると画像がスライドしながら現れるようにし たいので クリックするためのテキストとスライドしながら出てくる画像を設 定します 下記のコードをホームページのＨＴＭＬに追加して下さい <div class="slide"> <dt> サンプル</dt> <dd> <img src="../image/sample.jpg" height=100 width=100> </dd> </div> 赤文字のクラス名は前項で設定したクラス名 slide を指定します <dt> </dt>の間には クリックすると画像が表示されるスイッチとなるテ キストを入力します 上記の例では サンプル という文字をクリックすると画像がスライド表 示されます <dd> </dd>の間には スライド表示する画像タグを包み込む ラップ し ます - 17 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
４ スライドするためのＪａｖａＳｃｒｉｐｔ関数を作成する フェードインの時と同様の手順で ＷＩＮＤＯＷＳに付属の メモ帳 notepad) で空のテキストを作成します ファイル名を function.js として作成して下さい 下記のコードを function.js ファイルに入力し 保存します $(function(){ $('.slide dd').hide(); $('.slide dt').click(function(e){ $('+dd',this).slidedown(500); }); }); ここでも見覚えるのある文字が出てきました 赤文字の slide これは先ほどＣＳＳファイルで設定したクラス名でしたね 青文字の 500 はフェードインの時と同じように画像の表示が完了される までの時間です 500 は 500 ミリ秒 なので 0.5 秒になります なので 任意のスライド表示完了までの時間を指定することができます これで画像をスライド表示するための設定は完了です テキストをクリックすると 画像がスライドしながら表示されるはずです - 18 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
サンプルサイトの使い方 ここまで ホームページをフワっと表示させるフェードインの作 り方 と スライドしながら現れるスライドイメージの作り方 を お話してきました でも 書いたとおりやってみたけど 上手くいかない 書いている内容がよくわからない そんな方のために 実際にこのレポートに書いてある ちょっとリッチな動きのあるサンプルサイト を作りました このサイトにあるソースコードを読むことで このレポートの内容 がより理解しやすくなると思います ソースコードはそのままコピー ペーストで使って頂いてもかまい せんが 画像は著作権で保護されていますので使わないで下さいね それでは サンプルサイトの説明をしていきたいと思います サンプルサイトは以下のＵＲＬからダウンロード後 解凍ソフトで 解凍して下さい http://www.netbiz-try.com/report/1/samplesite.zip 解凍ソフト Lhaplus - 19 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
サンプルサイト index.html を開くと 下図のようなホームページが表示さ れます フェードインの項目では画像をフェードインさせた場合と ホームページを フェードインさせた場合の２通りのフェードイン効果を確認することができ ます 右側に表記している時間はフェードインが完了するまでの時間を表してい ます - 20 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
フェードイン項目の 画像がフワっと現れるフェードイン 0.5 秒 を クリックすると 下図のホームページが表示されます 赤枠で囲っている部分の秒数をクリックすると それぞれのフェードイン完 了時間のホームページが表示されますので フェードイン完了時間の違い を確認してみて下さい - 21 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
フェードイン項目の ホームページがフワッと現れるフェードイン(サイト 0.5 秒 をクリックすると 下図のホームページが表示されます ホームページがフワッと現れるフェードイン(サイト はホームページ全体 がフェードインします こちらも赤枠で囲っている部分の秒数をクリックすると それぞれのフェー ドイン完了時間のホームページが表示されますので 完了時間の違いを 確認してみて下さい - 22 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
スライド項目の クリックすると画像が出てくるスライドイメージ 0.5 秒 を クリックすると ３つのテキストが表示されます 青枠内のテキストをクリックすると 画像が下にスライドしながら表示され ます 赤枠は今までと同じく スライド完了までの時間を表していますので 各表 示完了時間ごとの違いを確認してみて下さい - 23 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
おわりに プロフィール 自己紹介 このたびは 杉山 大悟のレポートをダウンロードいただき 誠にありがとう ございます 簡単にではありますが 私の自己紹介をさせて頂きます 本名 : 杉山 大悟 職業 : IT エンジニア WEB デザイナ アフィリエイター 特技 : プログラミングとドラミング(ドラム演奏) 座右の銘 : 継続は力なり アフィリエイト用のクリック解析システムやブログ投稿管理システムなどを 作りながら 企業向けの工学系検索システムなどを開発しています 今後もいろいろなツール開発に挑戦していきたいと思っています メールサポートについて 私が運営しているメルマガ 初級者のためのネットビジネスメルマガ インターネット Biz トライ では ネットビジネスに特化した WEB サイトの制作過程をそのまま公開す るなど このレポートよりかなり濃い WEB サイト制作の裏側やマーケティ ング手法などを公開しています ご自分のサイトをさらに進化させたい方はぜひ読んでみて下さい - 24 Copyright(C) DAIGO SUGIYAMA All Rights Reserved
このレポートの内容をきちんと実践して つまずいてしまったり うまくいか ないという方にはメルマガ内でメールサポートをさせて頂くことにしました メルマガに登録いただいた後 私までメールを頂ければサポートさせて頂 きます 件名は メールサポート と記載の上 本文にご質問内容を書いてお送り 下さい メルマガ 初級者のためのネットビジネスメルマガ インターネット Biz トライ メルマガ登録フォーム http://www.netbiz-try.com/touroku.html メールアドレス contact@netbiz-try.com このレポートを読んで下さった皆さんのホームページがさらに良くなること を祈念しています 最後までお読みいただきありがとうございました - 25 Copyright(C) DAIGO SUGIYAMA All Rights Reserved