目次はじめに１動きのあるホームページの仕組み１初心者でもわかる JavaScript ２ちょっとリッチな動きを付けられる JQUERY ２ホームページにちょっとリッチな動きを付ける方法１ホームページがフワッと現れるフェードイン１- JQUERY ファイルと JavaScript

Size: px

Start display at page:

Download "目次はじめに１動きのあるホームページの仕組み１初心者でもわかる JavaScript ２ちょっとリッチな動きを付けられる JQUERY ２ホームページにちょっとリッチな動きを付ける方法１ホームページがフワッと現れるフェードイン１- JQUERY ファイルと JavaScript "

あおいさどひら
7 years ago
Views:

2 著作権についてこのレポートは著作権法で保護されている著作物です下記の点にご注意頂きご利用下さいこのレポートの著作権は作成者杉山大悟にありますこのレポートに書かれた情報は作成時点での著者の見解等です著者は事前許可を得ずに誤りの訂正及び情報の変更見解の変更等を行う権利を有しますこのレポートは下記の事項に同意された場合のみお読み頂くことができます著作権者の許可なくこのレポートの全部又は一部及び付属するデータ等をいかなる手段においても複製転載流用転売等することを禁じますこのレポートの作成には万全を期しておりますが万一誤り不正確な情報等がありましても著者は一切の責任を負わないことをご了承願いますこのレポートを利用することにより生じたいかなる結果につきましても著者は一切の責任を負わないことをご了承願います著作権等違反の行為を行った場合及びその他不法行為に該当する行為を行った場合は関係法規に基づき損害賠償請求を行う等民事刑事を問わず法的手段による解決を行う場合があります -2Copyright(C) DAIGO SUGIYAMA All Rights Reserved

このレポートの作成には万全を期しておりますが万一誤り不正確な情報等がありましても著者は一切の責任を負わないことをご了承願いますこのレポートを利用することにより生じたいかなる結果につきましても著者は一切の責任を負わないことをご了承願います

3 目次はじめに１動きのあるホームページの仕組み１初心者でもわかる JavaScript ２ちょっとリッチな動きを付けられる JQUERY ２ホームページにちょっとリッチな動きを付ける方法１ホームページがフワッと現れるフェードイン１- JQUERY ファイルと JavaScript ファイルの読込み設定２- フェードインするホームページや画像にＣＳＳのクラスを設定３- フェードインするための JavaScript 関数作成２クリックすると画像が出てくるスライドイメージ１２３４- JQUERY ファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定スライドする要素を指定するためのＣＳＳ設定スライドする画像とスライドするためのスイッチテキストを設定スライドするための JavaScript 関数作成３サンプルサイトの使い方おわりに -3Copyright(C) DAIGO SUGIYAMA All Rights Reserved

JavaScript 関数作成２クリックすると画像が出てくるスライドイメージ１２３４- JQUERY ファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定スライドする要素を指定するためのＣＳＳ設定

4 はじめにこのレポートはホームページ作成初心者の方でも動きのあるちょっとリッチなホームページを作るための解説書ですホームページに動きを付けたいけれどプログラムはわからないしそんなホームページ作成初心者の方でも本レポートを読み進めながら実践してもらうことでホームページにちょっとリッチな動きを付けることができますちょっとリッチな動きを付けるために JavaScript というプログラムを使い JavaScript の機能を拡張した JQUERY というライブラリ(JavaScript のプラグインみたいなもの)を使いますと言っても難しいことは無く書くコード自体はほんの数行です必要なところのみ解説しますので初めはこのマニュアル通りにやってみて慣れていきましょう HTML と CSS を理解できれば大丈夫なので HTML と CSS がわからない方は先に HTML と CSS について学んで下さい -4Copyright(C) DAIGO SUGIYAMA All Rights Reserved

JQUERY というライブラリ(JavaScript のプラグインみたいなもの)を使いますと言っても難しいことは無く書くコード自体はほんの数行です必要なところのみ解説しますので初めはこのマニュアル通りにやってみて

5 動きのあるホームページの仕組み動きのあるホームページはＨＴＭＬやＣＳＳにプログラムを追加することで見映えのする表現豊かなホームページを作ることができますプログラムと聞くと何だか難しそうと思うかもしれませんがプログラムを理解するのでは無く先にホームページに動きを付ける方法だけを覚えることでプログラムを理解していなくても表現豊かなホームページを作ることができますなぜそうやるのかを理解するのでは無くてこれをこうすればこうなるというルールをそのまま覚えることを優先していきます１初心者でもわかる JavaScript JavaScript というプログラム言語について少しだけお話したいと思います JavaScript は WEB ブラウザ(ホームページを見るためのソフト)上で実行されるプログラムですと言ってもなんだかよくわかりませんよね(^^;) -5Copyright(C) DAIGO SUGIYAMA All Rights Reserved

