Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

習得度確認試験５　の回答

授業 HTML5

Webサイト制作科 | 習得度確認試験５

 

【問１】セクションのヘッダー領域を定義するタグは何か書きなさい

【答１】header

 

【問２】一般的なドキュメント・セクションやアプリケーション・セクションを定義するタグは何か書きなさい

【答２】section

 

【問３】他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを定義するタグは何か書きなさい

【答３】nav

 

【問４】ニュースやブログなどの独立したコンテンツ領域を定義するタグは何か書きなさい

【答４】article

 

【問５】前後のコンテンツには関係しているけれども、やや本筋から免れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを定義するタグは何か書きなさい

【答５】aside

 

【問６】入力欄に入力例を表示する属性は何か書きなさい

【答６】placeholder

 

【問７】必須チェックを行う属性は何か書きなさい

【答７】riquired

 

【問８】最初の入力項目に自動的にフォーカスさせる属性は何か書きなさい

【答８】autoforcus

 

【問９】コンテンツから参照される画像やイラスト、ソースコード、動画などを定義するために定義するタグは何か書きなさい

【答９】figure

 

【問１０】レスポンシブWebデザインでサイトを作成するとき、デバイスごとの表示を変化させるタイミングを指定するポイントを何と呼ぶか書きなさい

【答１０】ブレイクポイント

6/16(月)授業メモ　HTML5

授業 HTML5

今日はHTML5でレスポンシブWEBデザイン、ボックスとテキストにシャドウを付ける。

 

①可変レイアウトパターン：HTML+CSS

　学校のブログ 2014-07-08の記事の「可変レイアウトパターン：HTML+CSS」をもとに進行。

 

②ボックスとテキストにシャドウを付ける。

学校のブログ 2014-07-23の記事の「CSS３シャドウ」をもとに進行。

2-1. #bShadow は、ボックスにシャドウを付ける。

2-2. inset　は内側にシャドウがかかる

2-3. ブログ7/23を参照

2-4. ボックスシャドウ

ソース

<body>
<div id="bShadow1"></div>
<div id="bShadow2"></div>
<div id="bShadow3"></div>
</body>


スタイル

#bShadow3 {

 -webkit-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;

 -moz-box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;

 box-shadow: 0 0 6px #f00, inset 0 0 6px #00f;

}

※ 1. 0 0 6px #f00は外側へ

※ 2. inset 0 0 6px #00fは内側へ

※ 3. insetは内側にシャドウを付ける指示

※ 4. bShadow は boxShadow を示している

2-5. テキストシャドウ

ソース

<body>

<div id="tShadow1">テキスト<br>シャドウ</div>

<div id="tShadow2">テキスト<br>シャドウ</div>

<div id="tShadow3">テキスト<br>シャドウ</div>

<div id="tShadow4">テキスト<br>シャドウ</div>

</body>

 

スタイル

#tShadow2 {
 text-shadow: 0 0 6px #666;
 color: #fff;
}

※ 1. ヨコ　タテ　シャドウの大きさ（幅）　色

※ 2. color は文字色

 

#tShadow4 {
 text-shadow: -40px -10px 0 #f00, 40px 10px 10px #00f;
}

※ 1. シャドウはたくさん付けれる。（３個まで付けられた）

HTML5 まとめ問題

HTML5

