2016-10-01から1ヶ月間の記事一覧
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分類 就職情報 人的ネットワー…
ユーザビリティ（Usability） サイトを訪れたユーザーが、目的の情報にいかに正確に、すばやく、途中で不快感を覚えずにたどり着くことができるかについて、その達成度を示します。 本質的なユーザビリティ ユーザーの不満を限りなくゼロに近づけます。 付加…
スマートフォンでは、画面上の各サイトのアイコンをクリックしてサイトのページを表示させることが一般的です。よってスマートフォンでサイトアクセスに使う”タッチアイコン”を作成しておく必要があります。 準備するアイコンについて 各デバイスに完全準拠…
jQueryでページ先頭にジャンプ jQueryを使用すると簡単にジャンプの機能が実現できます。 ページ先頭に戻るための仕様を以下のように決めます。 最初は上に戻る矢印は消しておく。 ある程度スクロールしたら上に戻るための矢印を表示する。 矢印をクリックし…
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ページにエンベッドする方法 カレンダーの作成 1.「作成」をクリック 2.予定を入力 公開設定は、Web閲覧者全員に見てもらうようにするため”一般公開”にします。 予定の入力が終わったら「保存」をクリックします。 カレンダーをエンベ…
FacebookページのWebページへの埋め込み方法 以下の「ページプラグイン・・・開発者向けFacebook」をクリックすると設定のページになります。 developers.facebook.com 設定内容 設定例として、東京都のFacebookを表示してみます。設定を反映したプレビュー…
Twitterタイムラインをエンベッドする方法 埋め込むコードを作成する 新しい埋め込みユーザータイムラインの作成は、自分がログインしているアカウントのウィジェット設定から行います。以下のURLにてコードを作成します。 https://twitter.com/settings/wid…
ハンバーガーメニューの動作 ボタンをクリックすると、アニメーション動作で横の3本線から×に変わり、それと同時にボタンの下にスライドダウンでメニューが表示されます。この状態で再度クリックすると、アニメーション動作で元の3本線に戻ります。それと同…
ハンバーガーメニューの動作 プラス（＋）の状態のボタンをクリックすると、アニメーション動作でマイナス（－）になり、それと同時にボタンの下にスライドダウンでメニューが表示されます。マイナス（－）の状態でクリックすると、アニメーション動作でプラ…
2カラムでレスポンシブなページを作成 ソースファイル HTML <html lang="ja"><head><meta charset="utf-8"><title>RWD枝豆</title><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="css/style.css"></head> <body><div id="container"><header><h1><img src="img/logo.png" alt="枝豆隊ロゴ"></h1><h2>豆はカ…</h2></header></div></body></html>
HTMLの挿入、クラス属性の追加、スタイルの変更 HTML&CSS <html lang="ja"><head><meta charset="utf-8"><title>jQueryの練習</title><style>p.style { color: #F00; font-size: 36px; background-color: #333;}</style><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){ $('button').on('click',function(…</meta></head></html>
左のサムネイル画像をクリックすると、クリックした画像が右側に大きく表示されます。 完成画面 ソースコード HTML <html lang="ja"><head><meta charset="utf-8"><title>jQuery</title><link rel="stylesheet" href="css/style.css"><script src="../js/jquery-2.2.4.min.js"></script><script src="js/script.js"></script></head> <body></body></html>
rubyタグ rubyは全てのブラウザが正式対応しています。 縦書き Firefoxは対応していて、ChromeとSafariとIEはベンダープレフィックスが必要です。縦書きには「writing-modeプロパティ」を使用します。 p { -webkit-writing-mode: vertical-rl; /*ChromeとSaf…