これをこうすればこうなるというルールをそのまま覚えることを優先していきます１初心者でもわかる JavaScript JavaScript というプログラム言語について少しだけお話したいと思います

6 ＷＥＢブラウザはインターネットエクスプローラＩＥや FireFox などのホームページを閲覧するためのソフトのことですイメージで表すとこんな感じです WEB サーバーにある HTML CSS JavaScript のファイルを自分のパソコンにダウンロードします WEB ブラウザが HTML と CSS を解釈しホームページを表示します JavaScript は WEB ブラウザによって実行されるという仕組みです仕組み自体はそんなに難しくないんですねそもそもプログラムを難しいと感じるのはシンプルなことが複雑に絡み合っているからです一つ一つはすごく単純な仕組みなんですが単純な仕組みの一つ一つが関連性を持ち合い複雑に絡み合っているから難しく見える -6Copyright(C) DAIGO SUGIYAMA All Rights Reserved

ブラウザによって実行されるという仕組みです仕組み自体はそんなに難しくないんですねそもそもプログラムを難しいと感じるのはシンプルなことが複雑に絡み合っているからです

7 難しいという先入観はひとまず置いておいてこのレポートではこうすればこうなるというルールだけを覚えるようにしていきましょう２ちょっとリッチな動きを付けられる JQUERY JQUERY は JavaScript で出来ることを手助けしてくれるサポーターです JavaScript だけで行うことが難しいことを手助けしてくれますどちらかというとこれからお話するホームページがフワッと現れるフェードインの方法などはこの JQUERY の使い方を学ぶことになりますと言っても使い方はカンタン使い方のヒントは包み込む(ラップする)です例えばボタン画像を包み込んでフワッと表示するホームページを包み込んでフワッと表示するこの包み込む(ラップする) ということが鍵になりますではどうやって画像やホームページを包み込むのかそれを次項以降でお話ししていきますが先に JQUERY のライブラリファイルをダウンロードしておきましょう JQUERY は下記のサイトからダウンロードできます -7Copyright(C) DAIGO SUGIYAMA All Rights Reserved

と言っても使い方はカンタン使い方のヒントは包み込む(ラップする)です例えばボタン画像を包み込んでフワッと表示するホームページを包み込んでフワッと表示するこの包み込む(ラップする) ということが鍵になりますではどうやって

下図の Download jquery ボタンをクリックして JQUERY ライブラリファイルをダウンロードして下さいもしダウンロードできない時は本レポート付属のサンプルサイトに jquery.

9 ホームページにちょっとリッチな動きを付ける方法あなたのホームページをよりたくさんの人に見てもらうためにはあなたのホームページを見る理由が必要です例えばおもしろいコンテンツや楽しいコンテンツがたくさんあるデザインやレイアウトが良いナビゲーションがしっかりしていて閲覧しやすい頻繁に更新されていて常に新しい情報がある他の訪問者とコミュニケーションが取れる場があるなどあなたのサイトを見ることに価値を感じるからこそ訪問者はあなたのサイトを訪れます最近はホームページの内容が充実してデザインも質の高いものが増えてきて他のホームページと見た目もあまり差を感じられないホームページが数多くありますそんな中でホームページ作成初心者でも比較的カンタンに差を出せる要素がアニメーションですコンテンツの内容を充実させたり見た目のデザインを良くすることは経験を積んでスキルを磨いていかないとなかなか難しいですよねでもホームページに少し動きを付けてちょっとリッチなホームページにすることはできます小さな差でも少しずつホームページを良くしていくことで数ヵ月後には大きな差となりますので一つずつホームページを良い方向に変えていきましょう -9Copyright(C) DAIGO SUGIYAMA All Rights Reserved

を感じられないホームページが数多くありますそんな中でホームページ作成初心者でも比較的カンタンに差を出せる要素がアニメーションですコンテンツの内容を充実させたり見た目のデザインを良くすることは経験を積んでスキルを磨いていかないとなかなか難しいですよねでも

