2020.01.30こんにちは、フレッシュマンSRです。2nd」に挑戦中で、DAY26まで完遂しました。2nd」に挑戦中で、DAY16まで完遂しました。2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。モーダルを作るまとめデイトラWebアプリ版2020年1月25日から、デイトラはWebアプリとして公開されました。2020年1月29日現在、デイトラWebアプリ版は学習コンテンツが非公開となっています。これは今まで外部コンテンツを紹介していた部分を、オリジナルの学習コンテンツへと差し替えるための準備期間のようです。公開再開は3月ごろになるようなので、それまでは東京フリーランスのサイトを見て学習するようにしましょう。※今回の記事の部分は外部コンテンツが含まれていないため、サイトでも学習内容に変わりはありません。マウスホバー時の動きをつける難易度:★☆☆まずははにわまんさんの記事にある10のホバーパターンを、DAY12で作ったボタンに適用します。これはコピペなので簡単ですが、transitionやtransformについては別途記事に目を通しておくほうが良いかと思います。僕もあまり分かっていないので。DAY16までで作ったページのリンクにもホバー時の動きをつけていきますが、ボタン系は全部透過でいいかなと。Webフォント、デバイスフォントを理解する難易度:★☆☆Googleフォントを適用するだけなので、それだけならすぐ終わります。大事なのは理解することです。事実、僕は今まで何ヶ月もHTMLを書いていたにもかかわらず、「sans-serif」と「serif」の違いが分からなかったので。「勉強になる記事」のところにサルワカさんのブログ記事のリンクがあるので、そこをチェックすることで理解が深まりました。面倒でも避けては通れないもの、それがテストです。今回は、課題にある6つのものに取り組みました。2020自分では気づかない間違いをしっかり指摘してくれます。ここで引っかかったのがiframe要素の部分で、GoogleMapのHTMLタグに含まれる”frameborder”属性がHTML5では廃止されています。僕は代わりにCSSを使い、ボーダーを消しました。<iframe>-HTML5タグリファレンス見出し構造が不自然ではないか実は今まで、見出し構造を意識してHTMLを書いたことがありませんでした。2020デイトラページ内でも紹介されていますが、サルワカさんの記事で見出しの使い方が分かりやすく解説されているので、しっかり目を通しておくことをおススメします。【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?altが正しく設定されているか画像ALTチェッカーを使ってみましたが、個人的には使いにくかったです。実は、HTMLチェッカーやブックマークレットを使う必要はありません。2020閉じタグがない場合、W3Cチェックでエラーが発生します。W3Cチェックでエラーが無ければ、タグについても問題ないと思います。水平スクロールしないか僕はここで一番時間がかかりました。100%」にして、幅を制限したい要素には「max-width」で上限幅を決めるようにする。僕は解決法がそれしか思いつきませんでした。レスポンシブの書き方を学びなおさなければいけないと気づかされました。IEチェックWindowsなのでSafariは省略しました。一応EdgeのエミュレーションでSafari表示のエミュレーションができるようなので、時間があるならばやってもいいのかなと思いましたが......とりあえず、僕は今年中にiPadを買う決心をしました。Chromeでいくら完璧でも、IEだとずれたり、消したはずのものが表示されてしまうなど、地味に面倒な部分です。IEのセレクトボックスを消す方法ちなみにレスポンシブ表示はChromeでもできますが、記事でも書かれている、Firefoxのレスポンシブデザインモードのほうがずれもなく、きれいに表示されているのでおススメです。個人的に、以前模写コーディングでつまづいて以来苦手意識のあったスライダー。サイト上でおススメされているSwiperを使えば、デザインカンプの再現くらいなら簡単にできました。はにわまんさんの記事の”3′′と”6′′を見れば、すぐ実装できると思います。【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介ただし一つ注意点があり、バージョン5.3.0では”dist”フォルダではなく、”package“フォルダをHTMLファイルがあるフォルダにコピーする必要があります。その後は、HTMLファイルにこのタグを書き込めば、Swiperを読み込めます。スクロールに応じて要素を「フワッ」と登場させる難易度:★☆☆WOWライブラリを使って、アニメーションを定義するだけなので簡単です。サイトに書いてあったように、フワッとしたアニメーションをつけたい場合は「fadeInUp」のアニメーションをつければOK。実務で使うつもりなら、必ずMIT版を使うようにしましょう。ライセンスが分かりにくいので、デイトラページのリンクからダウンロードページに飛ぶようにしたほうがいいでしょう。2020難易度はかなり高いです。僕は以前ハンバーガーメニューを作成したことがあり、ドロワーも作れるだろうと思ってはいたのですが、これが予想以上に難しかったです。僕は最終的に、こちらのサイトを見てドロワーを完成させることができました。上記のサイトの「メニューだけスライド」のレイアウトがデザインカンプのドロワーとよく似ているので、これをもとにカスタマイズすればOKです。ポイントは、「メニューアイコン」や「メニュー部分」をヘッダー内部に書かないこと。僕は以前やったことがあるので、すぐ終わりました。こちらのサイトが非常に参考になります。jQueryでスティッキーヘッダーの『ページ内リンクずれ問題』を解決!!先ほどのサイトには、フローティングアイテムの作り方も紹介されています。簡単だと思っていましたが、僕は予想外の苦戦を強いられました。jQueryで僕はli要素にclassを足していたのですが、a要素を指定しないとうまくいきませんでした。僕が書いたコードは以下の通りです。//アクティブclassをつける});コード自体は単純なので、詰まった人は参考にしてみてください。アコーディオンでコーディング難易度:★★☆アコーディオンの動き自体を作るのは比較的簡単です。このサイトのサンプルが参考になります。Awesome”を使う手もありますが、CSSで簡単に自作できます。はにわまんさんのサイトである「コピペで簡単!Webパーツ屋」の「アイコン」のページにはプラスやマイナスなど、様々なアイコンを疑似要素で表現するコードが揃っています。2020個人的にはjQueryよりもCSSでのレイアウトに苦戦しましたorz作り方はこちらのサイトを参考にしました。【jQuery・CSS】意外と簡単!モーダルウィンドウをプラグインなしで作るポイントは、モーダルを開いた時の背景です。ユーザーが使いやすいように、モーダルを開いた時には暗い背景を展開し、背景をクリックするとモーダルが閉じる......というようにするべきです。ドロワーメニューの時と同じです。jQueryの処理が干渉しやすいので、ドロワーメニューの時に用いた背景とは別にモーダル用の背景を作っておいたほうが良いと思います。まとめ誰かの参考にはあまりならないかもですが、DAY26までのレポートはここまでとなります。次はいよいよ最終課題に挑戦します。コピーフレッシュマンSRをフォローするフレッシュマンSR既卒負け組から逆転を狙う男のブログ関連記事プログラミング[Udemy]Web開発入門完全攻略コースの紹介こんにちは、フレッシュマンSRです。今日はUdemyのWeb開発入門完全攻略コースの紹介をします。プログラミングをはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!」です。卒業研究でプログラミングに触れないとなると、もうプログラミングをする機会がないんですよね。そのため、インターネット上の動画教材でプログラミングの勉強をしていました。プログラミングプログラミング学習の成果をTwitterで公開ー今後の目標こんにちは、フレッシュマンSRです。1週間前から、Webプログラミングの学習成果をTwitterでアップするようにしました。するようにした経緯と、今後の目標について書いていきます。2nd」に挑戦していましたが、ついに完遂することができました。トータルで完成までに17時間弱かかりました。完成までに10時間以上はかかると思うので、休日に取り組むのが良いと思います。2nd」に挑戦中で、DAY16まで完遂しました。2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。プログラミング僕がPHPを学ぶことを決めた3つの理由こんにちは、フレッシュマンSRです。JavaScript等、主にWeb開発系の言語を学んできました。これからはPHPを学ぼうと決心しました。以下に、その理由を記していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。成功の母」2019年4月からニッチな内容中心の当ブログの運営を開始。成功の母」2019年4月からニッチな内容中心の当ブログの運営を開始。@freshman_srタイトルとURLをコピーしました。