Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[JavaScript]⑫setInterval　clearInterval　setTimeoutメソッド

JavaScript

setIntervalメソッド clearIntervalメソッド setTimeoutメソッド

[jQuery]②readyメソッド、セレクタの使い方

jQuery

readyメソッド jQueryの文法 セレクター CSSでよく利用されるセレクター CSS2.1のセレクター CSS3のセレクター CSSの属性セレクタ

[jQuery]①jQueryとは何か

jQuery

jQueryとは 利用歩法 jQueryの概念

[JavaScript]⑪match、call、applyメソッド

JavaScript

チェックテスト(4)(5)の回答 matchメソッド callメソッド applyメソッド

[Flash]②ActionScript記述の基本

Flash

記述の基本 記述場所 インスタンス名を設定 インスタンスの親子関係 例題：回りながら落ちる風車

[Flash]①Flashの基本 おさらい

Flash

シンボルとインスタンス シェイプをシンボル化する シンボル化すると自動的にインスタンスの一つになる ライブラリに登録されたシンボルをドラッグで作れる シンボルの編集 インスタンスをダブルクリックしシンボルを編集できる 形や色を変えると「おおもと…

[HTML][CSS][自由課題]企業系サイトを制作②

HTML CSS 制作物

説明 自主課題として制作した企業サイト コピー、ロゴ等設計 写真は今回パブリックドメインのものを使用 テーマカラー青、アソートカラーピンク・黄 バリデーション済

[HTML][CSS][自由課題]企業系サイトを制作①

HTML CSS 制作物

サイト説明 授業課題で制作した企業サイト 写真を自由に選び、それを元にカラー設計 写真は今回パブリックドメインのものを使用 テーマカラー青、アソートカラーオレンジ バリデーション済

[JavaScript]⑩Arrayオブジェクト Arrayオブジェクトのメソッド 連想配列(Objectオブジェクト)

JavaScript

Arrayオブジェクト 配列リテラル Arrayコンストラクタ 配列の添字を活用 Arrayオブジェクトのメソッド 連想配列

[Javascript]⑨組み込みオブジェクト Dateオブジェクト Mathオブジェクト random関数

Javascript

組み込みオブジェクト Objectオブジェクト Dateオブジェクト Mathオブジェクト 乱数を戻す：random

[Flash][自由課題] 複数のswfをまとめたFlashの制作 / ショートカットキー

Flash 制作物

ゲシュタルトの７法則 デザインの授業で習った「ゲシュタルトの７法則」 ゲシュタルトの法則とユーザーの消費行動 - Webデザインの勉強 | Webサイト制作科 3月16日開講クラス …を説明するFlashを制作しました。 左側のボタンをクリックすると表示が切り替わ…

[Flash]ActionScript2.0 フレームアニメーション ボタン

Flash

クラシックトゥイーンで動画を作る ボタンを制作 ボタンにスクリプトを設定

[Flash]Creative Cloudで、旧バージョン（CS6）をインストールする方法

Flash

Creative Cloud契約で、旧バージョンのFlash CS6をインストールする方法を記しています。 Flash CCではActionScript2.0が使えない問題 Flash CS6だとAS2.0が使えるらしい! CCデスクトップアプリケーションからダウンロードする

[JavaScript]⑧組み込み関数 変数のスコープ 匿名関数

JavaScript

組み込み関数とは 変数のスコープ

[JavaScript]⑦イベント駆動型モデル

JavaScript

イベント駆動型モデル clickイベント loadイベント thisキーワード 課題：画像を置き換える

[Illustrator]いろいろ作る①曲線にグラデーション②ジグザグ線

Illustrator 素材

曲線にグラデーション(CS6以降) 曲線を引く 線にグラデーションを適用 グラデーションに値を設定 グラデーション▶線▶パスにそってグラデーションを適用 ジグザグ線 線を引く 効果→パスの変形→ジグザグ 大きさ▶波の大きさを設定 折り返し▶波の数を設定 ポイン…

