ヒアリングシート クライアントは、埼玉県久喜市の「ケーキの店 モニカ」のオーナーです。久喜市ふるさと納税のお礼の品にモニカの洋菓子が選定されるなど、地域では有名な洋菓子店です。 モニカのオーナーにヒアリングした結果をヒアリングシートにまとめま…
作る際に気を付けるポイント 動画ファイルは出来るだけ軽くする。（あくまでイメージなので長さも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> 結…
while文 条件式が真なら{ }内の処理を繰り返します。 書式 while( 条件式 ) { 繰り返す処理 } 条件式：if文と同様に真(true)・偽(false)で表せる値や式 繰り返す処理の中に条件式が偽になる処理を必ず入れます。そうしないと無限ループになってしまいます。 …
switch文とは 数値または文字がラベルと同じかどうかを判断し、同じだった場合その部分処理だけ実行します。 if文と違い条件式は書けません。 処理のあとのbreak文は必ず入れます。break文がないとすべてのcaseを判断してしまいます。無駄な処理を行うだけで…
正規表現（Regular expression）とは？ 文字列のパターンを表現する表示法で、文字列の検索・置換を行うときなどに利用されます。 （活用例） 住所や電話番号、メールアドレスなどの入力データが正しいかどうか確認できます。 正規表現の書き方 文字列とメタ…
イベントハンドラとは マウスポインタが「上に乗った」、「クリックされた」というような出来事のことをイベントといい、そのイベントに応じて何かを実行させるプログラミングモデルのことをイベントドリブンといいます。イベントハンドラはイベントに対して…
プログラムリスト 和暦を西暦に変換するプログラム 偶数・奇数の判別プログラム 標準体重を求めるプログラム 男性か女性かの入力をして標準体重を求めるプログラム 季節を求めるプログラム 和暦を西暦に変換するプログラム <body><script type="text/javascript">var heisei;var fullyear;var mess</body>…
線形グラデーション 上から下へのグラデーション HTML<div id="box1"></div> CSS#box1 {width: 300px;height: 100px;margin: 50px auto 0;background-color: #F36;/*グラデーションが効かないIE8のため*/background:-webkit-linear-gradient(top, #F36, #FCC);/*Android標準ブラウ…
if文 条件の一致ー＞真：true 条件の不一致ー＞偽：false if文 if ( 条件 ) { 条件が真であれば実行される処理 } if else文 if ( 条件 ) { 条件が真であれば実行される処理 } else { 条件が偽であれば実行される処理 } if else if文 if ( 条件１ ) { 条件１…
JavaScriptとは？ Webブラウザー上で動作するスクリプト言語であり、ソースコードを上から順に１行１行実行するインタープリタ方式の言語です。 変数 変数は箱と考えます。箱の中にはいろいろな値を入れることができます。 値：数値、文字列 変数につける名…
ジョハリの窓 自分の強み（ー＞仕事探し）と弱み（ー＞対策） ジョハリの窓 自分で自分を知っている 自分で自分を知らない 他人は自分を知っている ①パブリック（開かれた窓）②ブラインド（気づかない窓） 他人は自分を知らない ③プライベート（秘密の窓）④…
ジョブカードの書き方 ジョブカードとは”キャリアの棚卸し” ジョブカードの対象者 新卒者（卒業から3年） 転職 長期（1年以上） 「キャリアプランシート」（様式１－１）の書き方 ふりがな：ひらがな 生年月日：元号、西暦（Web関連多い）併用で記入 現住所…
既存サイトを真似して作るのは良い学習方法であり、スライス実習には960グリッドシステムで作成してあるサイトが向いています。 既存サイトの画面をキャプチャーし、Photoshopを使って画像をスライスして分割された画像を別々に保存します。 スライスの作業…
アピアランス機能とブラシを使ってロゴを作る 新規ドキュメントの準備 カラーモードをCMYKにする 環境設定ー>単位ー>線をポイントにする ロゴにする文字を入力 文字の入力 アウトラインを作成 グループ解除 文字の変形 説明 メニュー「書式」ー＞「アウトラ…
テキストの装飾 text-shadow テキストに影をつける text-shadow:x方向の距離 Ｙ方向の距離 ぼかし幅 影色; 1 ドロップシャドウ text-shadow: 2px 2px 3px #999; 2 グロー（光彩） color: #FFF;text-shadow: 2px 2px 3px #999; 3 べベル（浮き出し） color: #…
