本日の学習内容~まとめと感想~
CSS基礎確認テスト
基礎確認テストとして、以下の課題に取り組みました。
素材:
[HTML]
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>課題04 ナビボタン</title> <link rel="stylesheet" href="css/style4.css"> </head> <body> <div id="nav"> <ul> <li id="service"><a href="#">サービス概要</a></li> <li id="results"><a href="#">実績紹介</a></li> <li id="pr"><a href="#">プレスリリース</a></li> <li id="employ"><a href="#">採用情報</a></li> <li id="company"><a href="#">会社概要</a></li> <li id="contact"><a href="#">お問い合わせ</a></li> <li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> </body> </html>
[CSS]
@charset "utf-8"; /* reset */ html, body, div, ul, li { margin: 0; padding: 0; line-height: 1.5em; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; text-align: center; font-weight: bold; } #nav { width: 896px; padding: 50px 0 0 50px; } #nav ul { overflow: hidden; } #nav li { float: left; } #nav li a { display: block; width: 128px; height: 40px; padding-top:5px; color:#FFF; } #nav li#service a { background:url(../img/btn.jpg) no-repeat 0 0; } #nav li#service a:hover { background:url(../img/btn.jpg) no-repeat -128px 0; } #nav li#results a { background:url(../img/btn.jpg) no-repeat 0 0; } #nav li#results a:hover { background:url(../img/btn.jpg) no-repeat -128px 0; } #nav li#pr a { background:url(../img/btn.jpg) no-repeat 0 0; } #nav li#pr a:hover { background:url(../img/btn.jpg) no-repeat -128px 0; } #nav li#employ a { background:url(../img/btn.jpg) no-repeat 0 0; } #nav li#employ a:hover { background:url(../img/btn.jpg) no-repeat -128px 0; } #nav li#company a { background:url(../img/btn.jpg) no-repeat 0 0; } #nav li#company a:hover { background:url(../img/btn.jpg) no-repeat -128px 0; } #nav li#contact a { background:url(../img/btn.jpg) no-repeat 0 0; } #nav li#contact a:hover { background:url(../img/btn.jpg) no-repeat -128px 0; } #nav li#sitemap a { background:url(../img/btn.jpg) no-repeat 0 0; } #nav li#sitemap a:hover { background:url(../img/btn.jpg) no-repeat -128px 0; }
▼ 作成手順は以下の通り
1ボタン辺り 160px × 5 = 800pxのナビゲーションボタンを作成する
- カンバスサイズ: w 800px × h 90px
- シェイプ(長方形)w 800px × h 40px を作成
- 上記シェイプに色(スタイル)を設定
※今回はUltimate Web 2.0 Layer Stylesでスタイルを設定(使い方は下記記事を参照)
(1).「表示メニュー」 -「新規ガイド」で 160pxごとに新規ガイドを作成する
(2). 各ボタンに文字を入れる
(3).「長方形選択ツール」固定 w 1px × h 39px 」で 長方形を作成 ---(A)
(4). 上記長方形の色を濃いグレーに塗りつぶし([alt] + [BS]キー)
(5). (A)の長方形をコピー → 同じ位置に貼り付け → [shift] + [→]キーで1px右横に移動 ---(B)
(6). 上記長方形の色を白に塗りつぶし([alt] + [BS]キー)
(7). (A)と(B)のレイヤー両方を選択し、[shift]キーを押しながら新規レイヤーアイコン(下図赤枠部分)に重ねる → (A)(B)レイヤーのコピーが作成される
(8). このまま[shift]+[→]キー、あるいは[→]キーで調整しながら次の縦ガイド線まで移動する
(9). 基本のナビゲーションバーが完成したら、レイヤーをグループ化、
(10). 同要領でhover用のナビゲーションバーをもう1つ作成する
[関連・参考記事]
- Photoshopにレイヤースタイルを追加する
保存版!Photoshop用無料グラデーション750個+まとめ - Photoshop VIP
Ultimate Web 2.0 Layer Styles | Dezinerfolio
レイヤースタイルのインストール方法 | Photoshop養成ギプス
[自身 習作例]
Flashの予備知識・基本操作
- Flashで使われているプログラム言語 ActionScriptの起源はECUMAScript(標準化されたJavaScript)である。
ECMAScript - Wikipedia
JavaScript の概要 - JavaScript | MDN
- Flash 完成形(図)から描いていく
- プログラムとして2つの性質を同時にもっている
初期設定
「プロパティ」
サイズ : w 555 × 400
フレームレート: 24/s
[F6]キー :キーフレームの挿入 (実行は[Enter]キー)
【演習】時間軸 逆転
(1)新規ファイル作成(ActionScript2.0)
(2)ワークスペースを「デザイナー」に変更(「ウインドウ」メニュー)
(3)円を描く(楕円ツール)
- 楕円ツールを選択後、線「赤 5px程度」と塗り「なし」の設定を変更する
(4)F6で「キーフレームの挿入(複製)」
(5)消しゴムツールで一部分を消す
(6)この操作を、円がなくなるまで繰り返す
(7)Enterキーを押して動きを確認する
(8)フレームレートを「24.00」から「12.00」に変更する
(9)レイヤー名をクリックし、フレームをすべて選択する
レイヤー1 「修正」- 「タイムラインーフレームの反転」
(10)再生をすると、何もない画面に円が描画されるムービーになります([Ctrl] + [Enter] 連続再生)