[JavaScript]⑥配列・連想配列

JavaScript

配列の宣言 参照 代入 ２次元配列 連想配列

[JavaScript]⑤繰り返し文/while文、for文

JavaScript

while文 for文 配列をカウント for-in文 例題：３の倍数でahoと表示するプログラム

[JavaScript]④関数の基礎とSwitch~case文

JavaScript

関数とは ボタンから関数呼び出し switch~case文 例題:県名を当てるゲーム

[JavaScript]③条件分岐

JavaScript

プログラムの流れ if文 if~else文 論理演算子 例題 0~1000の数字を入力させ、桁数をブラウザ上に表示するプログラム

[JavaScript]②ブラウザに表示する

JavaScript

ブラウザに文字を表示 toFixed 性別と年齢を入力したら厄年かどうか表示するプログラム(if文使用)

[JavaScript]JavaScriptの基礎(4/16)

JavaScript

学習範囲 JavaScript? ECMAScript? JavaScriptはオブジェクト指向言語 Webブラウザはオブジェクトの集まり

[JavaScript]JavaScript①記述、読み込み、変数(4/16)

JavaScript

記述方法 属性に記述 開発における注意 変数 記述の基本 文字列リテラルと数値リテラル 演算子

[アクセシビリティ]Webアクセシビリティの現状認識

アクセシビリティ

はじめに 今日は授業の中でWebアクセシビリティについて触れられて、この分野はけっこう熱いんじゃないかという気がしたので、まとめました。 Webアクセシビリティの指針 やはりお前らのアクセシビリティは間違っている デバイスの進化とアクセシビリティ 現…

[Web][HTML][CSS][デザイン]Webサイト構築(4/8)

Web HTML CSS デザイン

はじめに 今日は一つのスタイルシートでデザインを制御する複数のWebページを作り、階層構造を作ってそれらをリンクしました。 製作手順 ページの固有性を作る(CSSシグネチャ) その他CSS知識：CSSで画像の角を丸くする その他デザイン知識：modernとは何か …

[Photoshop]Photoshopの基礎(4/7)

Photoshop

はじめに 今日はPhotoshopの使い方を学びました。 初期設定 選択範囲の設定 レイヤーマスクの設定 色調補正の方法 スマートオブジェクト 画面解像度 メモリ消費の抑制 初期設定 Adpbe Photoshop設定ファイルの削除 Photoshopは前回起動時の設定を記憶してい…

[CSS] [CSS]背景画像の使い方、float/clear/overflowの関係(4/6)

CSS

はじめに floatとインライン要素・ブロック要素の使い分けにより、１ページの制作はかなり自由度を増しました。引き続き演習を重ねながら、学習を進めています。 background画像の使い方 float/clear/overflowの関係 アキュートアクセントの入力 今日のポイ…

[Web][CSS]画像置換の方法論(4/3)

Web CSS

はじめに タイトルテキストなどの画像置換はよく使用しますが、SEO対策を念頭に置くと一筋縄ではいかない問題になってきます。 CSS - 画像置換の種類とその方法 - Go-Nextブログ 強引に非表示すると、スパムとみなされ検索エンジンから蹴られるおそれがある…

[CSS]リストの親子関係を利用したナビゲーションの制作(4/2)

CSS

ナビゲーションブロックとは ナビゲーションは、各ページへのリンクをまとめたものでありリンク集のひとつで、項目を列挙したものといえます。リンクの価値は同質なので、番号のない箇条書きとして扱います。 リストをナビゲーション - Webデザインの勉強 | …

[CSS] [CSS]floatを使った２カラムレイアウトの演習

CSS

はじめに こういうレイアウトを作ってみたい。 <body> <div id="header"> <p>Header</p> </div> <div id="nav"> <p>Nav</p> </div> <div id="wrapper"> <div id="content"> <p>Content</p> </div> <div id="sidebar"> <p>Sidebar</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </body> </html> /* content */ body{ text-align: cen…