2016-09-01から1ヶ月間の記事一覧
アコーディオンパネルの作成 ソースファイル 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を使うデメリット サ…
ヒアリングシート クライアントは、埼玉県久喜市の「ケーキの店 モニカ」のオーナーです。久喜市ふるさと納税のお礼の品にモニカの洋菓子が選定されるなど、地域では有名な洋菓子店です。 モニカのオーナーにヒアリングした結果をヒアリングシートにまとめま…
作る際に気を付けるポイント 動画ファイルは出来るだけ軽くする。（あくまでイメージなので長さも1分くらいをめどに） デフォルトではミュートの設定に あくまでも背景なので自動再生とループ再生の設定にする。（自動再生が効かないスマホでは代替え画像を…
ナビボタンと画像をレスポンシブにする <html lang="ja"><head><meta charset="utf-8"><title>レスポンシブデザイン基礎</title><meta name="viewport" content="width=device-width"><style>/*Reset CSS*/html,body,ul,li { margin: 0; padding: 0;}ul { list-style: none;}a { …</meta></meta></head></html>
レスポンシブWebデザインとは レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなどに適応た表示を、ひとつのHTMLファイルでおこなうデザイン手法のことです。 デバイスごとに専用サイトを用意することなく、マルチデ…
書類作成の目的 採用担当者に”いいね！”と思わせること－＞会って確かめよう 提出書類 履歴書 職務経歴書 添え状（郵送の場合） ハローワークの紹介状（ハローワーク紹介の場合） ジョブカード 履歴書の書き方 ＊履歴書には形式がある ＊会社は社員の履歴書…
DOMの利用 ウィンドウに表示されたドキュメントの操作はdocumentオブジェクトで行います。documentオブジェクトは多くのプロパティとメソッドを公開していますが、より標準的なDOMを利用するようにします。 ノードを作成する 要素ノードを生成 document.crea…
連想配列とは 通常の配列はインデックス番号で値を管理していますが、連想配列はわかりやすい名前などを付けて管理することができます。連想配列では、付けた名前(インデックス)のことをキーと呼びます。 連想配列の作成 var 連想配列名 = { キー名1:値, キ…
Document Object Modelとは HTMLの各要素に直接アクセスする仕組みです。 ブラウザがHTMLのソースを読み込むと、それを元にWebページを構成するすべてのタグをDOMオブジェクトとして再構築します。このDOMを操作することでWebページにアクセスすることができ…
Dateオブジェクトとは 現在の年、月、日、曜日、時、分、秒を取得したり設定したりできます。 Dateオブジェクトの生成は以下の記述で行います。 var date = new Date(); Dateオブジェクトのメソッド var myYear = date.getFullYear();// 年var myMonth = dat…
Mathオブジェクトとは 数学の演算を行うメソッドです。 Math.random Math.random()は、0～0.9990...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.round()は、小数点以下を四捨五入するメソッド…
関数とは 複数の処理をまとめたもの。 何回も同じことをする処理をまとめることでコーディングの無駄を省くことができる。また、ソースコードがすっきりして見やすくなる。 関数の定義 function 関数名() { 処理; } 関数の呼び出し 関数名(); 関数の練習 お…
<html lang="ja"><head><meta charset="utf-8"><title>フォームの練習</title></head> <body><form id="entryForm" action="#" method="post"><table border="1"><tr><th>猫ちゃんのお名前：</th><td><input type="text" name="cat-name" placeholder="みーちゃん"></td></tr><tr></tr></table></form></body></html>
フェードイン・フェードアウトのプログラム作成 写真4枚を連続でフェードイン、フェードアウトするFlashのプログラムを作成します。 Phtoshopで作成した写真を読み込む car.psdを選択します。 そのまま「OK」を選択します。 写真が読み込まれてレイヤーが4つ…
車の画像を操作するアニメーションを作成 (1)車の画像を読み込む ファイル－＞読込み－＞ライブラリに読み込む (2)シンボルに変換 車の画像をマウス右ボタンでクリック－＞シンボルに変換 名前：car フィルター：ムービークリップ 基準点：中央 (3)キーフレ…
transition transitionは「hover:」などの動作をきっかけにして、アニメーションでプロパティの値を変化させることができるプロパティです。 transition: 変化にかかる時間 プロパティ 変化の仕方 ディレイ; 変化にかかる時間 s 秒ms ミリ秒 プロパティall/n…
配列とは 変数と同じ箱の役割がありますが、変数と違うところは複数の値を入れることができることです。仕切りのある箱と考えます。 宣言の方法 var 変数 = new Array ( 値1, 値2, ・・・ ); 変数：配列名 new：new演算子 値：整数、文字、関数、オブジェク…
while文でselectボタンを作る <select><script>var i = 2;while( i <= 20 ) { document.write('<option value="i">'+i+'個</option>'); i += 2;}</script></select> 結果 for文でselectボタンを作る <select><script>for(var i = 2; i <= 20; i+=2){ document.write('<option value="i">'+i+'個</option>');}</script></select> 結…
