読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

レスポンシブWebデザイン - 応用

レスポンシブWebデザイン - 応用 テキスト P.337 <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Cafe Leaf</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="format-detection" content="telephone=no"> </meta></meta></meta></meta></head></html>

レスポンシブWebデザイン - 実践

レスポンシブWebデザイン - 実践 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CASA BLANCA</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>

初めてのメディアクエリ

初めてのメディアクエリ 1月開講クラス(2カラムまとめ) <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS Layout</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> /* reset ----------------------------------------------------------*/ html, body, p { margin: 0; padding: …</meta></meta></head></html>

フルードレイアウト

レイアウトの設計 「article」を「main」に変更します 画像は、適宜作成すること main「1000 x 300」 01「620 x 300」 02「300 x 120」 03「300 x 120」 Responsive Web Design HOME ABOUT SAMPLE TIPS ウェブは柔軟な媒体である テキスト文書だったWebをデ…

予約システム

WordPressで予約システムを設置できるプラグイン MTS Simple Booking Booking System WordPress Appointment Booking and Online Scheduling Plugin CP Appointment Calendar Salon Booking Online Lesson Booking Events Manager 時間単位で予約できる予約…

サンキューメッセージを送信

サンキューメッセージを送信

ゲストブック - データ表示機能

データ表示機能 データの一覧表示 query( 'SET NAMES UTF8' ); $sql = 'SELECT * FROM message WHERE 1'; $stmt = $dbh -> prepare( $sql ); $stmt -> execute(); } catch(Exception $e ) {…

ゲストブック - データベースに値を挿入

フォームに入力されたメッセージをデータベースに追加する 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) …

お問い合わせフォームの自動返信機能を追加

PHP

入力された内容を自動返信 《index.php》

スクロール後ナビゲーションをトップに固定

スクロール後ナビゲーションをトップに固定 PCサイズのみの場合 すぐ使えるダミーテキスト - 日本語 Lorem ipsum <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール後、ナビゲーションをトップに固定</title> <link rel="stylesheet" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> </link></meta></head></html>

ページトップへスムーズスクロール

ページトップへ(基本) この例はPNG画像ですが、CSS3やFont Awesomeなどの指定も試してみましょう 【例1】フェードインして表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページトップへ移動</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <style> #content { height: 2000px; } /*top btn ----…</meta></head></html>

InVison(インビジョン)

InVison(インビジョン) InVisionはアプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービスです

プロトタイプ以前

ダミー画像配信サイト Dynamic Dummy Image Generator PLACEHOLD.IT ダミーテキスト生成サイト Dummy Text Generator すぐ使えるダミーテキスト - 日本語 Lorem ipsum

Style Tiles

Style Tiles プロトタイプのテンプレート styletil.es

関数

PHP

連想配列

PHP

配列

PHP

switch…case…break…default - 条件を並べる

PHP

do…while - 先に処理してから繰り返す

PHP

while - その間繰り返す

PHP

for - 繰り返し

PHP

if - 判断

PHP

はじめてのPHPプログラミング

PHP

