ベンダープレフィックスとは CSS3で採用される予定の機能は、前もって各ブラウザで先行実装されます。その機能を動作させるには、プロパティや値の先頭に接頭語を付けます。その接頭語のことをベンダープレフィックスといいます。 ベンダープレフィックスの…
↓自動で動きます Photoshopで素材を用意 Photoshopを開き200×200pxを新規作成 カスタムシェイプで、雲と飛行機をつくります png-24／透過で書き出します HTML+CSSで記述 HTMLを記述します CSSを記述します <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3アニメーション</title> <style> body { background: #0CF;</meta></head></html>…
(2020-04-20 加筆) Web Fontsとは Webサーバー上にあるフォントファイルを参照する技術です Webサーバー上にフォントファイルがあるため、ユーザーの環境に影響されずにフォントを表示できます 今までは、デザインとしてフォントを使用する場合は、画像とし…
送信ページ：send.php 【send.php】
ソースをよりシンプルにする func.phpを新規作成 以下の記述をindex.phpからコピー&ペースト 各ページに共通の記述を別ファイルにまとめ、ソースをよりシンプルにします ここでは、phpの記述のみになるため終了タグをつけません 【func.php】
送信ページを整える h1、pを記述 check.phpからtableタグ内をコピー&ペースト check.phpからユーザー定義関数をコピー&ペースト トップへ戻るリンクを追加 トップへ戻ると表示されている値を消す 【send.php】
index.phpに入力すると同時にエラーメッセージを表示 今までは入力ページで入力して次の確認ページでエラーを確認し、入力ページへ戻るという仕様でしたが、ユーザーに優しくありませんので回収していきます check.phpでエラー判定の後にリダイレクトをかけ…
check.phpのエラーメッセージをsessionデータにする 【check.php】
check.phpでsessionデータをつくる 【check.php】
check.phpからindex.phpに戻るときに入力した値を引き継ぐ 上部にphpを記述 inputタグにvalueを追加 textareaタグにはタグ内に追加 文字制限のお知らせをlabel終了タグの後ろに入れる 【index.php】
エラーメッセージを表示する 各種エラー表示をつくる check.phpにindex.phpの「戻る」リンクをつくります 空文字をエラー変数に代入して初期化、if文でデータが空の場合はエラーを表示させる 文字数、@、半角全角のエラーを表示させる $success = true;を記…
sessionデータをつくる check.phpにsend.phpの「送信」リンクをつくる postデータをsessionデータに渡す 【check.php】
確認ページを回収 ユーザー定義関数（自作関数）を記述 【check.php】
確認ページをつくる check.phpを新規作成 【check.php】 <html lang="ja"> <head> <meta charset="utf-8"> <title>お問い合わせ確認</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>お問い合わせ確認</h1> </body> </html> var_dumpでデータがcheck.phpに渡るか確認 【check.php】
メールフォームをつくる 【index.php：tableタグの場合】 <html lang="ja"> <head> <meta charset="utf-8"> <title>お問い合わせフォーム</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>お問い合わせフォーム</h1> <form action="check.php" method="post"> <table> <tr> <th><label for="name">お名前：</label></th><td>…</td></tr></table></form></body></html>
PHPのポイント PHP単独の場合 終了タグを入れない ?> html構文に記述する場合 終了タグを入れる 改行 ."\n"; バックスラッシュ「\」の入れ方 Macの場合：optionキー ＋ ￥キー Windowsの場合：ろキー 変数 頭に$をつける ※$の直後に数字は× コマンドの終了 ;…
PHPとは データを加工したり、ユーザーの入力を受け付けたりする。 WEB開発に特化したプログラミング言語 プログラミング言語 コンピュータや機械を動かすための命令（コマンド）コンピュータで実行（処理）するための言語 コード入力と実行と確認 PHPのコー…
Illustratorでボタンを作る 100×100pxの正円 上向きの三角形 png-24で書き出し 見やすいサイズでお好みで作成してください HTMLとCSSを記述 【index.html】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>トップへ戻るボタン</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
jQueryとは JavaScriptのライブラリのひとつ ブラウザ依存ではない 記述がCSSに似ている 利用方法 2.xは旧ブラウザには対応していないので（IE6〜8）1.xを使用しています HTMLのhead内か、bodyの終了タグの上部に記述します ダウンロードして利用 iQuery jQu…
Q1:JavaScript の標準化されたものをなんと呼ぶか書きなさい A:ECMAScript Q2:js フォルダー内にある sample.js を読み込む記述をしなさい A: Q3:警告ウィンドウを表示するスクリプトを記述しなさい(値は不要) A:alert(); メッセージを表示する警告ダイアロ…
リセット ルールではありませんが、CSSの最初にはリセットを記載した方が良いとされています。 ブラウザには元々持っている規定があるため、これを一度リセットしないと、自分が指定したCSSがうまく機能しません。 @charset "UTF-8"; /* reset */ html,body,…
消費税計算 <html lang="ja"> <head> <meta charset="utf-8"> <title>消費税の計算</title> </head> <body> <script> var price = prompt( '金額を半角数字で入力してください。' , '例: 850' ); price = parseInt( price ); var tax = 0.08; var kakaku = price + price*tax; alert( '税込金額は、' + kakaku + '円です。' ); </script> </body> <…</html>
スクリプトの進み方 順次 分岐 反復 if文 処理の流れを分岐させるときに使用 処理が成立しないときは、スキップ { ブロック } if (条件式) { 条件を満たす場合に実行する処理 } else { 条件を満たさない場合に実行する処理 } 条件式に使用する比較演算子 == …
用語 数値リテラル 文字列リテラル=文字列そのもののこと エスケープシーケンス 特殊文字。画面上の文字を出力するときに、文字色の変更やカーソルの移動、文字の消去など、文字出力の制御を行う特殊な文字列のこと。ブラウザによって異なる。 「\1（エスケ…
記述のルール 初期値 演算（計算） 出力（可視化） var 変数名 = 命令; <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> var ans//(1)初期値 ans = (150*2 + 120*2)/2;//(2)演算 //(3)出力 alert( ans );//アラートをダイアログボックスで表示させたいとき document.write( ans );/</body></html>…
(2020-04-16 復習) CSSとは CSS = Cascading Style Sheets = HTML言語に装飾・レイアウトをほどこすための言語 CSSの基本書式 セレクタ(どこの){プロパティ(なにを):値(どうする);} p { color: #F00; } CSSをHTMLに適用 style属性で一部にスタイルを適用する…
用語 a = anchor = 錨 src = source = 画像ファイルへのパス（住所） href = hyper reference = 過度な 参照 = リンク先情報 alt = alternate = 代理 = 代替文字 rel = relation = 関係 = 画像リンク <p><a href="移動先のアドレス"><img src="画像の住所" alt="代替文字" (title="マウスオンで名前")></a></p> altは必須 画像にチップ（四角に画像名）を表示するさせ…
(2020-04-16 復習) 用語 HTML = HyperText Markup Language DTD宣言 = Document Type Definition = 文書 種類 定義 UA = user agent Webサイトを見る時に使用するデバイスのこと ＜＞ = angle brackets = アングル ブラケット = 角度 括弧 [ ] = brackets = …
今週のお題特別編「この春に始めたいこと・始めたこと」 〈春のブログキャンペーン 第2週〉この春、WEBサイト制作を学ぶことになりました。 HTML、CSS、JavaScript、jQuery、PHP、Adobe illustrator、Adobe Photoshopなど難しいことが目白押しのため、備忘録…
