2022年6月– date –

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要素を使います。その中にインナーを...

フッターにウィジェットが並んだパターン こちらが完成後の画面です。東京フリーランスのTwitterがなくなっていたので代わりにデイトラのアカウントを使用しました。Facebookの方も仕様が変わり新着情報が表示されなくなったため寂しい画面になってしまい...

背景画像ありのフッター 今回はコピーライトの部分に背景画像があるパターンです。ちょっとしたアクセントになりますね。 フッターのコーディングbgimg編 HTML base.htmlと同じです。 フッターのコーディングbgimg編 CSS base.scssとほとんど同じであるた...

フッターのカンプ ヘッダーやメインビジュアルといったファーストビューはもちろん大切ですが、フッターも情報がギュッと詰まった重要なパーツですね！しっかり作り込んでいきましょう。条件は以下の通りです。 全体的にリンクの設定は不要スマホ時は縦並...

ファイルが添付できるフォーム ファイルが添付できるタイプのフォームです。今回は少しですがjQueryも出てくるので難易度が上がってます。ファイルを選択ボタンのみ別に記事を書きましたのでそちらも併せてご覧ください。 https://nagimio.com/input-type-...

ここでハマってしまいました。余裕がある人向けの課題で、無理にこなす必要はありませんが全部実践すると決めているのでやります。ベースはデイトラの回答例コードを使用しています。 手始めに「input type file label」「input type file デザイン」「inp...