ユーザビリティ（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…
Faviconとは Faviconはウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称で、favorite iconの略でお気に入りのアイコンという意味です。 faviconのサイズはOSやデバイスによって様々で、すべてに対応するのは大変なため、基本的な以…
タブパネル ソースファイル 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><div id="panel"><h1>ショート・ケーキ</h1><ul class="tab"></ul></div></body></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>$(function(){// $('dd').css('display', 'none');// $('dd').hide();// $('dd:first').slideDown(…</link></meta></head></html>
「Lightbox」と「bxslider」プラグイン プラグインのダウンロード Lightboxダウンロード先 lokeshdhakar.com bxsliderダウンロード先 bxslider.com ファイルの階層構造 全体構造 cssフォルダー jsフォルダー imgフォルダー ソースファイル index.html <html lang="ja"><head><meta charset="utf-8"><title>Lightb</title></meta></head></html>…
画像をスライドさせる <html lang="ja"><head><meta charset="utf-8"><title>jQueryアニメーション animate()</title><style>html,body,p { margin: 0; padding: 0;}p { width: 1200px; height: 300px; margin:0 ;}div { width: 400px; height: 300px;/* overflow: hidden;*/}</style></meta></head></html>
フェードインとフェードアウト 表示ボタンを押すと画像を表示（フェードイン）し、非表示ボタンを押すと画像を消す（フェードアウト）プログラム。 <html lang="ja"><head><meta charset="utf-8"><title>jQueryアニメーション</title><style>img { display: none;}</style><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){ $('button#fadeIn').on('click',functi…</meta></head></html>
単立宗教法人 慈照院 寺離れではない 70％以上が日本の伝統・文化の大切さを感じている。 目的 寺を知ってもらう。真言宗を知ってもらう。同時に住職さんを知ってもらう。 コンセプト エイジフリー 年齢に関係ない ストレスフリー ストレスを感じない ジェン…
オブジェクト指向とは、プログラミングにオブジェクトの概念を持ち込んだ考え方。 プログラミングの世界では当たり前の技術 質の高いコードを書ける 活用方法を学べば言語にとらわれない能力が身につく オブジェクト指向プログラミングのメリット 人間の思考…
jQueryのアニメーション効果 HTML要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せる。 非表示状態の要素を表示する show() $( セレクタ ).show( スピード ); スピード：slow, fast または ミリ秒(1000=1秒) スピードの…
正円の面積を求める関数 <html lang="ja"><head><meta charset="utf-8"><title>正円の面積を求める関数</title><script>function circle(){ var pai = 3; var r = prompt('半径を半角で入力してください。'); var area = Math.pow(r,2) * pai; //Math.pow(r,2)は、rの2乗を返す console.log(area); var out1 = '半径'+r+'mの正円</meta></head></html>…
イベントでタイミングを設定しよう ボタンを押すと画像が替わる処理 <html lang="ja"><head><meta charset="utf-8"><title>jQueryのクリックイベント</title><script src="../js/jquery-2.2.4.min.js"></script><script>$(function(){//$('button').click(function(){ $('button').on('click',function(){ //クリックイベント以外も後で追加できる。スマホ対応にはonを使ったほうが</meta></head></html>…
HTML/CSSを操作するjQueryの命令 <script> $(function(){ $('セレクタ').命令(); }); </script> テキストの変更と取得 text() テキストを変更する text() テキストを取得する HTMLの変更と取得 html() HTMLを変更する html() HTMLを取得する HTMLの挿入 prepend() 指定した要…
パターン1の処理概要 最初から開いているパネルは1つのみです。他のパネルを選択すると開いているパネルは閉じて、選択したパネルが開きます。開いているパネルを再度選択しても開いているままで閉じません。 パターン1のプログラム <html lang="ja"><head><meta charset="utf-8"><meta http-equiv="Content-Style-Type" content="text/css"><meta http-equiv="Content-Script-Type" content="text/javascript"><title>…</meta></meta></meta></head></html>
readyメソッドについて HTMLの読込みが終わった後に実行させるためのメソッドです。これがないとbody要素内のHTMLよりも先にhead要素内のjQuaryが実行されてしまいます。 readyメソッドの書き方 $(document).ready(function(){ //ここにjQueryの処理を記述 }…
jQueryとは？ JavaScriptを使うより簡単な記述で済むように開発されたJavaScriptのライブラリーのことです。 jQueryを使うメリット 簡潔な短い記述で済む。 ブラウザ間の差異を吸収する。 ネット上に多くの情報が公開されている。 jQueryを使うデメリット サ…
