2015-01-01から1年間の記事一覧
(2020-04-21 加筆) float 並列させたい要素のスタイルに指定します 要素を回り込みさせることで並列にします 左寄せ、右寄せなど回り込みで横並びにさせます ＜html＞ <ul> <li>１番目の要素</li> <li>２番目の要素</li> <li>３番目の要素</li> </ul> ＜CSS＞ ul { overflow: hidden; } li { floa…
アイコンをつくらず時短 Webフォント awesome:有名なフリーアイコン pictonic:フリーは266種類 ポートフォリオで自分のスキルを表現するときは、これを組み合わせれば何とかなります 書体（アウトライン画像として使用） Zapf Dingbats:アイコン ornament fo…
HTML5の新属性 主なコンテンツ section要素：ページのメイン：セクション区切り article要素：独立した記事：ブログのニュースサイトの記事など、単独で再利用できる部分 周辺情報のコンテンツ aside要素：補足：本文とは別扱いのリードやコラムなど nav要素…
bodyの背景の色をブラウザの幅によって変更する 確認の仕方は、ブラウザを手動でスライドしていきます 1200px〜 黒 1000〜801px 赤 800〜601px 青 600〜401px 黄 〜400px 緑 PCサイズから作成する場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブウェブデザイン | メディアクエリーの</title></meta></head></html>…
メディアクエリー Webページの見栄えを記述するCSS3で追加された仕様 表示された画面環境に応じて適用するスタイルを切り替える機能 ブレイクポイントを使用してレイアウトを制御 ポイント 各ブレイクポイントで記述すると上書きで指定されます 上部に指定さ…
ベンダープレフィックスとは 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>…
