2022年– date –
-
デイトラ
デイトラWeb制作コース中級編DAY25 スマホ時のドロワーメニューを作る②
【ドロワーのコーディングcover編 jQuery】 ※厳密には今回作るメニューはドロワーではないですが、便宜上ドロワーと呼びます 前回と全く同じコードなので、ひとつ前の記事をご覧ください。 https://nagimio.com/drawer/ 【ドロワーのコーディングcover編 H... -
デイトラ
デイトラWeb制作コース中級編DAY25 スマホ時のドロワーメニューを作る①
色んな作り方がありますが、私はデイトラの回答例の方法で作りました。各種ライブラリを使用する方法については以下のページをご覧ください。 https://haniwaman.com/drawer-js/ https://haniwaman.com/hiraku-js/ 自作する場合はこちら。 https://mdstage... -
デイトラ
デイトラWeb制作コース中級編DAY24 スクロールに応じて要素を「フワッ」と登場させる
基本ははにわまんさんの記事をどうぞ。 https://haniwaman.com/wow/ WordPress上で使用するにあたっては以下のページを参考にしました。 https://a-m-t.co.jp/wow-js/ サンプル bounce pulse shake swing wobble bounceIn bounceInLeft bounceInUp bounceO... -
デイトラ
デイトラWeb制作コース中級編DAY23 スライダー(カルーセル)を作る②
下準備として、カンプからアローアイコンの画像をpngでダウンロードし、リネームしてimgフォルダに入れておきます。 【スライダーのコーディングmultiple編 jQuery】 私はCDNを利用しました。 CDNのCSSをhead内に、JSをbodyの終了タグの直前にコピペします... -
デイトラ
デイトラWeb制作コース中級編DAY23 スライダー(カルーセル)を作る①
下準備として、カンプからアローアイコンの画像をpngでダウンロードし、リネームしてimgフォルダに入れておきます。 【スライダーのコーディングslider編 jQuery】 私はCDNを利用しました。 CDNのCSSをhead内に、JSをbodyの終了タグの直前にコピペします。... -
デイトラ
デイトラWeb制作コース中級編DAY22 コーディング後の品質を担保するテスト②
【チェック項目一覧】 2つ目はデイトラの課題です。 チェック項目ははにわまんさんのこの記事とほぼ一緒です。 https://haniwaman.com/coding-test/ 1、誤字脱字がないか difffで各テキストをチェックします。特に文章という文章がないですが一応確認。ク... -
デイトラ
デイトラWeb制作コース中級編DAY22 コーディング後の品質を担保するテスト①
【チェック項目一覧】 今回デイトラの課題とは別に、STARTOUTの課題もコーディングしました。おかげでブログがお留守になっていましたが更新再開します。1回目はSTARTOUTの課題のレビューです。 チェック項目ははにわまんさんのこの記事とほぼ一緒です。 h... -
デイトラ
Swiperがスマホでスワイプできない原因はモーダルウィンドウが重なっているのが原因だった
Swiperなのにスマホでスワイプできないという問題に1日苦しみました。原因は単純で、fixedにしたスマホ用のグローバルナビゲーション(メニュー)がスライダーの上にかぶっているからでした。見えてないけど被っていることに、chromeのデベロッパーツールを... -
デイトラ
デイトラWeb制作コース中級編DAY21 Webフォント、デバイスフォントを理解する
デイトラの動画と回答例では@importを使ってCSSで読み込むようにしていましたが、私はHTMLのheadで読み込むようにしました。 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect"... -
デイトラ
デイトラWeb制作コース中級編DAY20 マウスホバー時の動きを付ける
アニメーションがあるとリッチ度が増しますね!今回はHTMLとCSSだけで実装します。 【マウスホバー時の動きを付ける HTML&CSS】 実際はSassで書きますが、CodePenで表示させるためCSSで書いています。 .hover01 See the Pen 透明に近づける by 那木 未...