2014-11-26 HTML5とは HTML5 HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む 狭義のHTM…
2014-11-24 可変レイアウトパターン：構造 RWD 可変レイアウトパターン Lサイズ：980px以上 Mサイズ：600px～979px以上 Sサイズ：599px以下 PICKUP STREAM HOME ABOUT CONTACT 1 AUG 海岸のデコレーション CATEGORY: 海と海岸と空 海岸には砂や貝殻しかない…
2014-11-23 レスポンシブWebデザインのレイアウトパターン RWD レスポンシブWebデザイン レスポンシブ・Webデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと 技術的には「Media Queries（メディア・クエリ…
2014-11-22 densityに基づいたビューポート RWD density ディスプレイサイズや画像解像度が異なるデバイスにおいて、同じコンテンツが同じ大きさで見えるようにするため考えたれたもの 各デバイスでdpiに応じてdensityの幅が設定されます dpiはデバイスのデ…
2014-11-21 スマートフォンに対応したWebサイト制作：レスポンシブWebデザイン RWD スマートフォン＆タブレットの歴史 iPhoneの登場 初期のスマートフォンは、1990年代に登場 iPhoneに最適化したWebページ制作の誕生 Androidの登場 2008年にAndroidを搭載し…
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以上１未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨…
2014-11-19 DOMでアニメーション JavaScript アニメーション 「アニメーション」とは、生命や魂を意味するラテン語の「ANIMA」を語源とする言葉 一般的に、本来静止している絵を生きてるかのように動かす技術 歴史的には、1830年代プラトーの作ったフェナキ…
2014-11-18 スタイルの変更とイベントと実行タイミング JavaScript スタイルを変更 要素に対してJavaScriptでCSSのスタイルを変更します 要素 . style . プロパティ = 値; 文字色 #myid {color: #ff0000;} document.getElementById( 'myid' ).style.color = …
2014-11-17 GIFアニメーション Photoshop アニメーションとは 「アニメーション」は、目の錯覚を利用して残像を連続しているように感じさせることで「動き」を作っています。 たとえば、先日の「GIFアニメ：swingbird」の場合、軸の基準点に対し「回転」があ…
2014-11-16 AI - キャラクターをつくる Illustrator 楕円形ツールを自由に使う ここまでは、ペンツールを使わなくても形にできます。 楕円を描いて、ハサミツールで切っても曲線にはなります。 アンカーポイント切り替えツールを使う 楕円の端をとがらすには…
2014-11-15 確認演習（1） JavaScript JavaScript ステートメント（命令文）の終わりはセミコロン「；」 ステートメントは、上から順に実行される 命令に与える値を、引数（ひきすう）という 文字列と数値の扱いの違いに注意する メソッドはオブジェクトに対…
2014-11-14 画像置換 JavaScript マンガで分かる JavaScriptプログラミング講座 JavaScriptで画像置換 JavaScript Reference：onMouseOver CSSは必要なし！ onmouse属性を使った簡単なロールオーバーの作り方 要素に直接記述（インライン） onmouseover = " …
2014-11-13 ライブトレースと複合パス/クリッピングマスクとブレンド Illustrator ライブトレース（オートトレース）を使う （1）新規書類を作成する。 （2）「ファイル」→「配置」で写真を配置。 （3）「オブジェクト」→「ライブトレース」→「トレースオプ…
2014-11-12 作ってみよう★★★★ JavaScript 必ず作ってみること！ <html ja> <head> <metacharset="UTF-8"> <title>JavaScriptの演習</title> </head> <body> <script> </script> </body> </html> ダイアログボックスに入力された数値の値が、偶数か奇数かを判別してブラウザに表示する 現在の時刻を表示する 「今年は、～～年です。」と表示する 「今日は、～…
2014-11-11 チェックテスト（7） JavaScript Q1 以下はDOMに関する説明です。空欄（A）と（B）を適切な語で埋めなさい DOMは、HTMLやXMLなどの（A）で記述された文書の要素にアクセスするための仕組みで、要素を（B）構造で扱う。 Q2 以下はHTML文書において…
2014-11-10 イベントハンドラの設定 JavaScript HTMLとJavaScriptの分離 いままでの記述では、イベントハンドラはHTML内に記述していました 定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは…
2014-11-09 DocumentオブジェクトによるHTML要素の操作 JavaScript 要素へのアクセス（要素の取得） Documentオブジェクトのメソッドでよく利用されるのは、「getElementById」と「getElementsByName」です どちらも戻り値としてHTML要素を返します IDを指定…
2014-11-08 DOMとは JavaScript DOMとは DOM（Document Object Model）とは、HTML文書をオブジェクトとして読み込んで操作するための仕組み Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能のこと DOMは、…
2014-11-07 チェックテスト（6） JavaScript Q1 以下はWindowオブジェクトに関する説明です。空欄（A）（B）に適切な語を埋めなさい すべてのブラウザオブジェクトの（A）となるオブジェクトで、（B）に関する情報をもつ。 Q2 openメソッドで開いたウィンド…
2014-11-06 LocationオブジェクトとHistoryオブジェクト JavaScript WebページのURL情報（Location） Locationオブジェクトは、WebページのURLを情報としてもつオブジェクトです hrefプロパティの値を変更することで、別のWebページへ移動できます location.…
2014-11-05 ブラウザオブジェクト JavaScript ブラウザオブジェクトとは ブラウザオブジェクトは、ブラウザに組み込まれているオブジェクトです ブラウザ上の情報は、すべてオブジェクトとして扱うことができます これらのオブジェクトを総称して「ブラウザ…
2014-11-04 チェックテスト（5） JavaScript Q1 以下はイベントに関する説明です空欄を埋めなさい Webページ上でボタンのクリックなどのイベントが起こると、（A）がイベントの発生を検知し、関連付けられた任意の処理を呼び出す。 このような仕組みを（B)と…
2014-11-03 イベント発生元の特定 JavaScript thisキーワードの利用 １つの関数を複数のイベントから呼び出すとき、呼び出された関数内でどの部品から発生したイベントなのかを知りたい場合があります そのようなときには、thisキーワードを利用します イベ…
2014-11-02 イベント駆動型モデル JavaScript イベントとは 何かのきっかけで処理を行うことを「イベント」と呼びます イベントが発生したときに対応する処理を呼び出す仕組みを「イベント駆動型モデル」と呼びます それぞれのイベントと任意の処理をあらか…
2014-11-01 チェックテスト（4） JavaScript Q1 以下のオブジェクトが持つメソッドを実行するときには、どのような命令を記述しますか？ <script> var obj = { x: function(){ console.log('こんにちは');} }; </script> Q2 メソッドの中で記述すると、オブジェクト自身を表す…
2014-10-31 正規表現 JavaScript 正規表現とは 入力チェック処理には、正規表現が用いられます 正規表現とは、文字列のパターンを特定するための手法のことです 正規表現の書き方 《正規表現》 /パターン/オプション 数字が４桁、先頭がアルファベットなどの…
2014-10-30 状況に応じた処理 JavaScript 平日・休日を区別して表示 DateオブジェクトのgetDay()メソッドを使う 日曜日「0」、月曜日「1」、火曜日「2」、水曜日「3」、木曜日「4」、金曜日「5」、土曜日「6」 wday.jpg hday.jpg <script> var d = newDate(); var da…
2014-10-29 組み込みオブジェクト JavaScript 組み込みオブジェクトとは 関数と同じくオブジェクトの場合も、JavaScriptがあらかじめ用意しているオブジェクトがあります これを「組み込みオブジェクト」と呼びます 《主な組み込みオブジェクト一覧》 オブジ…
2014-10-28 オブジェクト・メソッド・プロパティ JavaScript オブジェクトとは 文字列や数値、関数などJavaScriptで扱うデータは、すべてオブジェクトです オブジェクトは「プロパティ」と「メソッド」を持っている JavaScriptのオブジェクトとは、キーと値…
2014-10-27 線のバリエーション Illustrator 線のバリエーション 点線を描く （1）10pxの直線を描く （2）線の属性を「波線」→「線分：0」「間隔：線の太さの２倍以上」にする。 （3）線端の形状を「丸形線端」にする。 破線を描く（JR線路・私鉄線路） アビ…
