jQueryで画像を切り替える

スマホ用画像とPC画像を、スマホ画像のサイズ(640px)を境に切り替えます。 スマホ用画像 01_sp.png 640px×300px PC用画像 01_pc.png 960px×300px スマホ用画像(画面幅は640px) 画像ファイルは、スマホ用の ”01_sp.png” が使用されています。 PC用画像(画…

JavaScriptを学ぶ上で役立つサイト

今後のために、学習に役立つサイトを記述しておきます。 developer.mozilla.orgMozilla Developer Centerの日本語訳サイト。分かりやすいかは別にして、情報量は一番だと思います。 一撃必殺JavaScript日本語リファレンスサンプルが充実しているので理解しや…

カレンダーをつくる

PHP

2017年1月のカレンダーをつくる 作成したカレンダー PHPソース h1 { font-size: 28px;}table { border-top: solid 1px black; border-collapse: collaose; border-spacing: 0;}td { border-bottom: solid 1px black; padding: 6px; margin: 0;}</style>__STYLE; echo…

あと何日かを求める

PHP

2017年まであと何日かを求める PHPソース 2017年まで、あと {$days}日です。</p>"; 実行結果 翌週水曜日の日付を求…

QRコードを表示するプログラム

PHP

URLを入力して変換ボタンをクリックすると、入力したURLのQRコードが表示されます。サイズは大(300x300)、小(150x150)を選択できます。 PHPソース

ボタンを100個作る

PHP

ボタンを100個表示し、ボタンをクリックするとボタンの番号を表示するプログラムをPHPで作成しました。 ソース "; for($i=1; $i <= 100; $i++){ echo "<input type='submit' name='btn' value='{$i}' style='width:48px;' />"; } echo "</form>"; //ボタンが押されていれば、押された番号を表示 if(isset($_GET["btn"])){ $btn = intval(…

マウスクリックでボタンを作成

マウスをクリックするとボタンが作成されます。作成されたボタンをクリックすると、アラートウィンドウ [ cliked:button 番号 ] が表示されます。 アラートウィンドウ ソース <html lang="ja"><head> <meta charset=UTF-8"> <title>ボタンを作成</title> <style> html,body,h1 { margin: 0; padding: 0; } h1{ width:490px; fon</meta></head></html>…

WordPressのデータベースを移行する

移行元の作業 データベースをエクスポートする xamppのコントロールパネルを起動してMysqlをstartさせ、mySQLの「Admin」を起動します。 データベース「0708_wp」を選択して全てのテーブルをチェックし、チェックしたものを「エクスポート」します。 データ…

WordPressのインストール

WordPressをダウンロードしてデータベースの作成と設定を行い、WordPressを使用できる状態にします。ダウンロードはWordPress日本語サイトで可能です。 ja.wordpress.org WordPressのダウンロード ダウンロードボタンをクリックしてWordPressをダウンロード…

画像を縮小する

画像を縮小するのに使用したサイトをログに残しておきます。 画像ファイルをアップロードして縮小された画像ファイルをダウンロードするというものです。簡単な手順を箇条書きにします。 縮小したい画像ファイルをアップロード(Max20ファイル) 縮小サイ…

犬がカーソルを追いかける

犬がカーソルを追いかけるプログラムを作成します。 ソース <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演習 8

PHP

英語を日本語に変換する 英語を日本語に変換する簡単なプログラムをPHPで作成しました。 ”apple”と入力して「変換」ボタンをクリックします。 日本語で「リンゴ」ですと表示されます。 登録されていない英語を入力すると、「登録されていません」と表示され…

PHP演習 7

PHP

PHPを使ったフォームの演習 SELECTを使ったFORMの演習をしました。 入力する前のフォームの画面 入力した後のフォームの画面 受信した内容を表示した画面 フォーム側(送信側)ソース <html lang="ja"><head><meta charset="utf-8"><title>フォームの内容を取得する</title><style>h1, p { margin-left: 50px;}dl {/* overflow: </meta></head></html>…

PHP演習 6

PHP

フォームの送信と受信 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で日付や時間を取得

PHP

時間はサーバー側の時間を取得するので、タイムゾーンの設定をしておく必要があります。 タイムゾーンはphp.iniファイルを以下のように記述します。

PHP演習 5

PHP

九九の表を作成 PHPを使って9×9の九九の表を作ってみました。 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>…

SEOのための知識 3

SEO

スパムかどうかのチェック方法 サイトにスパム対策がされているかどうかのチェックは、サーチコンソールの「手動による対策」で行えます。また、以下URLからもチェックできます。 www.google.com Googleの 品質に関するガイドライン 以下、”品質に関するガイ…

SEOのための知識 2

SEO

スパムとは? 不当な方法を用いて検索エンジンの上位に表示させようとする行為のことです。 スパムの種類 上位表示の目的で以下のことを行うとスパムになります。 隠しテキスト・隠しリンク スタイルシートやstyle属性を使ってHTMLソース上のテキストをブラ…

SEOのための知識 1

SEO

検索ロボット 検索エンジンにはロボット型とディレクトリ型があり、Googleは全文検索ができるロボット型です。検索ロボットは、テキスト、写真、動画、音楽などのコンテンツを読み込みます。 検索順位を決定するアルゴリズム 検索エンジンの表示順を決定する…

SQL

SQL

データベースの参照 データベースの参照にはSELECT文を使います。 SELECT * FROM テーブル名; テーブル名:参照するテーブルの名前 *:すべての行のすべての列 SELECT 列名 FROM テーブル名; テーブルから指定した列だけを取り出す。 特定の列を取り出すこと…

PHP演習 4

PHP

form.phpでフォームに入力して、結果をshowname.phpで受け取り表示します。 PHP演習 2のフォームに「好きな色」を追加しています。色は複数選択可能であるため、受信して表示する側では配列を使用しています。 実行結果 入力フォーム フォームの内容を受信し…

PHP演習 3

PHP

配列 ソースファイル(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>

CSS3によるSVGアニメーション

実行すると1秒後にAXELAという文字の描画が始まり2秒かけて描画し、最後の状態を保持して終了します。 実行してすぐの画面 AXELAという文字を破線にして、その間隔を表示されない間隔(下記のソース内stroke-dasharray: 2000;/*破線の間隔*/)まで広げているた…

CSS3のアニメーション

CSS3によるアニメーションは大きく分けて、トランジションとアニメーションの2つに分けられます。 transitionとanimationとの比較 transition 動かすために:hoverなどのきっかけが必要 トランジションでは実行後に元のプロパティ値に戻る 比較的簡単な記述で…

VHを使った全画面ページのスマホ対応

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のメディアクエリ

CSS3のメディアクエリについてまとめておきます。 メディアクエリとは、ウィンドウサイズ、画面密度など閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能です。 メディアクエリの記述方法 記述方法には次のような3つの方法があります。…

PHP演習 2

PHP

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演習 1

PHP

変数と文字列の連結 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>

XAMPPを使用したPHPの実行環境を構築する

PHPの開発環境としてローカルホストでApacheサーバー(Webサーバー)が動作するXAMPPを使用します。XAMPPにはApacheの他にPHP本体とPHPで使用するとデータベース等が含まれています。 XAMPPのインストール 新しいバージョンではデータベースがMySQLからMariaDB…

.htaccessを使ったサイトの自動振り分け

.htaccessはWebサーバー「Apache」を制御するための設定ファイルの一つです。特定フォルダにアクセスしたら、パスワードを要求するとか、別のページにリダイレクトするとかに利用します。フォルダ単位での設置・設定が可能で、設置されたフォルダとその下の…

Googleフォームで「お問い合わせ」を作成

SNS

Googleフォームを使ってWebページにある「お問い合わせ」を作成します。 Googleアカウントを持っていることが前提になりますので、持っていなければ作業前にGoogleアカウントを作成します。 以下からフォーム作成を開始します。 www.google.com Googleフォー…

レスポンシブWebデザインの設計

レスポンシブWebデザインは、制作の前の設計が大切です。 どこまで対応するかを決める すべてのデバイスとOSとブラウザ、そしてその各バージョンに対応することは事実上不可能です。どこまで対応するのかを事前に決めておくことで、以降の作業がやりやすくな…

アクセス解析の基本

PDCAサイクル PLAN 目標到達のプロセス設計 DO 計画の実行 CHECK 結果測定・評価・分析 ACT プロセスの改善・措置 ->PLANへ アクセス解析の導入方式 導入前の解析 リアルタイム 低コスト 高コスト Webサイトの修正不要 サーバーログファイル型 上記(1) ウ…

SEO (Serch Engine Optimization)

SEO

キーワードの設定 アクセス解析(*1)の結果から対策キーワードを決める 検索ボリュームが多いキーワードを選ぶ (*1) ユーザー当たりのコンバージョン(有効なアクションにつながった数)が多い。 1人当たりの閲覧ページ数が多い、滞在時間が長い等。 SEOの…

Webサイトの表示速度もユーザビリティ

amazonでは、Webページの反応が0.1秒遅くなると売り上げが1%低下 Googleでは、Webページの反応が0.5秒遅くなるとアクセス数が20%低下 一般的に、Webページの表示スピードが1秒遅くなると、PVが11%、コンバージョンが7%、顧客満足度が16%低下 表示速度を…

アクセシビリティ

アクセシビリティ(Accessibility)とは、高齢者や障害者を含む誰もが支障なく利用できる度合いのことです。 回線品質、端末の性能、ブラウザの設定など、さまざまに異なる利用環境においても情報取得に重大な問題が起こらないようにすることが大切です。 W3…

同じWebページ内のリンクにスムースにスクロールさせる

jQueryでスムーススクロール ページ内で一気にジャンプしてしまうと、同じページなのか違うページに飛んだのか判断ができません。それを解決する一つの方法でもあるのがスムーススクロールです。 jQueryソース $(function(){ //ページ内リンクにスムーススク…

職業意識 仕事の探し方

自己理解(ジョブカード)と仕事理解 ->意思決定ー「書類・作品準備」ー>仕事探しー>応募ー>内定ー>採用 産業(業界)と職業 職業は産業に含まれる( 産業 ( 職業 ) ) *営業は全産業共通 産業の区分け 19区分 職業分類 11分類 就職情報 人的ネットワー…

Webサイトのユーザビリティ

ユーザビリティ(Usability) サイトを訪れたユーザーが、目的の情報にいかに正確に、すばやく、途中で不快感を覚えずにたどり着くことができるかについて、その達成度を示します。 本質的なユーザビリティ ユーザーの不満を限りなくゼロに近づけます。 付加…

タッチアイコンの設定方法

スマートフォンでは、画面上の各サイトのアイコンをクリックしてサイトのページを表示させることが一般的です。よってスマートフォンでサイトアクセスに使う”タッチアイコン”を作成しておく必要があります。 準備するアイコンについて 各デバイスに完全準拠…

jQueryでページの先頭にジャンプする機能を作る

jQueryでページ先頭にジャンプ jQueryを使用すると簡単にジャンプの機能が実現できます。 ページ先頭に戻るための仕様を以下のように決めます。 最初は上に戻る矢印は消しておく。 ある程度スクロールしたら上に戻るための矢印を表示する。 矢印をクリックし…

GoogleマップをWebページに表示させる

SNS

Googleマップを埋め込む 「Google Maps Embed API」を使わずに簡単にマップをエンベッドする方法があります。これを使うと地図を自由にカスタマイズすることができますが、「API KEY」なるものが必要になります。KeyはGoogle側が使用回数制限を設けるのに利…

アイコンフォント

Webフォントは、Webサーバー上に置かれたフォントファイルをダウンロードして表示するCSS3の機能です。 アイコンフォントのメリット フォントなのでテキストとのベースラインが合わせやすい。 大きさや色はCSSでコントロールできる ベクターデータなので拡大…

ページトップまでスムースにスクロールさせる

スムーススクロール jQueryを使用してページトップまでスムースにスクロールさせます。jQueryプラグインを使うより簡単で軽い処理ですみます。 ソースファイル HTML <p><a id="to-top" href="#top">トップに戻る</a></p> JS <script>$(function(){ $('#to-top').on('click',function(){ $('html,body').anim</script>…

GoogleカレンダーをWebページに表示させる

SNS

GoogleカレンダーをWebページにエンベッドする方法 カレンダーの作成 1.「作成」をクリック 2.予定を入力 公開設定は、Web閲覧者全員に見てもらうようにするため”一般公開”にします。 予定の入力が終わったら「保存」をクリックします。 カレンダーをエンベ…

フェイスブックのページをWebページに表示させる

SNS

FacebookページのWebページへの埋め込み方法 以下の「ページプラグイン・・・開発者向けFacebook」をクリックすると設定のページになります。 developers.facebook.com 設定内容 設定例として、東京都のFacebookを表示してみます。設定を反映したプレビュー…

ツイッターのタイムラインをWebページに表示させる

SNS

Twitterタイムラインをエンベッドする方法 埋め込むコードを作成する 新しい埋め込みユーザータイムラインの作成は、自分がログインしているアカウントのウィジェット設定から行います。以下のURLにてコードを作成します。 https://twitter.com/settings/wid…

ハンバーガーメニューを作成する2

ハンバーガーメニューの動作 ボタンをクリックすると、アニメーション動作で横の3本線から×に変わり、それと同時にボタンの下にスライドダウンでメニューが表示されます。この状態で再度クリックすると、アニメーション動作で元の3本線に戻ります。それと同…