基本的な書き方 P.54 基本的なプログラムとコメント PHPの動作チェック P.55 はじめてのプログラム P.58 HTML内に記述 P.59 You Have cats. PHPのエラー P.61 エラーの表示内容 エラーの表示内容 エラーレベル(エラーの深度を表す) エラーの内容(起き…

はじめてのプログラミング

PHP

プログラムを動かす場所 P.37 リモートホスト(Remoto Host) ローカルホスト(Local Host) PHPでの開発はローカルホストで行う PHP実行環境を整える P.40 公開フォルダーの確認 P.46 http://localhost/フォルダー名/ファイル名 公開の準備 P.52 PHPプログ…

コンピュータとプログラムの関係

PHP

プログラムの役割 P.21 コンピュータは膨大な計算が得意で、曖昧な命令を理解することが苦手 コンピュータに命令を出すためにプログラミングが必要 プログラムとは、やりたいことをブレークダウンすること プログラミングの流れ P.24 アルゴリズムとは、問題…

Webアプリケーション

PHP

Webアプリケーションってなに? P.3 Webアプリケーションとは、インターネットを通じて利用できる、ある機能をもったWebサイトのこと Webアプリケーションは、ブラウザで表示(閲覧)・操作する Webアプリケーションを分解 P.6 Webアプリケーションは、さま…

SQLを使う - SELECT文

SELECT文の基本機能 SELECT文は、データベースからデータを抽出するコマンドです 射影:特定のフィールド(列)だけ取り出すこと 選択:特定のレコード(行)だけを取り出すこと SELECT文の基本構文 テーブルに登録されている全てのレコードを取り出したり、…

SQLを使う - 基本

SQLは何のため? phpMyAdminのマウス操作だけで作ることができるSQLには限界がある PHP+MySQLを使ったWebシステムを構築するには、SQLの知識が必須 phpMyAdminを利用する phpMyAdminにアクセスする データを取得して表示する localhostでデータベース一覧を…

リレーショナルデータベース

リレーショナルデータベース テーブルと呼ばれる領域にデータを保存していきます リレーショナル型データベースは、RDB(アール・ディー・ビー)とも呼ばれます RDBの構造 RDBは、関連するデータを全てテーブルと呼ばれる2次元の表にデータを格納します テー…

データベースとは

データーベース(database, DB) 情報を管理するためのシステム(データベース管理システム DataBase Management System : DBMS) 特定のテーマに沿ったデータを集めて管理し、容易に検索・抽出などの再利用をできるようにしたもの 単位としての「データベー…

ファイルにデータを書き込む

PHP

ファイルにデータを書き込もう (1) is_writable()

入力エラーチェック

PHP

入力エラーチェック ≪index.php≫

セッション情報

PHP

セッション情報とは サーバー側にデータを保存する仕組みです クライアントを区別するためにランダムなIDを割り当て、そのIDに対応する保存域をサーバー側に作成します セッション情報は、プログラムの実行環境やライブラリによって提供されます Cookieは、…

入力された値の変数と型

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>

入力された値を送信→受信

PHP

送信するために必要なこと form要素でmethod属性を記述します method属性には、送信方法を記述します inputされた値を別のページに送信します 入力された値の器に名前をつけて送信します 送信するタイミングをinput要素のtype属性「submit」で、ボタンの表示…

ユーザーとの対話

PHP

ユーザーとの対話 入力フォームに入力されたデータは、「$_GET[ 名称 ]」や「$_POST[ 名称 ]」取得できます 出力 ブラウザに表示 《例1》 変数を{ }で囲む Dreamweaverでは、変数の色にならないため判別しにくくなります 《例2》 文字列と変数を「. ドッ…

PHPでカレンダー

PHP

PHPでカレンダー <html> <head> <meta charset="utf-8"> <title>今月のカレンダー</title> </head> </html>

PHPで日時を扱う

PHP

タイムスタンプとは PHPの日時に関する関数では、「1970年1月1日0時」から経過した秒数で表現する(UNIXタイムスタンプ)を使用します

記事を投稿する

新規投稿 「投稿」→「新規追加」 テキストでは、入力するような内容になっていますが、授業ではすでに用意されているテキストファイル(XMLファイル)を読み込んで使用します。 ツール(インポート) WordPress形式を選択する 「ファイルを選択」ボタンを押…

WordPressの基本設定

サイト名を確認する 「ダッシュボード」→「設定」→「一般」 サイトの説明文を入力する 不要な記事の削除 「投稿」→「投稿一覧」→「Hello world!」 「固定ページ」→「固定ページ一覧」→「サンプルページ」 標準で用意されたカテゴリーの名前を変更する 「投稿…

WordPressとは

WordPressとは WordPress(ワードプレス)は、オープンソースのブログソフトウェアです PHPで開発されており、データベース管理システムとしてMySQLを利用しています 単なるブログではなくCMSとしてもしばしば利用されています 主な特徴 PHPによる動的なペー…

関数

PHP

関数とは 関数とは、「機能単位の処理のひとかたまり」のことで、プログラムは関数の組み合わせによって、構成されています プログラムのソースが長文で複雑になった場合、機能別にいくつかの関数に分割することによって、分かりやすく、修正しやすいプログ…

配列の 追加と削除

PHP

配列に要素を追加 配列に要素を追加したい場合は、array_unshift関数、array_push関数を使います この関数は、配列に要素を追加するとともに、要素が追加された配列の要素数を取得できます array_unshift - 配列の先頭に要素を追加したい場合配列の先頭に要…

連想配列

PHP

連想配列 基本的な配列の場合、配列要素の0番目、1番目・・・と添え字に数値を指定して、各要素の値を代入したり取得していましたが、連想配列を使用すると、添え字の代わりに文字列のキーを使用できます インデックスに名前をつける 中身を連想できるような…

変数のスコープ

PHP

変数のスコープ 変数の宣言方法を変えることにより、変数の有効範囲も変わります これを変数のスコープと呼びます 変数は、「{ }(中括弧)」で囲まれた中で定義をすると、その囲まれた中でのみ有効となります。その外側では、使用することができません 括弧…

配列

PHP

配列(array)とは たくさんの変数を扱うときなど、値をまとめて記憶する 関連したデータを保存しておくための連なった箱 1番目の番号(インデックスまたは添字)は、「0」 配列の宣言と代入 「array関数」を使用して配列の宣言 array関数を使わず、各配列…

ループを抜ける breakとcontinue

PHP

break 繰り返し処理の中で、強制的に繰り返し処理を終了したり、強制的に次の繰り返し処理を行ったりすることができます 繰り返し処理を強制的に終了する場合は、「break;」を使います '; // $iの値(1、2、3)を出力。<br>で改行。 if ( $i === 3 ){ break; } }…