見出し画像

ウェブデザイン技能検定を受験した話②

先日、こちらの記事を書きましたが


引き続き、この試験の2級を受験してきました。

結果、【実技は合格+筆記は不合格】
もうひと頑張り必要なはこびとなりました。


まぁ実技が結構個人的にヘビーだったので
これをパスできただけまだありがたいと思うことにします!

…ということで、2級実技の対策記録

(1)購入が必要なもの

 ①Photoshop(必須)
 ②Dreamweaver

②については、テキストエディタを利用してJqueryが
自力で作成できるのであれば不要。

Photoshopを実務で利用したことがないので慌ててAmazonへ。
(触るのは大学生以来、約10年ぶり。
 というか、GIMPの方が使った経験ある。)

最近の販売モデルはサブスクリプションが主流だったけれど
買うなら買い切りがいいなぁと思って
「Adobe Photoshop Elements 2019」を¥10,000台で購入。

②は、ケチって買わなかった!(後述)


(2)Jqueryで挑むアニメーション

実技試験の「問2」で出題されるアニメーション作成問題では
Dreamweaverを使わないことを決めたので、必然的にJqueryで作成することに。

が、JQueryを実務で利用したことがないので慌てて学習スタート。

「Javascriptに「$」つければいけるでしょ!」
と思っていたところ(失礼)

本番はテキストエディタで0から書かなければならないので
VisualStudioのサポート機能的なものが一切使えないことに焦る…。笑

しかも、Jqueryを利用した実技試験の解答が始まったのが
割と最近のようで、回答例がネット上に転がっていない。

なので、ほぼ創作状態。

(Adobe Flashが2020年末に終了することを受けたと思われる)

ゲキアツ~!(^0^)

ということで、作ってみた。

「バナー画像2枚を2秒ごとにスライド表示」

①anim.js

$(function(){

	var idx =0;
	
	setInterval(function(){
		
		if(idx == 0){
		
			$(".banner_ul").animate({marginLeft : -800 + "px"},"fast");
			
			idx=1;
		
		}else{
		
			$(".banner_ul").animate({marginLeft : 0 + "px"},"fast");
			
			idx=0;
		
		};
	
	},2000);

});


②anim.css

div.banner_div{
	padding: 0px;
	margin: 0px;
	width: 800px;
	height:56px;
	overflow:hidden;
}

ul.banner_ul{
	padding: 0px;
	margin: 0px;
	width: 1600px;
	height: 56px;
	list-style: none;	
}

li.banner_li{
	margin: 0px;
	padding: 0px;
	float: left;
}


③anim.html

<html language="ja">
	<meta charset="utf-8">
	<head>
		<script type="text/javascript" src="jquery-3.4.1.js"></script>
		<script type="text/javascript" src="anim.js"></script>
		<link rel="stylesheet" type="text/css" href="anim.css"></link>
	</head>
	<body>
		<div class="banner_div">
			<ul class="banner_ul">
				<li class="banner_li"><img src="a1.gif">
				<li class="banner_li"><img src="a2.gif">
			</ul>
		</div>
	</body>
</html>


④全体構成はこんな感じ

画像4


⑤完成図

画像2

2秒後…↓

画像2

2秒後…↓

画像2

以下、ループ。

いいなと思ったら応援しよう!