2016-01-01から1年間の記事一覧
レスポンシブWebデザイン - 演習（２）実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーン画像の設定</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="style4.css"> </head> <body> <h1><img src="img/logo.svg" alt=""></h1> </body></html>
レスポンシブWebデザイン - 演習（２） ブラウザの高さを取得する単位「vh（viewport height）」 <html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> html, body { margin:0; padding:0; } .box { box-sizing: border-box; } .box…</meta></meta></head></html>
レスポンシブWebデザイン - 演習（１）解答例 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン 演習（１）</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">…</link></meta></meta></head></html>
レスポンシブWebデザイン - 演習（１） 設計図の作成 物作りは設計図の用意から始まります。機能や構造、配置などを明確にしていくことで、必要な部品、材料、工数、工程、時間など、さまざまな情報が出てきます。 画像「768 x 512」 また、設計図を用意する…
キャプションを表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>transitonによるアニメーション</title> <style> /* reset ------------------------------------*/ html, body, h1, h3, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { b…</meta></head></html>
CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色が変化するアニメーション</title> <style> html,body, h1, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul {</meta></head></html>…
グリッドレイアウト <html lang="ja"> <head> <meta charset="UTF-8"> <title>グリッドレイアウト</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div class="block"> <header> <h1></h1></header></div></div></body></html>
メディアクエリ メディアクエリは、ウィンドウのサイズやモニターの物理サイズ、画面密度やデバイス向きなど、閲覧環境の特性（メディア特性）に応じてCSSを分岐させることができる機能で、CSS2.1の時代から使われている media属性の拡張として定義されてい…
transition（トランジションアニメーション） transition は、「:hover」などの動作をきっかけとして、アニメーションでプロパティの値を変化させることができるプロパティです
transform-origin（変形の原点） ローカル座標の原点は、transform-origin の値を変更することでいつでも変更できます 変形の原点を変更する
transform（変形） transformプロパティは、二次元座標での変形を行うプロパティです 値に translate( ) / scale( ) / rotate( ) / skew( ) の４種類のトランスフォーム関数を取り、それぞれ移動・拡大縮小・回転・傾斜させることができます 移動の書式 tran…
CSS3のプロパティ テキストP.276 まず、CSS3で表現してみる CSS3で角丸を設定する <section> <h3>border-radius</h3> <ul class="sample bdr"> <li class="bdr01">全て同じ</li> <li class="bdr02">左上 | 右上 | 右下 | 左下</li> <li class="bdr03">左上 | 右上と左下 | 右下</li> <li class="bdr04">左上と右下 | 右上と左下</li> <li class="bdr05">正円</li> </ul> </section> /* bor…
CSS3を使うメリット（テキスト P.258） classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるようになる CSS3は下位互換 CSS3は、CSS2.1を含み…
メディアクエリ実践 <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブWebデザイン</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>メディアクエリ</h1> <p>メディアクエリを使うと、ブラウザのウィンドウ幅に応じて各要素…</p></div></body></html>
レスポンシブWebデザインの基本構造を作る 768px以上をPC用とする モバイル向けメディアクエリのwidthの決め方 タブレット（iPad） 768px スマートフォン横 480px・568pxなど スマートフォン縦 320px・360pxなど /* メディアクエリの設定 */ @media (orienta…
データ表示機能 データの一覧表示 query( 'SET NAMES UTF8' ); $sql = 'SELECT * FROM message WHERE 1'; $stmt = $dbh -> prepare( $sql ); $stmt -> execute(); } catch(Exception $e ) { ech…
フォームに入力されたメッセージをデータベースに追加する INSERT文を組み立てて実行する 追加画面→追加確認画面→追加完了画面 追加完了画面でINSERT文を実行するには、入力フォームに入力されたメッセージを$_POSTや$_SESSIOを経由して受け渡し、その値をも…
確認画面作成 SESSIONデータを使ったエラーチェック 未入力のエリアがあった場合に、入力画面に戻す 《confirm.php》
データ追加機能を作る 追加画面（index.php） 追加確認画面（confirm.php） 追加完了画面（submit.php） 追加画面の基本構造 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ゲストブック</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>ゲストブック</h1> <form method="post" action="confirm.php"> <table> <tr> <th>名前</th></tr></table></form></body></html>
ゲストブック ホームページを訪れたゲストにメッセージを投稿してもらう データベースの処理 「何を」「何処に」「どのように」記述するかを決める ゲストブックの構成 何を記述するか 追加（CREATE） 読み取り/表示（READ） 変更（UPDATE） 削除（DELETE） …
SELECT文の基本機能 SELECT文は、データベースからデータを抽出するコマンドです 射影：特定のフィールド（列）だけ取り出すこと 選択：特定のレコード（行）だけを取り出すこと SELECT文の基本構文 テーブルに登録されている全てのレコードを取り出したり、…
SQLは何のため？ phpMyAdminのマウス操作だけで作ることができるSQLには限界がある PHP+MySQLを使ったWebシステムを構築するには、SQLの知識が必須 phpMyAdminを利用する phpMyAdminにアクセスする データを取得して表示する localhostでデータベース一覧を…
Progate prog-8.com CODEPREP codeprep.jp Progra! パイザ・ラーニング paiza.jp コーディング道場 http://www.coding-doujo.jp/books/1www.coding-doujo.jp
リレーショナルデータベース テーブルと呼ばれる領域にデータを保存していきます リレーショナル型データベースは、RDB（アール・ディー・ビー）とも呼ばれます RDBの構造 RDBは、関連するデータを全てテーブルと呼ばれる2次元の表にデータを格納します テー…
データーベース（database, DB） 情報を管理するためのシステム（データベース管理システム DataBase Management System : DBMS） 特定のテーマに沿ったデータを集めて管理し、容易に検索・抽出などの再利用をできるようにしたもの 単位としての「データベー…
配列とは 変数に格納できる値は「一つ」ですが、配列にはたくさんの値が格納できます 配列の変数名には、[ ]をつけ、この[ ]の中に要素を特定するための「キー」を指定します array関数 配列を作成し、値を代入するときに使う 配列の値を取り出す $配列名[キ…
入力エラーチェック ≪index.php≫
型 intval関数（文字列を整数に変換する）- 小数点以下は切り捨て ユーザーが入力したデータは「文字列型」です 「文字列型」のまま四則演算ができないため「整数型」に変換します 《sum.php》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>変数と型</title> </head> <body> <form action="result.php" method="post"> <p>数字1 <input type="text" name="val1"></p> <p>数字2 </p></form></body></html>
