デイトラ– category –

色んな作り方がありますが、私はデイトラの回答例の方法で作りました。各種ライブラリを使用する方法については以下のページをご覧ください。 https://haniwaman.com/drawer-js/ https://haniwaman.com/hiraku-js/ 自作する場合はこちら。 https://mdstage...

基本ははにわまんさんの記事をどうぞ。 https://haniwaman.com/wow/ WordPress上で使用するにあたっては以下のページを参考にしました。 https://a-m-t.co.jp/wow-js/ サンプル bounce pulse shake swing wobble bounceIn bounceInLeft bounceInUp bounceO...

下準備として、カンプからアローアイコンの画像をpngでダウンロードし、リネームしてimgフォルダに入れておきます。 スライダーのコーディングmultiple編 jQuery 私はCDNを利用しました。 CDNのCSSをhead内に、JSをbodyの終了タグの直前にコピペします。CS...

下準備として、カンプからアローアイコンの画像をpngでダウンロードし、リネームしてimgフォルダに入れておきます。 スライダーのコーディングslider編 jQuery 私はCDNを利用しました。 CDNのCSSをhead内に、JSをbodyの終了タグの直前にコピペします。CSS...

チェック項目一覧 2つ目はデイトラの課題です。 チェック項目ははにわまんさんのこの記事とほぼ一緒です。 https://haniwaman.com/coding-test/ 1、誤字脱字がないか difffで各テキストをチェックします。特に文章という文章がないですが一応確認。クリア...

チェック項目一覧 今回デイトラの課題とは別に、STARTOUTの課題もコーディングしました。おかげでブログがお留守になっていましたが更新再開します。1回目はSTARTOUTの課題のレビューです。 チェック項目ははにわまんさんのこの記事とほぼ一緒です。 https...

Swiperなのにスマホでスワイプできないという問題に1日苦しみました。原因は単純で、fixedにしたスマホ用のグローバルナビゲーション(メニュー)がスライダーの上にかぶっているからでした。見えてないけど被っていることに、chromeのデベロッパーツールを...

デイトラの動画と回答例では@importを使ってCSSで読み込むようにしていましたが、私はHTMLのheadで読み込むようにしました。 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect"...

アニメーションがあるとリッチ度が増しますね！今回はHTMLとCSSだけで実装します。 マウスホバー時の動きを付ける HTML&CSS 実際はSassで書きますが、CodePenで表示させるためCSSで書いています。 .hover01 See the Pen 透明に近づける by 那木 未央 (...

スマホ下部固定メニュー SPで下に固定メニューがあるパターンです。いつでもアクションできて便利ですね！ フッターのコーディングFixed編 HTML フッターの更に下にメニューを作っていきます。ナビゲーションなのでnav要素を使います。その中にインナーを...