Q1. HTML5の説明で正しいものはどれか

  1. これまでのHTMLを大幅に改定したHTML第5改訂版
  2. HTMLやXHTMLの文書作成機能を改良し、より構造化しやすいタグが利用できる
  3. 次世代のWeb環境に合うように仕様を作成
  4. W3C(World Wide Web Consortium）の管理下で仕様を策定
  5. 1から4全て

A1.4

 

Q2. headerタグの正しい説明はどれか

  1. 文書またはセクションのナビゲーション領域を定義するタグ
  2. セクションのヘッダー領域を定義するタグ
  3. セクションと関連するコンテンツ領域を定義するタグ
  4. HTML文書内のコンテンツ領域を定義するタグ

A2. 2

 

Q3. HTML5のDOCTYPE宣言はどれか

  1. <!doctype html>
  2. <!DOCTYPE HTML5>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML5//EN">
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML5//EN" "http://www.w3.org/TR/html5/strict.dtd">

A3. 1

 

Q4.空要素の終了タグ代わりの/が不要なタグはどれか

  1. input
  2. br
  3. meta
  4. link
  5. 1から4全て

A4. 5

 

Q5. 終了タグを省略できないタグはどれか

  1. p
  2. table
  3. tr
  4. option

A5. 2

 

Q6. ナビゲーション領域を定義するタグはどれか

  1. sectionタグ
  2. asideタグ
  3. articleタグ
  4. navタグ

A6. 4

 

Q7.articleタグの正しい説明はどれか

  1. セクションと関連するコンテンツ領域を定義するタグ
  2. HTML文書内のコンテンツ領域を定義するタグ
  3. ニュースやブログなどの独立したコンテンツ領域を定義するタグ
  4. 文書またはセクションのナビゲーション領域を定義するタグ

A7. 3

 

Q8. HTML5の仕様に含まれていないものはどれか

  1. Canvas機能
  2. マルチメディア要素
  3. 構造化要素
  4. セキュリティ機能

A8. 4

 

Q9. HTML5のmetaタグで文字エンコーディングの記述はどれか

  1. <meta charset="utf-8">
  2. <meta content="text/html; charset=utf-8">
  3. <meta http-equiv="Content-Type" charset=utf-8>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

A9. 1

 

Q10. addressタグはどんな目的で使用すべきか

  1. サイト運営者の連絡先情報や記事の連絡先情報をマークアップするため
  2. ルビになる文字列を指定するため
  3. 見出しタグのh1、h2・・・h6を使用するときにグルーピングするため
  4. コンテンツから参照される画像やイラスト、ソースコード、動画などを定義するため

A10. 1

 

Q11. サイトの運営者に関する情報を配置するタグはどれか

  1. navタグ
  2. secitonタグ
  3. footerタグ
  4. headerタグ

A11. 3

 

Q12. Webページの文章をハイライトにする要素はどれか

  1. highlightタグ
  2. h1タグ
  3. strongタグ
  4. markタグ

A12. 4

 

Q13. type属性にcolorを設定するとどうなるか

  1. カラーピッカー表示
  2. カラーコード選択リスト表示
  3. 指定した色の文字表示
  4. カラーチェック

A13. 1

 

Q14. 追加されたフォームのtype属性に含まれないものはどれか

  1. tel
  2. address
  3. url
  4. email

A14. 2

 

Q15. type属性でnumberと併せて設定できる属性はどれか

  1. time属性
  2. step属性
  3. round属性
  4. range属性

A15. 2

 

Q16. novalidate属性は何のための設定か

  1. 入力欄の形式チェックをしない
  2. 日付チェック
  3. 数値チェック
  4. 必須チェック

A16. 1

 

Q17. placeholder属性は、何を設定する属性か

  1. 入力欄に入力例
  2. 数値や日付の最大値
  3. 数値や日付の入力幅
  4. オートコンプリート機能

A17. 1

 

Q18. 日付の入力欄を作成するにはtype属性に何を設定すればよいか

  1. week
  2. calendar
  3. day
  4. date

A18. 4

 

Q19. HTML5のAPI群に含まれていないものはどれか

  1. Web Workers
  2. Web Network
  3. Web Socket
  4. Web Storage

A19. 2

 

Q20. 追加された入力サポート属性に含まれないものはどれか

  1. placeholder
  2. autosupport
  3. autocomplete
  4. list

A20. 2

 

Q21. HTML5のキャンバス機能の説明で正しいものはどれか

  1. Webページ内で要素を移動したり、ファイルをアップロードすることができる機能
  2. オフラインでWebページを閲覧したり、Webアプリケーションを動作するための機能
  3. 異なるウィンドウ(フレーム)間でメッセージの送受信できる機能
  4. グラフィックス描画をするための領域を定義し、JavaScriptで描画する機能

A21. 4

 

Q22. progressタグは何を表示するタグか

  1. 計算結果を定義するタグ
  2. 詳細情報を定義するタグ
  3. 処理の進捗を表示するタグ
  4. 規定範囲の測定結果を表示するタグ

A22. 3

 

Q23. required属性は何のための設定か

  1. 必須チェック
  2. 日付チェック
  3. 指定したパターンチェック
  4. 入力欄の形式チェックをしない

A23. 1

 

Q24. HTML5で追加された入力チェックの属性はどれか

  1. alphanumber
  2. pattern
  3. autocheck
  4. alphabet

A24. 2

 

Q25. 1つの入力欄に複数の入力を可能にする属性はどれか

  1. several
  2. plural
  3. multiple
  4. many

A25. 3

6/12(木)の授業メモ

PHP 授業

①PHPのメールフォーム

青地部を書き換え。

赤字部を追記する。

 

<table>

<tr>

<th><label for="name">お名前:<br><span>※必須</span>&nbsp;&nbsp;３０文字以内</label></th>

<td><input type="text" name="name" id="name" size="76" maxlength="30" placeholder="例：東京太郎"

value="<?php echo h($name); ?>"　required　></td>

</tr>

<tr>

<th><label for="email">email:<br><span>※必須</span>&nbsp;&nbsp;５０文字以内</label></th>

<td><input type="emaiｌ" name="email" id="email" size="60" maxlength="50"placeholder="例：sample@sample.com" value="<?php echo h($email); ?>" required ></td>

</tr>

<tr>

<th><label for="message">お問い合わせ:<br><span>※必須</span>&nbsp;&nbsp;128文字以内</label></th>

<td><textarea name="message" id="message" cols="30" rows="5" maxlength="128" placeholder="例：御社商品の資料請求を致します。" ><?php echo h($message); ?></textarea></td>

</tr>

</table>

 

②maxlength

と

required

がテストにでる

 

③AIはauto incrementの略

 

④ゲシュタルトの7法則

  1. 近接（Ploximity）
  2. 類同（Similarity）
  3. 連続（Continuity）
  4. 閉合（Closure）
  5. 共通運命（Common Fate）
  6. 面積（Area）
  7. 対称性（Symmetry）

 

⑤デザインとは、クライアントを説得するものがないとダメ！



PHPの基本

PHP

PHPの基本を書きます。

 

①拡張子は「 .php 」で保存する。

 

②<?php ........... ?>　の　<php　と　?>　の間に記述する。

※PHPの記述の後にPHP以外の記述が無い場合は、　?>　の記述は無くて良い。

 

③文字列を表示させたい場合は、

print ( ' 文字列 ' );　または　print ( " 文字列 " );

print ' 文字列 ' ;　または　print " 文字列 " ;

私は、基本的には　print ' 文字列 ' ;　の記述をしていきます。

※末尾のセミコロン（ ; ）の記述を忘れないようにする。

※改行したい場合は、　'<br>'　を記述する事。

 

④キーワード（意味ある単語）は、空白で区切る。

例）

print ' こんにちは、世界！<br> ' ;

print

        ' こんにちは、PHP! ';

※複数の空白も可

※タブや改行も、一種の空白です。

 

 

⑤命令文の大文字と小文字とを区別はしない。

例）

◯ : pRint ' こんにちは、世界！ ;

◯ : PRINT ' こんにちは、PHP! ';

 

⑥コメントは、//　と　/* 〜 */ を使用する。

//　は１行だけ適用される。

/* 〜 */　は　〜　の箇所に記述すると複数行可能になる。

 

 

⑦変数の名前には「　$　」を先頭に記述する。

例）

◯ : $flag

× : flag

 

⑧変数名の先頭は必ず英文字 or アンダースコア（ ＿ ) を記述する。

