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

YaHoHoo's

2020年1月7日 13:51

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

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

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

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

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

（１）購入が必要なもの

　①Photoshop（必須）
　②Dreamweaver

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

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

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

②は、ケチって買わなかった！（後述）

（２）Jqueryで挑むアニメーション

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

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

「Javascriptに「$」つければいけるでしょ！」
と思っていたところ（失礼）

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

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

なので、ほぼ創作状態。

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

ゲキアツ～！（^0^）

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

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

①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>

④全体構成はこんな感じ

⑤完成図

２秒後…↓

以下、ループ。

この記事が気に入ったらサポートをしてみませんか？