犬がカーソルを追いかけるプログラムを作成します。 ソース <html lang="ja"><head> <meta charset="UTF-8"> <title>犬がカーソルを追いかける</title> <style> #area{ position:absolute; background-color:#fff; left: 0px; top: 10px; width: 1600px;/*犬が動く範囲 横*/ height: 700px;/*犬が動く範囲 縦*/ } #dog{ position</meta></head></html>…
第一印象 メラビアンの法則 最初にあった1秒以内で93%の印象が決まる。 敬語の練習
英語を日本語に変換する 英語を日本語に変換する簡単なプログラムをPHPで作成しました。 ”apple”と入力して「変換」ボタンをクリックします。 日本語で「リンゴ」ですと表示されます。 登録されていない英語を入力すると、「登録されていません」と表示され…
PHPを使ったフォームの演習 SELECTを使ったFORMの演習をしました。 入力する前のフォームの画面 入力した後のフォームの画面 受信した内容を表示した画面 フォーム側（送信側）ソース <html lang="ja"><head><meta charset="utf-8"><title>フォームの内容を取得する</title><style>h1, p { margin-left: 50px;}dl {/* overflow: </meta></head></html>…
フォームの送信と受信 valueにテキストを入れる場合 送信側 <input type="checkbox" id="meet" name="food" value="ステーキ"><label for="steak">ステーキ</label><input type="checkbox" id="cake" name="food" value="ケーキ"><label for="cake">ケーキ</label> 受信側 foreach( $_POST['food'] as $value ){ //valueは"ステーキ"、"ケーキ" echo "{$value} ";} valueに数字を入れ…
時間はサーバー側の時間を取得するので、タイムゾーンの設定をしておく必要があります。 タイムゾーンはphp.iniファイルを以下のように記述します。
九九の表を作成 PHPを使って９×９の九九の表を作ってみました。 PHPソース <html lang="ja"><head><meta charset="utf-8"><title>九九表</title><style>table { border-collapse: collapse; border: solid 2px #000; font-size: 24px; width: 500px; height: 500px; text-align: center;}tr:first-child, th:first-child { backg</meta></head></html>…
スパムかどうかのチェック方法 サイトにスパム対策がされているかどうかのチェックは、サーチコンソールの「手動による対策」で行えます。また、以下URLからもチェックできます。 www.google.com Googleの 品質に関するガイドライン 以下、”品質に関するガイ…
スパムとは？ 不当な方法を用いて検索エンジンの上位に表示させようとする行為のことです。 スパムの種類 上位表示の目的で以下のことを行うとスパムになります。 隠しテキスト・隠しリンク スタイルシートやstyle属性を使ってHTMLソース上のテキストをブラ…
検索ロボット 検索エンジンにはロボット型とディレクトリ型があり、Googleは全文検索ができるロボット型です。検索ロボットは、テキスト、写真、動画、音楽などのコンテンツを読み込みます。 検索順位を決定するアルゴリズム 検索エンジンの表示順を決定する…
データベースの参照 データベースの参照にはSELECT文を使います。 SELECT * FROM テーブル名; テーブル名：参照するテーブルの名前 *：すべての行のすべての列 SELECT 列名 FROM テーブル名; テーブルから指定した列だけを取り出す。 特定の列を取り出すこと…
form.phpでフォームに入力して、結果をshowname.phpで受け取り表示します。 PHP演習 2のフォームに「好きな色」を追加しています。色は複数選択可能であるため、受信して表示する側では配列を使用しています。 実行結果 入力フォーム フォームの内容を受信し…
配列 ソースファイル（PHP） <html lang="ja"><head><meta charset="utf-8"><title>PHPの配列</title></head> <body>";echo "$color[1]<br>";echo "$color[2]<br>";echo "<br>";foreach($color as $value){ echo "$value<br>";}?> </body></html>
実行すると1秒後にAXELAという文字の描画が始まり2秒かけて描画し、最後の状態を保持して終了します。 実行してすぐの画面 AXELAという文字を破線にして、その間隔を表示されない間隔(下記のソース内stroke-dasharray: 2000;/*破線の間隔*/)まで広げているた…
CSS3によるアニメーションは大きく分けて、トランジションとアニメーションの2つに分けられます。 transitionとanimationとの比較 transition 動かすために:hoverなどのきっかけが必要 トランジションでは実行後に元のプロパティ値に戻る 比較的簡単な記述で…
PCのウィンドウサイズ一杯のページからスマホ用のページを作成しました。 PC用の画面 PC用の画面（ウィンドウの横幅を狭くした状態） スマホ用の画面 HTML <html lang="ja"><head><meta charset="utf-8"><title>VOGUE模擬サイト</title><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="css/style.css"></head> <body><h1></h1></body></html>
ナビゲーションボタンのマウスオーバーの状態として、ボタンの下に三角マークが表示されるものがあります。 CSSを使った方法を記述しておきます。 マウスオーバーしていない時のナビボタンの表示 マウスオーバーしている時のナビボタンの表示（三角マークが…
CSS3のメディアクエリについてまとめておきます。 メディアクエリとは、ウィンドウサイズ、画面密度など閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能です。 メディアクエリの記述方法 記述方法には次のような3つの方法があります。…
form.phpで入力した名前を送信し、showname.phpで受信させる ソースファイル form.php <html lang ="ja"><head><meta charset="utf-8"><title>フォーム入力画面</title></head> <body><form action="showname.php" method="get"><p>お名前を入力して送信ボタンを押してください。<p><input type="text" name="name"><input type="submit" value="送信"></form></body><…</html>
変数と文字列の連結 phpソース <html lang="ja"><head><meta charset="utf-8"><title>変数と文字列の連結</title></head> <body>\n";//ドットで連結echo "$product を$num 個販売しています<br>\n";//変数の後に空白を入れて連結echo "{$product}を{$num}個販売しています\n";//カールブランケットで連結…</body></html>
PHPの開発環境としてローカルホストでApacheサーバー(Webサーバー)が動作するXAMPPを使用します。XAMPPにはApacheの他にPHP本体とPHPで使用するとデータベース等が含まれています。 XAMPPのインストール 新しいバージョンではデータベースがMySQLからMariaDB…
.htaccessはWebサーバー「Apache」を制御するための設定ファイルの一つです。特定フォルダにアクセスしたら、パスワードを要求するとか、別のページにリダイレクトするとかに利用します。フォルダ単位での設置・設定が可能で、設置されたフォルダとその下の…
Googleフォームを使ってWebページにある「お問い合わせ」を作成します。 Googleアカウントを持っていることが前提になりますので、持っていなければ作業前にGoogleアカウントを作成します。 以下からフォーム作成を開始します。 www.google.com Googleフォー…
レスポンシブWebデザインは、制作の前の設計が大切です。 どこまで対応するかを決める すべてのデバイスとOSとブラウザ、そしてその各バージョンに対応することは事実上不可能です。どこまで対応するのかを事前に決めておくことで、以降の作業がやりやすくな…
PDCAサイクル PLAN 目標到達のプロセス設計 DO 計画の実行 CHECK 結果測定・評価・分析 ACT プロセスの改善・措置 －＞PLANへ アクセス解析の導入方式 導入前の解析 リアルタイム 低コスト 高コスト Webサイトの修正不要 サーバーログファイル型 上記(1) ウ…
キーワードの設定 アクセス解析(＊1)の結果から対策キーワードを決める 検索ボリュームが多いキーワードを選ぶ (＊1) ユーザー当たりのコンバージョン（有効なアクションにつながった数）が多い。 1人当たりの閲覧ページ数が多い、滞在時間が長い等。 SEOの…
amazonでは、Webページの反応が0.1秒遅くなると売り上げが1％低下 Googleでは、Webページの反応が0.5秒遅くなるとアクセス数が20％低下 一般的に、Webページの表示スピードが1秒遅くなると、PVが11％、コンバージョンが7％、顧客満足度が16％低下 表示速度を…
アクセシビリティ（Accessibility）とは、高齢者や障害者を含む誰もが支障なく利用できる度合いのことです。 回線品質、端末の性能、ブラウザの設定など、さまざまに異なる利用環境においても情報取得に重大な問題が起こらないようにすることが大切です。 W3…
jQueryでスムーススクロール ページ内で一気にジャンプしてしまうと、同じページなのか違うページに飛んだのか判断ができません。それを解決する一つの方法でもあるのがスムーススクロールです。 jQueryソース $(function(){ //ページ内リンクにスムーススク…
自己理解(ジョブカード)と仕事理解 －＞意思決定ー「書類・作品準備」ー＞仕事探しー＞応募ー＞内定ー＞採用 産業(業界)と職業 職業は産業に含まれる（ 産業 （ 職業 ） ） ＊営業は全産業共通 産業の区分け 19区分 職業分類 11分類 就職情報 人的ネットワー…