例）

◯ : $a_1

× : $1_a

 

⑥変数名の２文字目以降は、英数字かアンダースコア。

例）

◯ : $name

× : $@

 

⑦変数名の大文字／小文字は区別される。

※ ⑤で書いた、命令文の大文字と小文字とを区別はしない。と混同しないように気をつける。例えば、$name　と　$NAME は違う変数である。

 

⑧コードは読みやすく。

i  ) 変数の中身を理解しやすく／

例）

◯ : $title

△ : $a

 

ii ) 長すぎず、かつ省略しない。

例）

◯ : $password

△ : $pw

△ : $passwprdForMySqlDatabase

 

iii )似たような名前は付けない。

例）

△ : $usr と $user を使う。

 

iv ) 決められた記法で統一する。

キャメルケース記法 : $myName

アンダースコア記法 : $my_name

Pzscal記法 : $MyName

 

 

 

 

 

6/5授業メモ　PHP

ＩＤの盗難を防ぐ

init.phpのsession_start( ); が動いたら cookie が動く。

 

- index.php -

<?php

require_once dirname(__FILE__).'./init.php';

 

$name = '';

$email = '';

$message = '';

if(isset($_SESSION['mail_data'])){

 $name = $_SESSION['mail_data']['name'];

 $email = $_SESSION['mail_data']['email'];

 $message = $_SESSION['mail_data']['message'];

}