10 １ホームページがフワッと現れるフェードインここからはホームページを透明な状態から少しずつ不透明な状態に変化させて表示するフェードインについてお話していきますフェードインの作成手順は１ＪＱＵＥＲＹファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定をする２フェードインするホームページや画像にＣＳＳのクラスを設定する３フェードインするための 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

下記のコードは<head> </head>の間に追加して下さい <script type="text/javascript" src="../jquery.min.

11 コードの追加例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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

org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>ホームページ作成初心者でもできる動きのあるちょっとリッチなホームページの作り方</title> <link href="../mainbase.

12 このＣＳＳファイルをＨＴＭＬで読み込みますＣＳＳファイルの名前が 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

class="sample_img"> <img src="../image/room.

13 ３フェードインするための JavaScript 関数を作成する関数って何そう思われるかもしれませんがここではおまじないだと思っておいて下さい初めにお話したとおりこのレポートではプログラムについての説明では無く方法だけを説明していきますなので今はわからないところはおまじないとして入れるそうすることでプログラムにつまずくことなくフェードイン表示することができますまず始めにＷＩＮＤＯＷＳに付属のメモ帳 notepad) で空のテキストを作成しますファイル名を function.js として作成して下さいちなみに拡張子が js のファイルは JavaScript コードの書かれたファイルのことですそしてそこに書くおまじないは function img_fadein1(){ $(".sample_img").fadein(500); } これだけです何か見覚えのある文字がありますね赤文字の sample_img これはさっき設定したＣＳＳファイルのクラス名です - 13 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

$ファイル名を function.js として作成して下さいちなみに拡張子が js のファイルは JavaScript コードの書かれたファイルのことですそしてそこに書くおまじないは function img_fadein1(){ $(".$

14 その後の青文字で書いてある 500 の数字この数字はフェードインを始めてから画像などの要素の表示が完了するまでの時間を表しています 500 は 500 ミリ秒なので 0.5 秒になります 1 秒 1000 ミリ秒 2 秒 2000 ミリ秒 10 秒ミリ秒なので任意のフェードイン時間を指定することができます表示速度がどれくらい変わるのかはこのレポートに付属のサンプルを見てみてくださいこれでようやく完成と言いたいところですが実はまだ一つ設定していないことがありますいつフェードイン表示するのかということを指定していませんよねこのままでは普通に表示されてしまいますなのでここではホームページ読込時にフェードインするようにしてみましょうこの指定はｈｔｍｌコードの<body>タグの部分を <body onload="img_fadein1();"> に変更します - 14 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

てみてくださいこれでようやく完成と言いたいところですが実はまだ一つ設定していないことがありますいつフェードイン表示するのかということを指定していませんよねこのままでは普通に表示されてしまいますなのでここでは

15 赤文字の img_fadein1 は先ほど作成した function,js に書いたコードに出てきました function img_fadein1(){ $(".sample_img").fadein(500); } これもおまじないとして同じ文字にするようにしましょうこれでようやく完成ですファイルを保存してホームページを表示させてみて下さいフワっとフェードイン表示されましたかこうやってさまざまな画像などの要素をフェードインさせることができますこれであなたのホームページもちょっとリッチなホームページになりましたねただフワツと表示させるだけでもホームページの印象がかなり変わりますどの部分をフェードイン表示するのが良いのかいろいろと試してみて下さい - 15 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

とフェードイン表示されましたかこうやってさまざまな画像などの要素をフェードインさせることができますこれであなたのホームページもちょっとリッチなホームページになりましたねただフワツ

16 ２クリックすると画像が出てくるスライドイメージテキストをクリックすると画像が出てくるスライドイメージの作り方をお話していきますスライドイメージの作成手順は１ＪＱＵＥＲＹファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定をする２スライドする要素を指定するためのＣＳＳ設定をする３スライドする画像とスライドするためのスイッチテキストを設定する４スライドするためのＪａｖａＳｃｒｉｐｔ関数を作成するの４つになります１ＪＱＵＥＲＹファイルとＪａｖａＳｃｒｉｐｔファイルの読込み設定これは前項のフェードインで設定した方法と全く同じですのでフェードインの項を参照して下さい２スライドする要素を指定するためのＣＳＳのクラスを設定をする次にＣＳＳのクラスを利用してどの要素をスライドさせるために利用するのかを指定しますクラス名は任意の名前でよいのですがここではｓａｍｐｌｅ_ｉｍｇというクラス名を設定することにしましたＣＳＳファイルを作成し下記の内容を追加して下さい.slide{ width:??px; margin:??px; padding:??px; border:??px; } - 16 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

$ここではｓａｍｐｌｅ_ｉｍｇというクラス名を設定することにしましたＣＳＳファイルを作成し下記の内容を追加して下さい.slide{ width:??px; margin:??px; padding:??px; border:?$

17 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

下記のコードをホームページのＨＴＭＬに追加して下さい <div class="slide"> <dt> サンプル</dt> <dd> <img src="../image/sample.

18 ４スライドするためのＪａｖａＳｃｒｉｐｔ関数を作成するフェードインの時と同様の手順でＷＩＮＤＯＷＳに付属のメモ帳 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

slidedown(500); }); }); ここでも見覚えるのある文字が出てきました赤文字の slide これは先ほどＣＳＳファイルで設定したクラス名でしたね青文字の 500 はフェードインの時と同じように画像の表示が完了されるまでの時間です 500 は

