2014-12-26

2014-12-26 アニメーション効果 jQuery 非表示の状態の要素を表示する show() $( セレクタ ).show( スピード ); アニメーションのスピードは「slow」「fast」のいずれか、またはミリ秒(1秒=1000ミリ秒)で指定します スピードの指定を省略すると、show()は…

2014-12-25

2014-12-25 メソッドとイベント演習問題 jQuery 複数プロパティ指定 以下のように表示するようjQueryを記述しなさい <body> <ul> <li>HTML</li> <li>CSS</li> <liid="third">jQuery</li> <li>PHP</li> </ul> </body> 要素の追加 以下のように表示するようjQueryを記述しなさい <body> <olid="list"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ol> </body> ol要素を、id名「wrapper」でdiv要…

2014-12-24

2014-12-24 イベント jQuery イベントでタイミングを設定 意図したタイミングで処理を実行する HTMLが読み込まれたタイミングで実行する ready()イベント <script> $(document).ready(function(){ //HTMLが読み込まれたときに、実行する処理を記述 }); </script> の短縮形が以…

2014-12-23

2014-12-23 HTML/CSSを操作する jQuery HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する(セレクター) 操作する内容(命令) jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り…

2014-12-22

2014-12-22 if文を使った反転 Flash 反転の考え方 (1)右に移動 右端までは移動速度が代入され続け、右に移動します onClipEvent (load) { var speed:Number = 10; //移動速度 } onClipEvent (enterFrame) { _x += speed; } (2)ステージの右端まで移動 右…

2014-12-21

2014-12-21 if分を使って条件分岐 Flash if分を使って条件分岐 【F01】 ムービークリップが表示された時から、10ずつX座標を移動し右端まで行ったら左端から現れて繰り返すスクリプトを記述しなさい。 Gadgets powered by Google 「ムービークリップの幅」を…

2014-12-20

2014-12-20 条件分岐 Flash 条件を見つける Gadgets powered by Google 連続的にムービークリップを右に移動する 右端まできたら左端に移動する 条件:右端まできたら 処理:左端に移動する if文 ユーザーが入力したパスワードが正しかったらこの処理をさせ…

2014-12-19

2014-12-19 アルゴリズムの構築 Flash 「いつ」「何をするのか」 Gadgets powered by Google この場合、「連続的に」「ムービークリップが右に移動する」となります。 ※解説は次ページにあります。 イベントハンドラ イベント 「いつ」を設定する部分になり…

2014-12-18

2014-12-18 リップル(さざなみ)効果 Flash 合言葉は、ガチョーン! (1)新規ドキュメント作成 (2)背景色を変更 (3)文字を入力する (4)「修正」→「分解」 (5)「修正」→「タイムライン」→「レイヤーに分配」 (4)1文字づつ、「分解」→「シンボル…

2014-12-17

2014-12-17 時間の制御とボタンの作成 Flash イラストを描く Illustratorでの作業 素材 Flashにコピー&ペースト シンボルに変換 制御:停止 Flashは「自動再生」が基本です。 ですから、「止める」設定がされていない場合、繰り替えし再生し続けることにな…

2014-12-16

2014-12-16 練習課題A Flash 【A01】 変数を使った計算式を書き、出力パネルに結果を表示させなさい。 10×(8+12)÷4 の値は? var num1:Number = 10; var num2:Number = 8; var num3:Number = 12; var num4:Number = 4; total = num1 * (num2 + num3) / nu…

2014-12-15

2014-12-15 演算 Flash 演算(計算) プログラムの世界では、計算のことを演算と呼びます。 この段階では、「算数」の計算です。 「数学」の計算は「Mathクラス」を使っておこないます。 var a:Number = 10; var b:Number = 5; var c:Number = 2; var d:Numb…

2014-12-14

2014-12-14 メソッド・プロパティとイベントハンドラ・ムービークリップアクション Flash メソッドとプロパティ クラスを構成するメンバーは「メソッド」と「プロパティ」 メソッド 「メソッド」は「動詞」に相当 オブジェクトに何かの動作を命令する働きを…

2014-12-13

2014-12-13 変数 Flash 変数:Variable 「変数」とは、何らかの値を代入して保存しておくもので、必要なときに自由に作ることができます ダイナミックテキストフィールドにテキスト内容を表示するために、情報を保存しておく ユーザーが入力したテキスト内容…

2014-12-12

2014-12-12 ActionScriptとは Flash ActionScriptとは ActionScript(アクションスクリプト)とは、アドビシステムズ社の製品であるFlashに使用されるプログラミング言語 ECMAScript(ECMA-262)を拡張したスクリプト(European Computer Manufacturer Associa…

2014-12-11

2014-12-11 メディアクエリ基礎 RWD Media Queries Media Queries menu1 menu2 menu3 Contents Menu1 Contents Menu2 2014.10.07 レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するよう…

2014-12-10

2014-12-10 グリッドレイアウト HTML5 HTML5でのカラムレイアウト 素材 html5shiv.js IE8以前のブラウザにも、HTML5の新要素を認識させるためのライブラリ ie9.js internetexplore6,7,8をie9に近づけるためのライブラリ position:fixed; max-heightやmin-hei…

2014-12-09

2014-12-09 文字サイズのバランスで見せる Photoshop まとまって見える文字組みのコツ Illustratorでの文字詰め Webでの文字詰めは、カーニングが基本 限定アイテムをつくる 練習素材 文字ツールを使う 文字入力(配置したい位置ではなく、別の開いているス…

2014-12-08

2014-12-08 Googleフォームでsend-mail フォーム Googleドライブでフォーム作成 Googleドライブを選択 フォームを選択 入力フィールド(テキスト)を作成 テキストを選択、「質問のタイトル」を「お名前」にする アイテムを追加 テキストを選択、「質問のタ…

2014-12-07

2014-12-07 フォームの各部品 Form お問い合せフォーム 各部品の確認 テキスト入力 <htmllang="ja"> <head> <metacharset="UTF-8"> <title>お問い合わせ</title> </head> <body> <h1>お問い合わせフォーム</h1> <formaction="#"method="post"> <p>名前:<inputtype="text"name="name"size="20"maxlength="10"value="お名前"></p> <p>内容:</p></formaction="#"method="post"></body></htmllang="ja">

2014-12-06

2014-12-06 ユーザーからの入力を受け取るフォーム Form フォームとは ブラウザからサーバー側へ情報を送信するための仕組み HTMLタグで作成し、情報を受け取る処理はPHPで記述します フォームの種類 文字を入力する部分 テキストボックス パスワード用テキ…

2014-12-05

2014-12-05 可変レイアウト RWD 可変 <htmllang="ja"> <head> <metacharset="utf-8"> <title>リキッドレイアウト</title> <style> body { width: 78.125%; margin: 0 auto; } header, footer { height: 100px; background: #E9E9E9; } footer { clear: both; } #left, #middle, #right { height: 400px; float: left; } #left…</metacharset="utf-8"></head></htmllang="ja">

2014-12-04

2014-12-04 使い方:メソッド jQuery メソッド セレクタで指定した箇所(要素 / 属性)に対して「何をさせる」と指示を与えること jQueryでCSSスタイルを追加・変更する 1つの指示を出す場合 <script> //1つの指示を出す(記述方法1) $('セレクタ').css('color', '</script>…

2014-12-03

2014-12-03 セレクタ演習問題 jQuery jQuery演習 表示結果のようになるよう記述しなさい 要素セレクタ(element) $('div') <html> <head> <metacharset="UTF-8"> <title>jQuery:要素セレクタ</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <h1>Heading</h1> <p>The quick brown fox jumps over the la…</p></body>

2014-12-02

2014-12-02 使い方:セレクタ jQuery 最低限、使うものだけ覚える すべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば…

2014-12-01

2014-12-01 jQueryの基本 jQuery よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラ…

2014-11-30

2014-11-30 タイムラインコントロール - クロスフェード Flash Flashムービー PhotoshopのレイヤーをFlashのレイヤーにコンバート 各写真を「シンボルに変換」 時間を設計しながら「キーフレームの挿入」 モーションを設定 各レイヤーをクロス状態にずらして…

2014-11-29

2014-11-29 RWDJP RWD RWDJP 30代でWeb業界に転職したアラフォーWebデザイナーの雑記 スマートフォン向けウェブサイトの構築(Google) Adobe HTML5 特設サイト

2014-11-28

2014-11-28 クロスフェード JavaScript JavaScriptでクロスフェード jQueryのバージョンを確認する APIかダウンロードかを決める <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> Brand Spanking New <scripttype="text/javascript"> window.onload = function(){ var cf = new Crossfader(newArray('cf1','cf2','cf3', 'cf4', 'cf5'), 50</scripttype="text/javascript">…

2014-11-27

2014-11-27 レスポンシブWebデザイン入門 RWD ゼロから始めるレスポンシブWebデザイン入門 レスポンシブWebデザインとは レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと 技術的には「Medi…

2014-11-26

2014-11-26 HTML5とは HTML5 HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む 狭義のHTM…

2014-11-24

2014-11-24 可変レイアウトパターン:構造 RWD 可変レイアウトパターン Lサイズ:980px以上 Mサイズ:600px~979px以上 Sサイズ:599px以下 PICKUP STREAM HOME ABOUT CONTACT 1 AUG 海岸のデコレーション CATEGORY: 海と海岸と空 海岸には砂や貝殻しかない…

2014-11-23

2014-11-23 レスポンシブWebデザインのレイアウトパターン RWD レスポンシブWebデザイン レスポンシブ・Webデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと 技術的には「Media Queries(メディア・クエリ…

2014-11-22

2014-11-22 densityに基づいたビューポート RWD density ディスプレイサイズや画像解像度が異なるデバイスにおいて、同じコンテンツが同じ大きさで見えるようにするため考えたれたもの 各デバイスでdpiに応じてdensityの幅が設定されます dpiはデバイスのデ…

2014-11-21

2014-11-21 スマートフォンに対応したWebサイト制作:レスポンシブWebデザイン RWD スマートフォン&タブレットの歴史 iPhoneの登場 初期のスマートフォンは、1990年代に登場 iPhoneに最適化したWebページ制作の誕生 Androidの登場 2008年にAndroidを搭載し…

2014-11-20

2014-11-20 random関数 JavaScript 乱数 ランダムな数列 予測できない数列 <htmllang="ja"> <head> <metacharset="UTF-8"> <title>乱数</title> </head> <body> <h1>乱数</h1> <script> var num = Math.random(); document.write(num); </script> </body> </html> 乱数の発生 「random()」は、「0以上1未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨…

2014-11-19

2014-11-19 DOMでアニメーション JavaScript アニメーション 「アニメーション」とは、生命や魂を意味するラテン語の「ANIMA」を語源とする言葉 一般的に、本来静止している絵を生きてるかのように動かす技術 歴史的には、1830年代プラトーの作ったフェナキ…

2014-11-18

2014-11-18 スタイルの変更とイベントと実行タイミング JavaScript スタイルを変更 要素に対してJavaScriptでCSSのスタイルを変更します 要素 . style . プロパティ = 値; 文字色 #myid {color: #ff0000;} document.getElementById( 'myid' ).style.color = …

2014-11-17

2014-11-17 GIFアニメーション Photoshop アニメーションとは 「アニメーション」は、目の錯覚を利用して残像を連続しているように感じさせることで「動き」を作っています。 たとえば、先日の「GIFアニメ:swingbird」の場合、軸の基準点に対し「回転」があ…

2014-11-16

2014-11-16 AI - キャラクターをつくる Illustrator 楕円形ツールを自由に使う ここまでは、ペンツールを使わなくても形にできます。 楕円を描いて、ハサミツールで切っても曲線にはなります。 アンカーポイント切り替えツールを使う 楕円の端をとがらすには…

2014-11-15

2014-11-15 確認演習(1) JavaScript JavaScript ステートメント(命令文)の終わりはセミコロン「;」 ステートメントは、上から順に実行される 命令に与える値を、引数(ひきすう)という 文字列と数値の扱いの違いに注意する メソッドはオブジェクトに対…

2014-11-14

2014-11-14 画像置換 JavaScript マンガで分かる JavaScriptプログラミング講座 JavaScriptで画像置換 JavaScript Reference:onMouseOver CSSは必要なし! onmouse属性を使った簡単なロールオーバーの作り方 要素に直接記述(インライン) onmouseover = " …

2014-11-13

2014-11-13 ライブトレースと複合パス/クリッピングマスクとブレンド Illustrator ライブトレース(オートトレース)を使う (1)新規書類を作成する。 (2)「ファイル」→「配置」で写真を配置。 (3)「オブジェクト」→「ライブトレース」→「トレースオプ…

2014-11-12

2014-11-12 作ってみよう★★★★ JavaScript 必ず作ってみること! <html ja> <head> <metacharset="UTF-8"> <title>JavaScriptの演習</title> </head> <body> <script> </script> </body> </html> ダイアログボックスに入力された数値の値が、偶数か奇数かを判別してブラウザに表示する 現在の時刻を表示する 「今年は、~~年です。」と表示する 「今日は、~…

2014-11-11

2014-11-11 チェックテスト(7) JavaScript Q1 以下はDOMに関する説明です。空欄(A)と(B)を適切な語で埋めなさい DOMは、HTMLやXMLなどの(A)で記述された文書の要素にアクセスするための仕組みで、要素を(B)構造で扱う。 Q2 以下はHTML文書において…

2014-11-10

2014-11-10 イベントハンドラの設定 JavaScript HTMLとJavaScriptの分離 いままでの記述では、イベントハンドラはHTML内に記述していました 定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは…

2014-11-09

2014-11-09 DocumentオブジェクトによるHTML要素の操作 JavaScript 要素へのアクセス(要素の取得) Documentオブジェクトのメソッドでよく利用されるのは、「getElementById」と「getElementsByName」です どちらも戻り値としてHTML要素を返します IDを指定…

2014-11-08

2014-11-08 DOMとは JavaScript DOMとは DOM(Document Object Model)とは、HTML文書をオブジェクトとして読み込んで操作するための仕組み Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能のこと DOMは、…

2014-11-07

2014-11-07 チェックテスト(6) JavaScript Q1 以下はWindowオブジェクトに関する説明です。空欄(A)(B)に適切な語を埋めなさい すべてのブラウザオブジェクトの(A)となるオブジェクトで、(B)に関する情報をもつ。 Q2 openメソッドで開いたウィンド…

2014-11-06

2014-11-06 LocationオブジェクトとHistoryオブジェクト JavaScript WebページのURL情報(Location) Locationオブジェクトは、WebページのURLを情報としてもつオブジェクトです hrefプロパティの値を変更することで、別のWebページへ移動できます location.…