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…