こんにちは、フレッシュマンSRです。
現在、東京フリーランスさんが提供している学習プログラム「30DAYSトライアル 2nd」に挑戦中で、DAY26まで完遂しました。
DAY16までのレポートはこちら
この記事では、僕が実際に30DAYSトライアル 2nd（以下デイトラ）に挑戦してみた簡単な感想、そして難易度について書いていきます。
デイトラWebアプリ版
2020年1月25日から、デイトラはWebアプリとして公開されました。
しかし、2020年1月29日現在、デイトラWebアプリ版は学習コンテンツが非公開となっています。
これは今まで外部コンテンツを紹介していた部分を、オリジナルの学習コンテンツへと差し替えるための準備期間のようです。
公開再開は3月ごろになるようなので、それまでは東京フリーランスのサイトを見て学習するようにしましょう。
※今回の記事の部分は外部コンテンツが含まれていないため、サイトでも学習内容に変わりはありません。
※2020/4/4 追記
この記事で僕が取り組んだ「メディア版デイトラ」は非公開となりました。
現在は有料のオンラインスクール形式で、デイトラはリニューアル公開されています。
有料とはいえ、それだけの価値がある情報だったのでやむ無しかな、と思っています。
90日分のコースが59,800円(税別)とありますが、買い切り形式かつ購入から1年間のサポートがあるため、自分のペースで進めることが出来るようになっているようです。
DAY17 マウスホバー時の動きをつける
難易度：★☆☆
まずははにわまんさんの記事にある10のホバーパターンを、DAY12で作ったボタンに適用します。
これはコピペなので簡単ですが、transitionやtransformについては別途記事に目を通しておくほうが良いかと思います。 僕もあまり分かっていないので。
DAY16までで作ったページのリンクにもホバー時の動きをつけていきますが、ボタン系は全部透過でいいかなと。
DAY18 Webフォント、デバイスフォントを理解する
難易度：★☆☆
Googleフォントを適用するだけなので、それだけならすぐ終わります。
ただし、大事なのは理解することです。
事実、僕は今まで何ヶ月もHTMLを書いていたにもかかわらず、「sans-serif」と「serif」の違いが分からなかったので。
「勉強になる記事」のところにサルワカさんのブログ記事のリンクがあるので、そこをチェックすることで理解が深まりました。
DAY19 コーディング後の品質を担保するテスト
難易度：★★★
面倒でも避けては通れないもの、それがテストです。
今回は、課題にある6つのものに取り組みました。
W3Cチェック
自分では気づかない間違いをしっかり指摘してくれます。
そしてここで引っかかったのがiframe要素の部分で、GoogleMapのHTMLタグに含まれる”frameborder”属性がHTML5では廃止されています。
僕は代わりにCSSを使い、ボーダーを消しました。
見出し構造が不自然ではないか
実は今まで、見出し構造を意識してHTMLを書いたことがありませんでした。
デイトラページ内でも紹介されていますが、サルワカさんの記事で見出しの使い方が分かりやすく解説されているので、しっかり目を通しておくことをおススメします。
【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？
altが正しく設定されているか
画像ALTチェッカーを使ってみましたが、個人的には使いにくかったです。
重要な画像だけでも、目視で確認するのがいいのかもしれません……
閉じタグの確認
実は、HTMLチェッカーやブックマークレットを使う必要はありません。
閉じタグがない場合、W3Cチェックでエラーが発生します。
W3Cチェックでエラーが無ければ、タグについても問題ないと思います。
水平スクロールしないか
僕はここで一番時間がかかりました。
極端な話、スマホ時のCSSは全部「width: 100%」にして、幅を制限したい要素には「max-width」で上限幅を決めるようにする。
僕は解決法がそれしか思いつきませんでした。
改めて、レスポンシブの書き方を学びなおさなければいけないと気づかされました。
IEチェック
WindowsなのでSafariは省略しました。
一応EdgeのエミュレーションでSafari表示のエミュレーションができるようなので、時間があるならばやってもいいのかなと思いましたが……
とりあえず、僕は今年中にiPadを買う決心をしました。
Chromeでいくら完璧でも、IEだとずれたり、消したはずのものが表示されてしまうなど、地味に面倒な部分です。
ちなみにレスポンシブ表示はChromeでもできますが、記事でも書かれている、Firefoxのレスポンシブデザインモードのほうがずれもなく、きれいに表示されているのでおススメです。
DAY20 スライダーを作る
難易度：★★☆
個人的に、以前模写コーディングでつまづいて以来苦手意識のあったスライダー。
しかし、サイト上でおススメされているSwiperを使えば、デザインカンプの再現くらいなら簡単にできました。
はにわまんさんの記事の”3″と”6″を見れば、すぐ実装できると思います。
【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介
ただし一つ注意点があり、バージョン5.3.0では”dist”フォルダではなく、”package“フォルダをHTMLファイルがあるフォルダにコピーする必要があります。
その後は、HTMLファイルにこのタグを書き込めば、Swiperを読み込めます。
<!-- 「package」フォルダをHTMLと同じフォルダに置く -->
<link href="package/css/swiper.min.css" rel="stylesheet">
<script src="package/js/swiper.min.js"></script>DAY21 スクロールに応じて要素を「フワッ」と登場させる
難易度：★☆☆
WOWライブラリを使って、アニメーションを定義するだけなので簡単です。
サイトに書いてあったように、フワッとしたアニメーションをつけたい場合は「fadeInUp」のアニメーションをつければOK。
もし実務で使うつもりなら、必ずMIT版を使うようにしましょう。
ライセンスが分かりにくいので、デイトラページのリンクからダウンロードページに飛ぶようにしたほうがいいでしょう。
DAY22 ドロワーメニューを作る
難易度：★★★
難易度はかなり高いです。
僕は以前ハンバーガーメニューを作成したことがあり、ドロワーも作れるだろうと思ってはいたのですが、これが予想以上に難しかったです。
僕は最終的に、こちらのサイトを見てドロワーを完成させることができました。
【jQuery】ドロワーメニュー 横からスライド表示するメニュー
上記のサイトの「メニューだけスライド」のレイアウトがデザインカンプのドロワーとよく似ているので、これをもとにカスタマイズすればOKです。
ポイントは、「メニューアイコン」や「メニュー部分」をヘッダー内部に書かないこと。
これをやるとヘッダーの表示が崩れまくります……
DAY23 スムーススクロールとフローティングアイテムを作る
難易度：★☆☆
僕は以前やったことがあるので、すぐ終わりました。
こちらのサイトが非常に参考になります。
jQueryでスティッキーヘッダーの『ページ内リンクずれ問題』を解決！！
先ほどのサイトには、フローティングアイテムの作り方も紹介されています。
TOPへふわっと戻るボタンを作ろう（jQuery・スムーススクロール）
DAY24 ページ内リンクでクリックした要素に下線を引く（クリックイベントの処理）
難易度：★★☆
簡単だと思っていましたが、僕は予想外の苦戦を強いられました。
jQueryで僕はli要素にclassを足していたのですが、a要素を指定しないとうまくいきませんでした。
僕が書いたコードは以下の通りです。
<ul class="passive">
<li><a href="#card_area" class="anchorlink active">Card</a></li>
<li><a href="#news_area" class="anchorlink">News</a></li>
<li><a href="#price" class="anchorlink">Price</a></li>
<li><a href="#access" class="anchorlink">Access</a></li>
<li><a href="#contact" class="anchorlink">Contact</a></li>
</ul>.active {
border-bottom: 4px solid $color-red;
}// クリックした要素にアクティブclassをつける
$('.passive a').on('click', null, function() {
// アクティブclassを持つa要素への処理
$('.passive a').removeClass('active'); //アクティブclassを取り除く
// クリックしたa要素への処理
$(this).addClass('active'); //アクティブclassをつける
});コード自体は単純なので、詰まった人は参考にしてみてください。
DAY25 アコーディオンでコーディング
難易度：★★☆
アコーディオンの動き自体を作るのは比較的簡単です。
このサイトのサンプルが参考になります。
【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選！
また、プラスとマイナスのアイコンは”Font Awesome”を使う手もありますが、CSSで簡単に自作できます。
はにわまんさんのサイトである「コピペで簡単！Webパーツ屋」の「アイコン」のページにはプラスやマイナスなど、様々なアイコンを疑似要素で表現するコードが揃っています。
DAY26 モーダルを作る
難易度：★★★
個人的にはjQueryよりもCSSでのレイアウトに苦戦しましたorz
作り方はこちらのサイトを参考にしました。
【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る
ポイントは、モーダルを開いた時の背景です。
ユーザーが使いやすいように、モーダルを開いた時には暗い背景を展開し、背景をクリックするとモーダルが閉じる……というようにするべきです。
ドロワーメニューの時と同じです。
ただし、jQueryの処理が干渉しやすいので、ドロワーメニューの時に用いた背景とは別にモーダル用の背景を作っておいたほうが良いと思います。
まとめ
誰かの参考にはあまりならないかもですが、DAY26までのレポートはここまでとなります。
次はいよいよ最終課題に挑戦します。
デイトラに参加されている皆さん、これからもお互い頑張りましょう！
コメント