?>

 

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>お問い合わせ入力フォーム</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div id="container">

<h1>お問い合わせ入力フォーム</h1>

<form action="check.php" method="post" id="mailform">

<table>

<tr>

<th><label for="name">お名前:<br><span>※必須</span>&nbsp;&nbsp;３０文字以内</label></th>

<td><input type="text" name="name" id="name" size="30" placeholder="例：東京太郎"

value="<?php echo h($name); ?>"></td>

</tr>

<tr>

<th><label for="email">email:<br><span>※必須</span>&nbsp;&nbsp;５０文字以内</label></th>

<td><input type="text" name="email" id="email" size="50" placeholder="例：sample@sample.com" value="<?php echo h($email); ?>"></td>

</tr>

<tr>

<th><label for="message">お問い合わせ:<br><span>※必須</span>&nbsp;&nbsp;128文字以内</label></th>

<td><textarea name="message" id="message" cols="30" rows="5" placeholder="例：御社商品の資料請求を致します。" ><?php echo h($message); ?></textarea></td>

</tr>

</table>

<input type="submit" value="確認">

</form>

</div>

</body>

</html>

 

<?php

ob_end_flush();

 

- check.php -

<?php
require_once dirname(__FILE__).'./init.php';

//POSTデータが渡ってきているかチェックする
  //渡ってきてなかったら、先頭ページへ返す
if(empty($_POST)){
  header('Location:index.php');
  exit;
}

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$error = true;


$name_error = '';
$email_error = '';
$message_error = '';




//名前の入力画数の最大入力画数を決める
if(mb_strlen($name, 'UTF-8')>30){
  $name_error = 'お名前が長すぎます。';
  $error = false;
}

//メールアドレスの最大入力画数を決める
if(mb_strlen($email, 'UTF-8')>50){
  $email_error = 'メールアドレスが長すぎます。';
  $error = false;
}



//メッセージの最大入力画数を決める
if(mb_strlen($message, 'UTF-8')>128){
  $message_error = 'お問い合わせ内容が長すぎます。';
  $error = false;
}

//@マークのチェック
if(strpos($email, '@') === false){
  $email_error = '不正なメールアドレスです。';
  $error = false;
}

//半角チェック
if(strlen($email) !== mb_strlen($email, "utf-8")){
  $email_error = '半角数字で入力してください。';
  $error = false;
}

//空文字チェック
if($name==''){
  $name_error = 'お名前が、入力されていません。';
  $error = false;
}
if($email==''){
  $email_error = 'メールアドレスが、入力されていません。';
  $error = false;
}
if($message==''){
  $message_error = 'お問い合わせ内容が、入力されていません。';
  $error = false;
}

$_SESSION=array();
$_SESSION['mail_data'] ['name'] = $name;
$_SESSION['mail_data'] ['email'] = $email;
$_SESSION['mail_data'] ['message'] = $message;
$_SESSION['mail_date'] ['error'] = $error;

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ確認画面</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div id="container">
<h1>お問い合わせ確認</h1>
<table>
<tr>
<th>お名前:</th><td><?php echo h($name) . h($name_error); ?></td>
</tr>
<tr>
<th>email:</th><td><?php echo h($email) . h($email_error); ?></td>
</tr>
<tr>
<th>お問い合わせ内容:</th><td><?php echo nl2br(h($message) . h($message_error)); ?></td>
</tr>
</table>
<p><a href="index.php">戻る</a>
<?php
if($error){
  echo '<a href="thanks.php">送信</a>';
}
?>
</p>
</div>
</body>
</html>
<?php
ob_end_flush();

 

