2013-10-01から1ヶ月間の記事一覧
フォーム（1） 入力チェックは、HTML5フォーム機能のみ（Safariは機能しません。） 入力画面 → 確認画面 → 完了画面 まで値が遷移できていればOK メールは、クライアントにのみ送信する 解答は、ブログ等に載せないこと（アップロード後アドレスをメールする…
jQueryでフィルタ（フィルタリング）機能 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Filtering</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/filtering.js"></link></meta></head></html>
Parallax（パララックス効果） マウスにあわせて画像が3D的に追従するサイトを簡単に作れるjQuery jParallaxプラグイン スクロールに応じて要素がアニメーションする、視差効果（見た目がずれる） カメラ用語：ファインダーから見た映像と撮影結果にずれがあ…
jQuery Masonry フローティングブロック：リキッド <html lang="ja"> <head> <meta charset="UTF-8"> <title>フローティングブロック</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> </link></meta></head></html>
ポラロイド風写真配置 ブラウザによっては、傾きが表示されない場合があります。（CSS3で設定） 再読み込みで配置される位置が変わり、プレスドラッグで動かすことができます。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ポラロイド風ギャラリー</title> <link href="css/style.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </link></meta></head></html>
FadeChange 素材 横スライド サンプルデモ <html lang="ja"> <head> <meta charset="UTF-8"> <style> /*表示修飾*/ * { font-family: Verdana, Geneva, sans-serif; margin:0; padding: 0; } body { margin: 0; text-shadow:1px 1px 2px #f0f0f0; } h1 { font-size: 28px; margin: 15px 0 0 0; } .nav { backgro</meta></head></html>…
コメントの管理機能を作成（２） 閲覧者のコメントに返信や投稿するための投稿画面を作成する 新規ファイルを作成 「comment」フォルダー内に「input.php」というファイルを作成します admin/index.phpを編集 「admin」フォルダー内に「index.php」を編集し…
コメントの管理機能を作成（１） 閲覧者のコメントを管理する画面を作成します フォルダーとファイルを作成 「admin」フォルダー内に「comment」というフォルダーを作成します 「comment」フォルダー内に「index.php」というファイルを作成します コメント一…
コメントのメールアドレス部分をリンクにする コメントに入力してあるアドレスをクリックするとコメントした人にメールが送れるようにしてみます 「topic.php」を編集 「comment_list_name」を選択する この時点で「# ヌルリンク」を設定します。 emailの設…
画面にコメントを反映させる 「topic.php」を編集 「バインディング」→「レコードセット（クエリー）」を選択する 名前：comment_list 接続：MyBlogDatabase テーブル：commnet_table フィルター：entry_id「URLパラメータ：entry_id」 ソート：comment_id「…
コメント機能を作成 コメント機能を作る データベースに新規テーブルを作成 「my_blog」内にテーブル名「comment_table」を作成する フィールド数：7 実行後、以下のように入力します 「topic.php」を編集 「サーバービヘイビア」→「レコードの挿入」を選択…
前後のページへ移動する機能を作成 ページング機能を作る 《HTML》 <p class="nav"><a href="#"><<前のページへ</a> <a href="#">次のページへ>></a></p> 《CSS》 .nav { text-align: center; margin: 20px 0 0 0; } 次のページへ 「次のページへ>>」を選択する 「サーバービヘイビア」→「レコードセ…
記事画面を作成 「topic.php」を作成 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>記事画…</meta></head></html>
トップの一覧と詳細を作成 サイトトップページ「index.php」を作成します 基本構造のみとします <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
更新機能を作成 更新機能を搭載します 「edit.php」を編集 値送信元：formMain 接続：MyBlogDatabase 更新するテーブル：entry_tabale 「更新後の移動先」→「index.php」 ブラウザで確認 「更新」ボタンを押すと、記事一覧に戻ると変更が確認できます 削除機…
一覧画面と接続する 編集画面に移動する場合、URLを手作業で書き換えるは手間がかかります クリックだけで表示できるようにします 「index.php」を編集 編集の文字にリンクを設定します 「edit.php」へのアンカーを入力 Dreamweaverの機能を使ってみます（必…
編集画面を作る 記事を投稿後に編集したい場合に使用する画面です 「edit.php」を作成 「admin」フォルダーに「edit.php」を作成します フォームは、「input.php」と同じ内容です <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
一覧画面を作る 「admin」フォルダーの中に、「index.php」を作成 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
登録画面を作る 「admin」フォルダーを作成 新規PHPファイル作成 ファイル名を「input.php」とする <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
オリジナルブログシステム Dreamweaverからデータベースと連携する データベースを準備 phpMyAdminを起動（1）新規データベース作成 データベース名「my_blog」 照合順序「utf8_general_ci」 （2）新規テーブルを作成 テーブル名「entry_table」 フィールド…
CSS3アニメーション CSS3 Tutorial CSS3アニメーションの基礎(Animation編) CSS3リファレンス：アニメーション MOZILLA DEVELOPER NETWORK：CSS アニメーション ねこだまのCSSリファレンス&デモ マーキー 左右や上下にスクロールする文字や画像を表示します <html lang="ja"></html>…
HTML5+CSS3範囲 HTML5リファレンス aside要素の使い方の中で不適切なものをひとつ選びなさい 細目（注釈）を表記するとき 注意事項ページなどで複数の文章を囲むとき メールアドレスを表記するとき 文字を小さくしたいとき a要素が内包できる要素を次の中か…
解答例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>h1とpの配置をいれか</title> <style> header { width: 960px; height: 120px; } header h1 { margin: 0; padding: 50px 0 0 52px; font-size: 16px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: normal; } header p …</meta></head></html>
課題例
セッション管理 クッキーは、クライアント固有の情報を保持するには良いですが、非常に小さいサイズのテキスト情報しか保存できません そのため、ショッピングサイトのカート情報など、より多くの情報を保持するのに「セッション」と呼ばれる機能を利用しま…
変数との違い 入力されたIDを次回アクセス時まで覚える仕組み いままで利用してきた変数は、保存期間に「Webページが表示されるまで」という制限があります そこで利用するのが「クッキー」と「セッション」です クッキー クッキーとは、Webサーバがそのサイ…
action属性の値が空の場合 action属性の値が「""」（空）である場合は、自分自身に送信しています フォームを表示し、入力したデータを自分自身にPOSTし、PHPプログラムがデータを受け取って処理を実行しています 受け取ったデータは「$_POST」という変数（…
データが入力されたかどうかをチェックする <html lang="ja"> <head> <meta charset="utf-8"> <title>データが入力されたかどうかチェックする</title> </head> <body> （strlen）データが入力されていません</p>\n"; } else { print "<p>（strlen）入力された…</p>
テキストボックス テキストボックスは、ユーザーからの入力を受け付けてるときに使います 名前、メールアドレス、検索キーワードなど、１行で入力できる短い文字列を入力してもらうためのもの テキストボックス <input type-"text" name="t1" maxlength="20"> ここでの「20」は、入力文字数です。 ただし…
QRコード作成サイト Google Chart Toolsを利用する APIリクエスト URLリクエストは「$_GET」を利用する http://chart.apis.google.com/chart?chs=画像サイズ&cht=qr&chl=キーワードの変数名 画像として出力する
