-
デイトラ
デイトラ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 那木 未... -
デイトラ
デイトラ中級編DAY19 フッターのコーディング④
スマホ下部固定メニュー SPで下に固定メニューがあるパターンです。いつでもアクションできて便利ですね! 【フッターのコーディングFixed編 HTML】 フッターの更に下にメニューを作っていきます。ナビゲーションなのでnav要素を使います。その中にインナ... -
デイトラ
デイトラ中級編DAY19 フッターのコーディング③
フッターにウィジェットが並んだパターン こちらが完成後の画面です。東京フリーランスのTwitterがなくなっていたので代わりにデイトラのアカウントを使用しました。Facebookの方も仕様が変わり新着情報が表示されなくなったため寂しい画面になってしまい... -
デイトラ
デイトラWeb制作コース中級編DAY19 フッターのコーディング②
背景画像ありのフッター 今回はコピーライトの部分に背景画像があるパターンです。ちょっとしたアクセントになりますね。 【フッターのコーディングbgimg編 HTML】 base.htmlと同じです。 【フッターのコーディングbgimg編 CSS】 base.scssとほとんど同じ...