- thanks.php -

<?php
require_once dirname(__FILE__).'./init.php';

if(!$_SESSION['mail_date'] ['error']){
  header('Location:index.php');
  exit;
}

//セッションから値を取得
$name = $_SESSION['mail_data']['name'];
$email = $_SESSION['mail_data']['email'];
$message = $_SESSION['mail_data']['message'];

//セッションを取っておく必要がないのでクリア
$_SESSION['mail_data'] =array();
unset($_SESSION['mail_data']);

if( isset( $_COOKIE[ session_name() ] )) {
  setcookie( session_name(), '', time()-42000, '/');
}



//クライアントへのメール送信内容の設定
$to = 'xxxxxxxxxx@gmail.com';
$subject = 'お問い合わせメール';
$body =<<<BODY
 【お問い合わせメール】
以下の内容で承りました。
お名前：
{$name}
メールアドレス：
{$email}
メッセージ：
{$message}
BODY;

//メールのコーディング設定
mb_language('japanese');
mb_internal_encoding("UTF-8");

$r = mb_send_mail( $to , $subject , $body );

$thanks_message ='上記の内容でお問い合わせメールを承りました。';

if(!$r) {
 $thanks_message ='メール送信エラー。以下お問い合わせは送信されませんでした。';
}


?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>送信完了</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>送信完了</h1>
<table>
<tr>
<th>お名前:</th>
<td><?php echo h($name); ?></td>
</tr>
<tr>
<th>email:</th>
<td><?php echo h($email); ?></td>
</tr>
<tr>
<th>お問い合わせ内容:</th>
<td><?php echo nl2br(h($message)); ?></td>
</tr>
</table>
<p>
<?php
if(!$r){
  echo '<span>' . h($thanks_message) . '</span>';
} else {
  echo h($thanks_message);
}
?>
</p>
<p><a href="index.php">戻る</a></p>
</div>
</body>
</html>
<?php
ob_end_flush();

 

 

- init.php -

<?php

function h($str){

 return htmlspecialchars($str,ENT_QUOTES,"UTF-8");

}

header('X-Frame-OPTIONS:DENY');

ob_start();

session_start();

session_regenerate_id(true);

 

①init.php　の　session_start(　);　の下に　session_regenerate_id(true);　を記述する。

※session_regenerate_id(true);　は、cookie　のIDを新しく更新される。

 

②thanks.php に記述

$_SESSION['mail_data'] =array();

unset($_SESSION['mail_data']);

の下に下記を記述

if( isset( $_COOKIE[ session_name() ] )) {

 setcookie( session_name(), '', time()-42000, '/');

}

※''はシングルコーテーションを2個です。

※$_COOKIEは、グローバル変数サーバーに保存されている。

※time( )-42000は、今から-42000がすでに有効期限が切れているよ！と言っている。

 

③session_destroy()

※サーバー側にも削減を命令

 

④check.php

if(strlen($tel) !== mb_strlen($tel, "utf-8")){

 $tel_error = '半角数字で入力してください。';

 $error = false;

} else {

 if(strlen($tel)>13){

    $tel_error = 'お電話番号が長すぎます。';

    $error = false;

 }

}

 

の赤字を削除。

 

if(strlen($tel) !== mb_strlen($tel, "utf-8")){

 $tel_error = '半角数字で入力してください。';

 $error = false;

}

if(strlen($tel)>13){

 $tel_error = 'お電話番号が長すぎます。';

 $error = false;

}

 

⑤空文字チェック、半角、文字列の長さ

 

⑥

if($name==''){

 $name_error = 'お名前が、入力されていません。';

 $error = false;

}

if($email==''){

 $email_error = 'メールアドレスが、入力されていません。';

 $error = false;

}

if($tel==''){

 $tel_error = 'お電話番号が、入力されていません。';

 $error = false;

}

if($message==''){

 $message_error = 'お問い合わせ内容が、入力されていません。';

 $error = false;

}

 

を

 

$name_error = '';

$email_error = '';

$tel_error = '';

