フォームまとめ
《input.php》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>メールフォーム</title> <style> section { width: 500px; margin: auto; text-align: center; } table { text-align: left; } td { padding: 3px; } </style> </head> <body> <section> <h1>入力画面</h1> <p>必要事項を入力して「確認する」ボタンをクリックしてください。</p> <form method="post" action="check.php"> <table border="0"> <tr> <td>お名前</td> <td><input type="text" name="name" size="50"></td> </tr> <tr> <td>メールアドレス</td> <td><input type="text" name="email" size="50"></td> </tr> <tr> <td>メッセージ</td> <td><textarea rows="5" cols="45" name="message"></textarea></td> </tr> </table> <input type="submit" name="sub1" value="確認する"> </form> </section> </body> </html>
《Encode.php》
<?php function e($str, $charset = 'UTF-8') { return htmlspecialchars($str, ENT_QUOTES, $charset); }
《check.php》
<?php //フォームデータが空の場合は処理終了 if(empty($_POST)) { echo '処理終了'; exit; } require_once 'Encode.php'; //セッションの開始 session_start(); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>メールフォーム</title> <style> section { width: 500px; margin: auto; text-align: center; } table { text-align: left; } td { padding: 3px; } </style> </head> <body> <section> <h1>確認画面</h1> <p>内容を確認してください。</p> <?php //入力値のチェック if(empty($_POST['name'])) { echo 'お名前を入力してください。'; exit; } if(empty($_POST['email'])) { echo 'メールアドレスを入力して下さい。'; exit; } if(empty($_POST['message'])) { echo 'メッセージを入力してください。'; exit; } //入力値の取得・加工 $name = e($_POST['name']); $email = e($_POST['email']); $message = e($_POST['message']); $_SESSION['name'] = $name; $_SESSION['email'] = $email; $_SESSION['message'] = $message; ?> <form method="post" action="submit.php"> <table border="0"> <tr> <td>お名前</td> <td width="300"><?php echo $name; ?></td> </tr> <tr> <td>メールアドレス</td> <td width="300"><?php echo $email; ?></td> <td>メッセージ</td> <td width="300"><?php echo nl2br($message); ?></td> </tr> <tr> <td align="right" colspan="2"> <input type="submit" name="sub1" value="送信する"> </td> </tr> </table> </form> </section> </body> </html>
《submit.php》
<?php //フォームデータが空の場合は処理終了 if(empty($_POST)) { echo '処理終了'; exit; } require_once 'Encode.php'; //セッションの開始 session_start(); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>メールフォーム</title> <style> section { width: 500px; margin: auto; text-align: center; } table { text-align: left; } td { padding: 3px; } </style> </head> <body> <section> <h1>完了画面</h1> <?php //入力値の取得・加工 $name = e($_SESSION['name']); $email = e($_SESSION['email']); $message = e($_SESSION['message']); //メール本文の組み立て mb_language('ja'); mb_internal_encoding('UTF-8'); $subject = 'お問い合わせを受け付けました。'; $to = "abc@test.com, {$email}"; $title = '【メールフォームより】'; $body = <<<EOM ------------------------------------------------------ 【Webサイトからのメール】 お名前：{$name} メールアドレス：{$email} メッセージ：{$message} ------------------------------------------------------ EOM; //メールの送信の実行 $rc = mb_send_mail($to, $title, $body); if(!$rc) { exit; } else { $_SESSION = NULL; } ?> <!-- 処理結果を表示 --> <p>以下の内容を受けたまわりました。</p> <table border="0"> <tr> <td>お名前</td> <td width="300"><?php echo $name; ?></td> </tr> <tr> <td>メールアドレス</td> <td width="300"><?php echo $email; ?></td> </tr> <tr> <td>メッセージ</td> <td width="300"><?php echo nl2br($message); ?></td> </tr> </table> </section> </body> </html>
メールの文字化けを防ぐ
mb_language("ja");
mb_internal_encoding("UTF-8");
WordPress実習(3)：テキストP184 〜 P271
RSSフィードのURLを出力する
- 「bloginfo();」のパラメータを「rss2_url」と指定する事でRSSフィードのURLが出力される
- RSSフィードには数種類のバージョンがあり、「rss2_url」と指定するとRSS 2.0となる
- パラメータ「rdf_url」はRSS 1.0、「rss_url」はRSS 0.92のフィードのURLを出力する事ができる
《index.php》
<p class="feed"> <a href="<?php bloginfo('rss2_url'); ?>"> RSS FEED</a> </p>
受信したコメントを表示する
《index.php》
<?php wp_list_comments(); ?>
受信したコメントがある時だけ出力する
<?php if(have_comments()): ?> <?php wp_list_comments(); ?> <?php endif; ?>
コメントの投稿日を出力する
- 「＜?php comment_date(); ?＞」はコメントの投稿日を出力するテンプレートタグ
- パラメータで表記形式を指定することも可能
<?php comment_date(); ?>
- 出力結果 → 2013年1月1日
<?php comment_date('m/d[D]'); ?>
- 出力結果 → 1/1[金]
コメントの投稿時間を出力する
- 「＜?php comment_time(); ?＞」はコメントの投稿時間を出力するテンプレートタグ
- パラメータで表記形式を指定することも可能
<?php comment_time(); ?>
- 出力結果 → 9:02 AM
<?php comment_time('H時i分s秒'); ?>
- 出力結果 → 01時41分23秒
コメントの投稿者名を出力する
<?php comment_author_link(); ?>
コメントのRSSフィードのリンクを出力する
<?php post_comments_feed_link(); ?>
フィードをAtom形式で出力する場合
<?php post_comments_feed_link('','','atom'); ?>
トラックバックURLを追加する
<?php trackback_url(); ?>
トラックバックの送信を許可している場合は出力する
<?php if(pings_open()): ?> <?php trackback_url(); ?> <?php endif; ?>
コメントの投稿を許可している場合は出力する
<?php if(comments_open()): ?> <?php wp_list_comments(); ?> <?php endif; ?>
受信したコメントとトラックバックを別々に出力する
「＜?php wp_list_comments(); ?＞」は標準では受信したコメントとトラックバックを一緒に出力するが、パラメータの指定により別々に出力することが可能- 受信したコメントだけ出力する
<?php wp_list_comments('type=comment'); ?>
- 受信したトラックバックだけ出力する
<?php wp_list_comments('type=pings'); ?>
コメント部分を開くリンクを追加する
- 「＜?php comments_link(); ?＞」はコメント部分のURLを出力するテンプレートタグ
<?php comments_link(); ?>
コメント数を出力
はじめてのPHP
PHPとは
PHPプログラミングの準備
PHP設定ファイルの確認
PHPスクリプトの構造
記述のルール
print命令
- print ― 文字列を出力する
- printは実際には関数ではない(言語構造)この為、引数をカッコでくくる必要はない
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP入門教室</title> </head> <body> <?php print('こんにちは、世界！<br>'); print('こんにちは、PHP！'); // 文字列を出力 ?> </body> </html>
静的なページと動的なページ
- 「静的なページ」とは、ブラウザからページを要求されるとサーバーがあらかじめ用意されていたファイル(コンテンツ)をそのまま返送するもの
- 「動的なページ」とはコンテンツの骨組みとクライアントから送信された値を結びつけた結果を返送する
- PHPは「動的なページ」を作成するための代表的な技術
変数
- テキストの記述と異なる部分はソースコードの改行の為の記述→「"\n"」
- $が追加され、出力はprint文で記述するが代入の記述はJavaScriptと同じ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP入門教室</title> </head> <body> <?php $x = 10; $y = 5; print($x.'＋'.$y.'＝'.($x + $y).'<br>'); print($x.'×'.$y.'＝'.($x * $y))."\n"; ?> </body> </html>
変数の名前付けルール
- 変数の名前は「$」で始める
- 変数名の先頭は英文字かアンダースコアであること
- 変数名の2文字目以降は英数字かアンダースコアであること
- 変数名の大文字・小文字は区別される
読みやすいコードの為の名前付け
- 変数の中身を理解しやすい
- 長すぎたり省略し過ぎたりしない
- 似たような名前を付けない
- 基本的には英単語
- 決められた記法で統一する(キャメルケース記法、アンダースコア記法、Pascal記法)
データの型
| 数値型 | 整数型(integer) | -2、0、108など |
|---|---|---|
| 浮動小数点型 | 1.1414、0.5、5.5e6など | |
| 文字列型(string) | 'こんにちは'など | |
| 真偽型(bool、boolean) | TRUE、FALSE | |
| 複合型(array、resource、object) | 上記に含まれない複合的な型 | |
文字列の表現には注意
- 変数展開が必要である場合、ダブルクォートを利用する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>PHP入門教室</title> </head> <body> <?php $url = 'http://www.wings.msn.to/'; $memo1 = "サーバサイド技術の学び舎 - WINGS({$url})"; $memo2 = 'サーバサイド技術の学び舎 - WINGS({$url})'; print($memo1.'<br>'."\n"); print($memo2."\n"); ?> </body> </html>
定数と変数の違い
- 途中で中身を変更できない入れ物の事を「定数」と呼ぶ
const TAX = 1.05;
これで定数TAX(消費税率)が宣言された事になる
フォームの作成
《request1.php》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP入門教室</title> </head> <body> <form method="post" action="request2.php"> <div id="container"> <label for="name">名前：</label> <input type="text" id="name" name="name"> </div> <input type="submit" value="送信"> </form> </body> </html>
《request2.php》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP入門教室</title> </head> <body> こんにちは、 <?php print htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8'); //print $_POST['name']; /*ユーザーからの入力値をそのまま表示*/ ?> さん！ </body> </html>
ユーザーからの入力を受け取る
「$_POST」から値を取りだすにはinput要素のname属性を指定する
$_POST['name']
ユーザーからの入力値をそのまま表示してはいけない
<?php print ($_POST['name']); ?>
htmlspecialchars命令
- 文字列に含まれるHTMLとして意味のある文字を文字列に置き換え、無害化する
htmlspecialchars (文字列, エスケープの種類, 文字コード);
JavaScript確認テスト
Q1
- 警告ダイアログボックスに「1」「2」「3」という数字を表示するように「for文」で記述しなさい
Q2
条件式 ？ 正しい場合の値：正しくない場合の値
《if文の場合》
<script> var point = 80; if (point >= 70) { alert('合格'); } else { alert('不合格'); } </script>
Q3
- 「今日はラッキーデー！」「ボチボチ頑張っていきましょう〜」「思わぬ落とし穴にご注意を…」をランダムに表示するように記述しなさい(確率の割合は適宜)
Q4
- 夜・朝・昼・夕によって画像が変化するよう記述しなさい
image placeholder
- 仮の画像スペースを確保します
- http://placehold.it/を利用して画像スペースを作成します
- 画像を変化させる「image placeholder」には、id属性が必須です
- 記述はいろいろな方法がありますが、最低限の記述でOK
Q5
- ブラウザがページを読み込む度に画像がランダムに変更するよう記述しなさい
- 配列の記述によりいろいろな方法がありますが、理解している範囲の記述でOK
- 配列を使うと画像名は自由に設定できます
アコーディオンメニュー
アコーディオンメニューを作る
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンパネル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style> body, div, dl, dt, dd { margin: 0; padding: 0; font-size: 16px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; line-height: 1.6; } dl { width: 400px; margin: 50px auto; } dl dt { background: #7CADB6; border-bottom: 1px #FFF solid; cursor: pointer; padding: 6px 5px 5px 1em; color: #FFF; font-weight: bold; } dl dd { border: 1px #7CADB6 solid; border-top: none; height: 200px; padding: 1em; } </style> </head> <body> <div id="container"> <dl> <dt>セクションA</dt> <dd> <p>テキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストAテキストA</p> </dd> <dt>セクションB</dt> <dd> <p>テキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストBテキストB</p> </dd> <dt>セクションC</dt> <dd> <p>テキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストCテキストC</p> </dd> </dl> </div> <script> $(function(){ $('dd:not(:first)').css('display','none'); $('dt').click(function() { if($('+dd',this).css('display') == 'none'){ $('dd').slideUp('slow'); $('+dd',this).slideDown('slow'); } }); }); </script> </body> </html>
初期表示状態
- css()メソッドで1番目以外のdd要素を非表示にする(1番目以外のdd要素に対してcss()でdisplayプロパティをnoneに変更)
- この処理によって最初のパネル以外は非表示になり、アコーディオンパネルの初期状態になります
$( 'dd:not(:first)' ).css( 'display', 'none' );
クリックされた時
- clickメソッドでdt要素がクリックされた時のイベント処理を設定する
$( 'dt' ).click(function() {
if文によって以降の処理が実行される条件を設定
- クリックされた要素の次に登場するdd要素のdisplayプロパティが「none」の場合、イベントの処理を実行する
- thisはイベントが発生した要素、このサンプルではクリックされたdt要素を指す
- $('+dd',this)はクリックされたdt要素の次に登場するdd要素を指す
- 現在閉じているパネルに対応するラベルがクリックされた場合のみ、{…}内の命令が実行される
次の要素は隣接セレクタで特定
- 条件を満たした時に全てのdd要素に対してslideUp()メソッドを適用する
- slideUp()は表示されている要素をスライドさせながら非表示にする命令
if($( '+dd', this ).css( 'display' )== 'none' ) {
スライドで閉じる処理
- slideUp()は表示中の要素をスライドさせて非表示にする命令
- 現在開いているパネルは滑らかに閉じる
$( 'dd' ).slideUp( 'slow' );
続いてスライド展開する処理
- クリックされたdt要素に対応するdd要素を隣接セレクタで特定し、slideDown()メソッドを使って展開する
$( '+dd', this ).slideDown( 'slow' );
例
《index.html》
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンパネル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div id="container"> <ul> <li> <div class="category">ファッション</div> <ul class="menu"> <li><a href="11">アウター</a></li> <li><a href="12">インナー</a></li> <li><a href="13">ボトム</a></li> <li><a href="14">バッグ</a></li> <li><a href="15">靴</a></li> <li><a href="16">アクセサリー</a></li> </ul> </li> <li> <div class="category">家具・インテリア</div> <ul class="menu"> <li><a href="21">収納家具</a></li> <li><a href="22">ソファ</a></li> <li><a href="23">ベッド</a></li> <li><a href="24">テーブル</a></li> <li><a href="25">チェア</a></li> <li><a href="26">証明</a></li> </ul> </li> <li> <div class="category">ステーショナリー</div> <ul class="menu"> <li><a href="31">ペン・鉛筆</a></li> <li><a href="32">ノート</a></li> <li><a href="33">ファイル</a></li> <li><a href="34">付箋</a></li> </ul> </li> <li> <div class="category">生活雑貨</div> <ul class="menu"> <li><a href="41">キッチン用品</a></li> <li><a href="42">掃除・洗濯用品</a></li> <li><a href="43">バス・トイレ用品</a></li> <li><a href="44">その他</a></li> </ul> </li> </ul> </div> <script> $(function(){ $('ul.menu').hide(); $('div.category').click(function() { $('ul.menu').slideUp(); if($('+ul',this).css('display')=='none'){ $('+ul',this).slideDown(); } }); }); </script> </body> </html>
《style.css》
@charset "utf-8"; body, div, ul, li { margin: 0; padding: 0; } body { background: #FFF; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 16px; color: #164158; } ul { list-style: none; } a { text-decoration: none; } #container { width: 220px; margin: 0 auto; } ul#nav { width: 220px; } .category { margin-top: 5px; padding-left: 16px; height: 40px; line-height: 40px; background-color: #B9DDE8; cursor: pointer; } ul.menu li { background-color: #F2F9FB; } ul.menu a { display: block; height: 35px; line-height: 35px; color: #164158; padding-left: 32px; }
習得度確認試験3
1)webサイト構築のワークフローには、大きく分けて設計フェーズ、開発フェーズ、運用フェーズがあります。
次の設計フェーズの流れを説明した文章の、穴埋めをしなさい。
【設計フェーズ】
[ (1) ]とは、ビジネス要件からWebサイト構築においてどのような機能が要求され、実装されるべきなのかを明確にすることだ。様々な調査分析やクライアントへの[ (2) ]を重ねて共通理解が得られるように取りまとめる。
Webサイトのユーザーの中で、運営者が特にアピールしたいと望むユーザー層の事を、[ (3) ]と呼ぶ。[前の物と同じ]設定において[ (4) ]を設定したユーザー像をインタビュー。ログ分析といった調査から浮かび上がらせた人格を持つキャラクターとして設定する事を[ (5) ]と言う。
サイト構造設計には、主に3つの手法がある。その3つは、[ (6) ]型、[ (7) ]型、[ (8) ]型、フォークソノミー型である。
制作仕様書には、大きく分けて[ (9) ]ガイドラインと[ (10) ]ガイドラインがある。
JavaScriptで表示、非表示を切り替える
《index.html》
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ギミロジグループの環境保護活動</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <script> function menuOn(x) { document.getElementById('submenu' + x).style.visibility="visible"; } function menuOff(x) { document.getElementById('submenu' + x).style.visibility="hidden"; } function showDd(i) { document.getElementsByTagName('dd')[i].style.display="block"; } function hideDd(i) { document.getElementsByTagName('dd')[i].style.display="none"; } </script> <body> <div id="container"> <div id="header"> <h1>ギミロジグループ</h1> <p class="path"> <a href="index.html">ホーム</a> > <a href="vision01.html">環境ビジョン</a> > <a href="vision01.html">グループの環境ビジョン</a> </p> </div> <div id="navi"> <ul> <li id="menu1" onmouseover="menuOn(1)" onmouseout="menuOff(1)"><a href="cate01.html">環境への企業姿勢</a> <ul class="submenu" id="submenu1"> <li><a href="vision1.html">グループの環境ビジョン1</a></li> <li><a href="vision2.html">中長期活動計画</a></li> <li><a href="vision3.html">環境マネジメントシステム</a></li> </ul> </li> <li id="menu2" onmouseover="menuOn(2)" onmouseout="menuOff(2)"><a href="cate02.html">環境運動の全体像</a> <ul class="submenu" id="submenu2"> <li><a href="action1.html">事業活動</a></li> <li><a href="action2.html">リスクマネージメント</a></li> <li><a href="action3.html">環境活動の歩み</a></li> </ul> </li> <li id="menu3" onmouseover="menuOn(3)" onmouseout="menuOff(3)"><a href="cate03.html">各部門での取り組み</a> <ul class="submenu" id="submenu3"> <li><a href="section1.html">クリーン調達の推進</a></li> <li><a href="section2.html">物流改革</a></li> <li><a href="section3.html">環境情報の開示</a></li> </ul> </li> <li id="menu4"><a href="cate04.html">ご意見・ご要望</a></li> </ul> </div> <div class="content"> <h1>ギミロジグループの環境への企業姿勢</h1> <h2 id="title1">ギミロジグループの企業経営方針</h2> <p>ギミロジグループは創業以来、「商品を通じて世の中の役に立つ」ことを企業目的とし，徹底した顧客への満足を提供し続けるという精神を原点として、顧客の視点に立った商品を企画・提供しています。私たちはいつも、買う身であるお客様の立場に立った「モノづくり」を追求しています。何事においても誠心誠意取り組み、自ら主体性をもって実行していくという経営方針です。</p> <h2 id="title2">ギミロジグループの経営ビジョン</h2> <dl> <dt>グループの環境ビジョン<a href="#" onclick="showDd(0)">［詳細］</a></dt> <dd>2004年9月、創業者が掲げた経営理念を源とし、企業目的である「商品を通じて世の中の役に立つ」という考えに沿って，環境経営の実現を目指した「ギミロジグループ環境ビジョン」を策定しました。<a href="#" onclick="hideDd(0)">［隠す］</a></dd> <dt>基本理念と環境方針<a href="#" onclick="showDd(1)">［詳細］</a></dt> <dd> 最上位の概念として「基本理念」を置き、それに基づいた「環境方針」を定めています。さらに、「環境方針」に沿った中長期の具体的な対策項目と目標値を明確にした<strong>Ecological Int 2005</strong>を定め、その目標達成を目指してすべての部門で環境課題に取り組んでいます。<a href="#" onclick="hideDd(1)">［隠す］</a></dd> <dt>中長期環境行動計画<a href="#" onclick="showDd(2)">［詳細］</a></dt> <dd>「地球温暖化防止」， 「省資源・リサイクル」，「エコプロダクツの調達・開発・提供」，「環境経営」，「情報開示・コミュニケーション」，「法遵守と汚染の予防」の5つの柱となる計画から成り立っています。<a href="#" onclick="hideDd(2)">［隠す］</a></dd> <dt>環境経営を推進するために<a href="#" onclick="showDd(3)">［詳細］</a></dt> <dd>環境経営を推進するために環境と経営を同軸で進めるためには、環境保全活動は通常業務と切り離されたものであってはいけません。ギミロジグループは独自に構築したISO14001全社統合システムを有効に活用し、日常業務に落とし込んでいます。<a href="#" onclick="hideDd(3)">［隠す］</a></dd> <dt>環境業績評価<a href="#" onclick="showDd(4)">［詳細］</a></dt> <dd> また、各個人・部門が上げた成果を評価する「環境業績評価」を2002年度より導入しました。各部門の環境保全活動を適正に評価する項目として、「CO2排出量の削減」「排出物総量に対するリサイクル率の向上」「エコプロダクツの販売比率の向上」の3項目を定め、グループ全体で取り組みを進めています。<a href="#" onclick="hideDd(4)">［隠す］</a></dd> </dl> </div> <div id="footer"> <address> Copyright © 2010 Gimmick of Logic Groups. All rights reserved. </address> </div> </div> </body> </html>
《style.css》
@charset "utf-8"; /* CSS Document */ body { background: #CCCCCC; color: #555555; font-family: "メイリオ", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif; font-size: 90%; line-height: 1.5; } #container { width: 643px; margin: 0 auto; background: #ffffff; } #header { padding: 10px; } #header h1 { font-size: 24px; } #header .path { font-size: 80%; color: #666666; text-align: right; } #header .path a { color:#669999; } #navi { position: relative; font-size: 80%; margin-bottom: 100px; height: 2em; } #navi li { float: left; width: 161px; line-height: 2em; } #navi a { color: #ffffff; background-color: #5e8eab; text-decoration: none; display: block; width: 160px; text-align: center; } #navi a:hover { background-color: #49abdb; } .submenu { visibility: hidden; } .submenu a { background-color: #005aaf; border-top: solid 1px #ffffff; } #navi #menu4 { width: 160px; } .content { width: 520px; margin: 0 auto 24px; text-align: left; } h2 { width: 400px; height: 24px; text-indent: -9000px; margin: 16px 0; } #title1 { background: url(images/ecology_sub01.gif) no-repeat; } #title2 { background: url(images/ecology_sub02.gif) no-repeat; } .content dt { color: #003333; font-wight: bold; } .content dd { display: none; margin-left: 40px; } .content a { font-weight: bold; padding-left: 0.25em; padding-right: 0.25em; color: #339999; } .content a:link, .content a:visited { text-decoration: none; } .content a:hover, .content a:active { color: #FF9900; text-decoration: underline; } div#footer { border-top: solid 2px #cccccc; text-align: center; height: 40px; line-height: 40px; }
《reset.css》
@charset "utf-8"; html { overflow-y: scroll; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before,q:after { content: ''; } fieldset,img { border: none; } abbr,acronym { border: 0; } p { text-align: justify; } br { /* */ letter-spacing: normal; } body { font-size: 12px; *font-size: 75%; font-family: sans-serif; *font-family: "ＭＳ Ｐゴシック"; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } a , a:visited { overflow: hidden; } html { overflow-y: scroll; }
アコーディオンメニュー[jQuery]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>sample1</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> body { background:#666; } dl { width:800px; margin:50px auto; background: #999; } dt { line-height:35px; font-size:large; text-indent:3em; font-weight:bold; color:white; height:35px; background: #999; border-bottom: #FFF solid 1px; } dd { margin:0; height:300px; background:#D4D0C8; } dd p { margin:0; text-indent:1em; padding:20px; } </style> <script> $(function(){ $('dd:not(:first)').css('display','none'); $('dl dt').click(function(){ if($('+dd',this).css('display')=='none'){ $('dd').slideUp('slow'); $('+dd',this).slideDown('slow'); } }); }); </script> </head> <body> <dl> <dt>Step.1</dt> <dd> <p>「マクロスＦ」のシェリル・ノーム役や「らき☆すた」の高良みゆき役などで人気の声優・遠藤綾が８日、自身のブログで結婚したことを発表した。<br > 遠藤は「オシラセ」と題して「突然ですがこのブログ、今回で最終回となります」と更新をストップすることを発表。続けてアニメや吹き替えなど自身の出演作品情報を告知し、補足するように「髪染めてません！切ってません！結婚しました」と報告した。<br > 結婚、ブログが最終回とは言っても「ブログでの交流は無くなりますが、変わらず、私が演じたキャラクターたちを愛して頂ければ嬉しいです。私も変わらず、精一杯声を吹き込み続けたいと思います」とつづっており、仕事は続けることを示唆した。</p> </dd> <dt>Step.2</dt> <dd> <p>「マクロスＦ」のシェリル・ノーム役や「らき☆すた」の高良みゆき役などで人気の声優・遠藤綾が８日、自身のブログで結婚したことを発表した。<br > 遠藤は「オシラセ」と題して「突然ですがこのブログ、今回で最終回となります」と更新をストップすることを発表。続けてアニメや吹き替えなど自身の出演作品情報を告知し、補足するように「髪染めてません！切ってません！結婚しました」と報告した。<br > 結婚、ブログが最終回とは言っても「ブログでの交流は無くなりますが、変わらず、私が演じたキャラクターたちを愛して頂ければ嬉しいです。私も変わらず、精一杯声を吹き込み続けたいと思います」とつづっており、仕事は続けることを示唆した。</p> </dd> <dt>Step.3</dt> <dd> <p>「マクロスＦ」のシェリル・ノーム役や「らき☆すた」の高良みゆき役などで人気の声優・遠藤綾が８日、自身のブログで結婚したことを発表した。<br > 遠藤は「オシラセ」と題して「突然ですがこのブログ、今回で最終回となります」と更新をストップすることを発表。続けてアニメや吹き替えなど自身の出演作品情報を告知し、補足するように「髪染めてません！切ってません！結婚しました」と報告した。<br > 結婚、ブログが最終回とは言っても「ブログでの交流は無くなりますが、変わらず、私が演じたキャラクターたちを愛して頂ければ嬉しいです。私も変わらず、精一杯声を吹き込み続けたいと思います」とつづっており、仕事は続けることを示唆した。</p> </dd> </dl> </body> </html>
習得度確認試験：解答
(1)要件定義 (2)ヒアリング
(3)ターゲット (4)シナリオ (5)ペルソナ
(6)ツリー (7)リニア (8)マトリクス
(9)デザイン (10)コーディング
