webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

JavaScript if(もし、だったら)

本日は、JavaScript if(もし、だったら) を勉強して参りました。 【いままでの復習】 指定したウィンドウに文字ダイアログを表示する。 → prompt 記載例)prompt("ダイアログに表示される文字列","入力欄の初期値") xをyで除算した余りを求める。 → % 記載…

HTML5 カテゴリーとコンテンツ

本日から html5 の勉強に入って参りました。 【個人ノート】 ・1ページ内で何度もh1タグを使うことが可能。 ・HTML5ではアウトライン(階層構造)を意識して作成してくことが大事。 ・文書構造として拾われたくない場合、divを使用する→アウトライン構造…

HTML 演習

演習を行ってまいりました。 【使用した要素等】 div id container header nav site wrapper content sidebar footer div class post date ad menu p class more span → span自体には特に意味合いはありませんが、<span>~</span>で囲んだ範囲をひとかたまりとし、スタイ…

Photoshop ポラロイド風画像を作る

Photoshopで ↓ このような、ポラロイド風画像を作成したいと思います。 【例】 【ポイント】土台から作成していく! 今回は4枚構造となります。 【1枚目作成】 新規作成 → 新規作成した背景を塗りつぶす 【2枚目作成】新規レイヤーを追加 → 長方形選択ツール…

JavaScript 画像置換

今回は、下記の画像上へマウスを移動すると、その画像をカラーで表示するJavaScriptを作成したいと思います。 【P!!ポイント】 要素に直接記述(インライン) onMouseOver = " this.src = ' img/◎◎.jpg ' " onMouseOut = " this.src = ' img/◎◎.jpg ' " 【…

JavaScript 画像置換 【Dreamweaverで完成へ②】

2014年3月16日に記載した JavaScript 画像置換【Photoshop】で画像準備まで① の続きです。 先日用意した下記のものを使用していきます。 写真画像 幅540px × 高さ400px → 5枚 写真画像 幅100px × 高さ自動 → 5枚 枠画像 幅600px × 高さ460px → 1枚 【結果】 …

確認テスト JavaScript Form

17日は確認テストでした。 【ポイント】 JavaScript window.alert( ); アラート作成 document.write(' '); ドキュメントに記載する onClick="alert(' ')" クリックするとアラートが出る onmouseover="alert('' )" マウスが上にくるとアラートがでる documen…

JavaScript 画像置換 【Photoshop で 画像準備まで①】

15日は、JavaScript 画像置換を勉強してまいりました。 Photoshop で 画像準備 写真画像 幅540px × 高さ400px → 5枚 写真画像 幅100px × 高さ自動 → 5枚 枠画像 幅600px × 高さ460px → 1枚 1. 【1】幅540px × 高さ400px(作成&保存手順) 作成. Photoshop →…

JavaScript プログラム言語

本日はプログラムについて勉強して参りました。 では 本題へ・・・。 コンピューターでプログラムを実行する方法は2つ インタプリンタ方式 コンパイラ方式 【インタプリンタ方式の特徴】 上から1行1行読んで実行していく メモリーを解放しながら進むので、メ…

HTML form 問合せフォームの基本構造

今回は、↓ の問合せフォームを作成していきます。 問合せフォームについてあれこれ 個人情報入力する側に、何かメリットが無ければ入力動作までに結びつかない。 HP自体が信頼されなければ入力まで結びつかない。 取り消しボタンは現在あまり使われない。(→…

Photoshop 写真 切り抜き写真の考え方

商品販売のHP上で、・ロケどり ・商品写真 の2種類が必要なのは何故か? ロケ撮りだけでは何故いけないのか? 【ロケ撮りのみの場合】 自分が、ロケ地に行ったらどういう状態になるのか?をイメージできる。 →が、でもどうせ行かないし・・・。 となり、購…

Illustrator 矢印の書き方

Illustrator で 矢印を書く この方法で書く矢印は、あとで変形等の自由度が高いのが特徴 ①四角を2つ書く ②ツールの垂直方向に整列で整列させる。 ③ダイレクト選択ツール(白矢印)で、図の2か所をドラッグで選択する。 (ツール)オブジェクト → パス → 平均…

Photoshop クリッピングパス 切り抜き写真

切り抜き写真を作る ペンツールで切り抜く作業をするのは、エッジをはっきりさせる為。 余白が出ない様に少々内側にアンカーポイントを置く。 アンカーポイントは後でなおし易い様に出来るだけ少なく。 準備 【1】フォトショップ上に画像を用意(画像をコピ…

Flash リップル効果 

Flashのリップル効果をつかってアニメーションを作成。 準備 シーン1(ステージ)に文字を用意。 【1】画面左のプロパティ → 編集 ↓の画面が展開。 【2】ドキュメント設定より → ①サイズ(600px × 200px) → ②背景色 →フレームレート(1秒間あたりのフレーム…

Flash ボールを動かす (クラシックモーションガイド)

ボールが弾んでいるようなアニメにメーションを作成します。 準備: 【1】ボールをステージ上に配置する。 線無し(線が付いていると動かない場合有り) 色はグラデーションを使用(立体感を出すため) ボールをシンボルに修正 ステージ上のボールを選択 → …

Flash タイムラインコントロール 写真がぼんやり見えては消える

先生より『Flashとは、自分達がいいな!と思うビジュアルを、どうやったら見せられるのか?といった発想力が試されるツールではある。』 準備 【1】フォトショップ 550PX × 400PX 72 で写真を5枚用意します。 ※1枚目の写真の真上に、そのままコピー&ペース…

Flash 時間の制御 ボタン作成

先生より 『今は画像が止まっているけれども,此処のボタンをクリックしたらどうなるのかな?等、誘導する事がWEBの役割です。なので、アニメーションもただやみくもに作ればいい、という事はありません。』 Flash 時間の制御 ボタン作成準備 【1】タイム…

Flash 一人あたりの金額の割り出し

練習問題 「ビールを12杯:1杯500円」 「ウーロン茶を4杯:1杯300円」 「サラダを2皿:1皿600円」 「チキンを2皿:1皿800円」「ピザを2枚:1枚800円」 これを5人で割り勘にしたときの一人あたりの金額を求めなさい。 『入力内容』 var beer:Number = 50…

Flash シンボルを動かす

車(シンボル)を右に動かす 車の画像をステージに設置します。 【1】Illustrator からコピーして、ステージに貼り付け 画像をシンボルに指定します。 【2】選択ツールでステージの画像を選択 → (ツール)修正 → シンボルに変更 → 種類を”ムービークリップ”…

変数

変数:Variable 何らかの値(数字、文字列など)を代入してとっておくことのできる入れ物のようなもの。 早速やってみましょう。 今回は、10+20=30 を変数を使用して行ってみたいと思います。 準備 : 新規シートを開く 【1】(ツール)新規 → ActionScrip…

フラッシュで〇を書くアニメーションを作ろう。

準備 : 画面の設定を行いましょう. 【1】(ツール)ウィンドウ → ワークスペース → デザイナー ツール プロパティ ライブラリ が表示され、初心者にも分かりやすくなります. 画面の設定ができました!! では実際に〇を書くアニメーションを作る準備をしま…