$message_error = '';

 

の下から

 

if(strlen($message)>128){

 $message_error = 'お問い合わせ内容が長すぎます。';

 $error = false;

}

 

の下に移動。

 

⑦

if(strlen($tel) !== mb_strlen($tel, "utf-8")){

 $tel_error = '半角数字で入力してください。';

 $error = false;

}

 

を

 

if(strpos($email, '@') === false){

 $email_error = '不正なメールアドレスです。';

 $error = false;

}

 

の下から

 

if(strlen($message)>128){

 $message_error = 'お問い合わせ内容が長すぎます。';

 $error = false;

}

 

の下へ移動する。

 

⑧

if(strlen($tel) !== mb_strlen($tel, "utf-8")){

 $tel_error = '半角数字で入力してください。';

 $error = false;

}

 

をコピーしてすぐ下にペーストして　$tel を　$email に書き換えて

 

if(strlen($email) !== mb_strlen($email, "utf-8")){

 $email_error = '半角数字で入力してください。';

 $error = false;

}

 

にする。

 

⑨

if(strpos($email, '@') === false){

 $email_error = '不正なメールアドレスです。';

 $error = false;

}

を

 

if(strlen($email)>50){

 $email_error = 'メールアドレスが長すぎます。';

 $error = false;

}

 

の下から

 

if(strlen($message)>128){

 $message_error = 'お問い合わせ内容が長すぎます。';

 $error = false;

}

 

の下に移動

 

⑩メールアドレスは、;を入れると複数入れられる。

 

⑪check.php に赤字（ mb_　と　,'UTF-8' ）を追記する。

if(mb_strlen($name,'UTF-8')>30){

 $name_error = 'お名前が長すぎます。';

 $error = false;

}

 

if(mb_strlen($email, 'UTF-8')>50){

 $email_error = 'メールアドレスが長すぎます。';

 $error = false;

}

 

if(mb_strlen($tel, 'UTF-8')>13){

 $tel_error = 'お電話番号が長すぎます。';

 $error = false;

}

 

if(mb_strlen($message, 'UTF-8')>128){

 $message_error = 'お問い合わせ内容が長すぎます。';

 $error = false;

}

 

⑫電話番号の入力フォームを消す。

bxSlider

jQuery

おすすめのスライダーを紹介します。

それは、bxSliderです。

とても加工が簡単ですしIEでも表示されるのでとてもおすすめです。

 

①ファイルをダウンロード

f:id:suge1040:20140605004526p:plain

bxSliderの公式サイト(http://bxslider.com/)の右上の「Download」ボタンから必要なファイルをダウンロードします。

ダウンロードすると下記のファイルがダウンロードされます。

f:id:suge1040:20140605005034p:plain

私は、

1) imagesフォルダ名をimgに変更。

2) 拡張子がcssのファイルをcssフォルダを作成し移動。

3) 拡張子がjsのファイルをjsフォルダを作成し移動。

しファイルの整理をしました。

※「jquery.bxslider.css」、「jquery.bxslider.min.js」、「imagesフォルダ」の３つがあれば基本的に大丈夫です。

 

②ソースは下記のように記述しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="css/style.css">

<!-- jQuery library (served from Google) -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link rel="stylesheet" href="css/jquery.bxslider.css">

<script>
jQuery(document).ready(function($){
  $('.slider').bxSlider({
    auto:true,
    speed:1000,
    mode: 'fade',
    captions: false
  });
});
</script>

</head>

<body>

<div class="slider">
  <div><img src="img/01.jpg" alt=""></div>
  <div><img src="img/02.jpg" alt=""></div>
  <div><img src="img/03.jpg" alt=""></div>
</div>

</body>
</html>

 

スライドさせたい写真は、

<div class="slider">
  <div><img src="img/01.jpg" alt=""></div>
  <div><img src="img/02.jpg" alt=""></div>
  <div><img src="img/03.jpg" alt=""></div>
</div>

もも色の記述の様に中に入れるだけです。

とっても簡単です。

 

③stylesheetで形を整えます。

 

いろいろアレンジができるのでこちらのサイトを参考にして下さいね。

http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html

 

ちなみに私は、example3 を使用しました。