2014-05-01から1ヶ月間の記事一覧
ボタンコントロール 外部ファイルの読み込みがもっとも簡単な記述です var snd1:Sound=new Sound(); var snd2:Sound=new Sound(); var snd3:Sound=new Sound(); play1_btn.onRelease = function() { snd1.loadSound("p01.mp3",true); snd1.start(); } play2_…
jQueryで背景画像を無限ループ Flashを利用した場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryで背景画像を無限ループ</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function () { //アニメーションスピード var scrollSpeed = 0.1; //画像サイズ var imgWidth = 1600…</meta></head></html>
ジェネレーター Striped Backgrounds Tartan Background pattern generator backgrounds and Photoshop patterns Generate NoisePNG Subtle Patterns 素材 CADデータ付き（使用しない） JPEGをパターン定義をして使用する Seamless Paper Patterns 25 Seamle…
見られたくないページを見られないようにするには 見られたくないページを閲覧不可にする robots.txt 「robots.txt」を置き、検索の対象から外す 認証を使う .htaccessによるBasic認証 パスワードで認証された場合のみ閲覧可能にする 見られたくないディレク…
CSS3 グラデーション background に指定することで、ボックスの背景色を線形にグラデーションに指定する値です。 （※ブラウザによって記述方法が変わりますので注意が必要です。 mozilla系ブラウザ -moz-linear-gradient(方向, 開始色, 終了色;) background:…
SLIDERJS SlidesJS 3.0 <html lang="ja"> <head> <meta charset="utf-8"> <title>SlidesJS Standard Code Example</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/example.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> body {…</link></link></meta></meta></head></html>
append/appendTo 要素を動かすためのメソッド ある要素を切り取り、別の要素のなかに付け加える append：付け加える append 要素Aのなかに要素Bを移動させます jQueryObjectA.append(jQueryObjectB); 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" type="text/css" href="styles.css"> </link></meta></head></html>
fadeIn/fadeOut jQueryObject.fadeIn(); jQueryObject.fadeOut(); 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </link></meta></head></html>
応用的なイベント mouseover()メソッド マウスをのせたとき click()メソッドによる画像への移動が実行されないように「return false;」を記述します <html lang="ja"> <head> <meta charset="UTF-8"> <title>mouseover()メソッド</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <p id="photo"> <…</p></body></html>
同じ要素を二度取ってこないようにする $(function(){ $('#div1').click(function(){ $('#div1').text('クリックされました'); }); }); この記述には「$('#div1')」が二度書かれています。 それを変数を使って書き換えます。 $(function(){ var element = $(…
イベント 何かが起こったとき、予約したコードを実行する click（クリックされたとき） mouseenter（マウスがのったとき） mouseleave（マウスがおりたとき） hover（mouseenterとmouseleaveを一度に） focus（フォーカスが当たったとき） blur（フォーカス…
addClass/removeClass 要素のclass属性を操作するためのメソッド addClassはクラスを追加 removeClassはクラスを削除 jQueryObject.addClass('クラス名'); jQueryObject.removeClass('クラス名'); クラス〜に属する要素 <div class="apple"></div> 次のようにも記述できます。 <div class="apple banana orange"></div> CSSは…
text/html jQueryObject.text('書き換え後のテキスト'); jQueryObject.html('書き換え後のHTML'); 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></link></meta></head></html>
要素のスタイルを操作 $( 'セレクタ' ).メソッド( パラメータ ); ドット（.）でつなぐ メソッド名には必ず（）をつける 必要な場合は、パラメータを記述する CSS()メソッド 要素のCSSを操作するためのメソッド <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS()メソッド</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <ul> <li>HTML</li></ul></body></html>
css jQueryObject.css('プロパティ','値'); 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="scripts.js"></script> </link></meta></head></html>
「何かを取ってくる」機能 セレクタ 取ってきたところからさらに探す セレクタ $('セレクタ') ID セレクタ タイプセレクタ CLASSセレクタ 子孫セレクタ 全称セレクタ 子供セレクタ 隣接兄弟セレクタ 複数セレクタ 否定セレクタ 属性セレクタ 順番に関するセ…
jQueryとは JavaScriptのライブラリのひとつ ブラウザ依存を気にしなくてよい DOMの操作が簡単 記述の仕方は、CSSに似ている write less, do more. オープンソース（MITライセンス+GPLライセンス） http://iquery.com/ ダウンロードして利用する場合 2.xは旧…
表示を切り替える 《素材1》→ 《素材2》→ <html lang="ja"> <head> <meta charset="UTF-8"> <title>まずはやってみる：方丈記編</title> <link href="css/sample01.css" type="text/css" rel="stylesheet" media="all"> <script type="text/javascript" src="js/1_01.js"></script> </head> <body> <div id="whatsnew"> <h1></h1></div></body></html>
アニメーション 「アニメーション」とは、生命や魂を意味するラテン語の「ANIMA」を語源とする言葉 一般的に、本来静止している絵を生きてるかのように動かす技術 歴史的には、1830年代プラトーの作ったフェナキスティスコープや、ホーナーの考案したゾート…
特定のタイミングで実行したいスクリプトをまとめる 関数：function function myidEvent() { alert( '押されました' ); } myidEvent() という名前でスクリプトをグループ化しました。 特定のイベントに関連づける HTML内に各要素の属性のonClickなどイベント…
スタイルを変更 要素に対してJavaScriptでCSSのスタイルを変更します 要素 . style . プロパティ = 値; 文字色 #myid {color: #ff0000;} document.getElementById( 'myid' ).style.color = '#ff0000'; 背景色 #myid {background-color: #ffffff;} document.g…
DOM Scriptingとは JavaScriptによるDOM(Document Object Model)を使った開発手法です。 DOM Scripting JavaScript（Javaではありません）によって標準に準拠したDOMを使いHTML+CSSに対してアクセスします。 テーブルレイアウトのサイトはこのDOMを使った処…
Dateオブジェクト JavaScriptに用意されている組み込みオブジェクト Dateコンストラクタを引数なしで実行すると、現在の日付時刻を管理する「Dateオブジェクト」が生成される 現在の日付時刻を管理するDateオブジェクトを生成 指定した時点で日付時刻を管理…
新規ウィンドウを開く windowオブジェクトのopenメソッドを使用します その戻り値は、生成されたwindowオブジェクトになります windowオブジェクトは、Webブラウザが自動的に生成するオブジェクトです プログラム内で開いた「windowオブジェクト」の記述は省…
form部品のアクセス formオブジェクトの下位階層にあります フォーム部品の活用 フォーム部品のアクセス document.myForm.height.value ※myForm：formオブジェクト ※height：textオブジェクト ※value：valueプロパティ（テキストボックス内の文字列を表す） …
イベントとは 何らかの状態が起こったときに生まれるメッセージのようなもの JavaScriptに用意されている「イベントハンドラ」という仕組みを使うと、このイベントを捕まえて適切な処理を行うことができます イベントハンドラ JavaScriptに限らず、ActionScr…
オブジェクトの階層構造 Webブラウザ上の主なオブジェクトには、windowオブジェクトを頂点とする階層構造があります navigatorオブジェクト 個々のウィンドウに依存しないオブジェクト 「for〜in文」を利用して、プロパティ一覧を表示する navigator . プロ…
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>トップ | 豆はカラダにイイ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1><img src="img/logo.jpg" alt="豆はカラダにイイ サイトロゴ"></h1> <h2>豆はカラダにイイ</h2> <nav> <ul> </ul></nav></header></body></html>
