ウェブデザイン技能検定を受験した話②
先日、こちらの記事を書きましたが
引き続き、この試験の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>
④全体構成はこんな感じ
⑤完成図
2秒後…↓
2秒後…↓
以下、ループ。