19 サンプルサイトの使い方ここまでホームページをフワっと表示させるフェードインの作り方とスライドしながら現れるスライドイメージの作り方をお話してきましたでも書いたとおりやってみたけど上手くいかない書いている内容がよくわからないそんな方のために実際にこのレポートに書いてあるちょっとリッチな動きのあるサンプルサイトを作りましたこのサイトにあるソースコードを読むことでこのレポートの内容がより理解しやすくなると思いますソースコードはそのままコピーペーストで使って頂いてもかまいせんが画像は著作権で保護されていますので使わないで下さいねそれではサンプルサイトの説明をしていきたいと思いますサンプルサイトは以下のＵＲＬからダウンロード後解凍ソフトで解凍して下さい解凍ソフト Lhaplus - 19 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

ソースコードはそのままコピーペーストで使って頂いてもかまいせんが画像は著作権で保護されていますので使わないで下さいねそれではサンプルサイトの説明をしていきたいと思いますサンプルサイトは以下のＵＲＬからダウンロード後

20 サンプルサイト index.html を開くと下図のようなホームページが表示されますフェードインの項目では画像をフェードインさせた場合とホームページをフェードインさせた場合の２通りのフェードイン効果を確認することができます右側に表記している時間はフェードインが完了するまでの時間を表しています - 20 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

22 フェードイン項目のホームページがフワッと現れるフェードイン(サイト 0.5 秒をクリックすると下図のホームページが表示されますホームページがフワッと現れるフェードイン(サイトはホームページ全体がフェードインしますこちらも赤枠で囲っている部分の秒数をクリックするとそれぞれのフェードイン完了時間のホームページが表示されますので完了時間の違いを確認してみて下さい - 22 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

24 おわりにプロフィール自己紹介このたびは杉山大悟のレポートをダウンロードいただき誠にありがとうございます簡単にではありますが私の自己紹介をさせて頂きます本名 : 杉山大悟職業 : IT エンジニア WEB デザイナアフィリエイター特技 : プログラミングとドラミング(ドラム演奏) 座右の銘 : 継続は力なりアフィリエイト用のクリック解析システムやブログ投稿管理システムなどを作りながら企業向けの工学系検索システムなどを開発しています今後もいろいろなツール開発に挑戦していきたいと思っていますメールサポートについて私が運営しているメルマガ初級者のためのネットビジネスメルマガインターネット Biz トライではネットビジネスに特化した WEB サイトの制作過程をそのまま公開するなどこのレポートよりかなり濃い WEB サイト制作の裏側やマーケティング手法などを公開していますご自分のサイトをさらに進化させたい方はぜひ読んでみて下さい - 24 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

25 このレポートの内容をきちんと実践してつまずいてしまったりうまくいかないという方にはメルマガ内でメールサポートをさせて頂くことにしましたメルマガに登録いただいた後私までメールを頂ければサポートさせて頂きます件名はメールサポートと記載の上本文にご質問内容を書いてお送り下さいメルマガ初級者のためのネットビジネスメルマガインターネット Biz トライメルマガ登録フォームメールアドレスこのレポートを読んで下さった皆さんのホームページがさらに良くなることを祈念しています最後までお読みいただきありがとうございました - 25 Copyright(C) DAIGO SUGIYAMA All Rights Reserved

Microsoft Word - MOBO

Microsoft Word - MOBO 画像にモザイクモザイクぼかし楽々使い方 ( 画像付き ) まっきー著推奨環境このレポート上に書かれている URL はクリックできますできない場合は最新の Adobe Reader を無料でダウンロードしてください http://www.adobe.co.jp/products/acrobat/readstep2.html 著作権についてこのレポートは著作権法で保護されている著作物です