お知らせ

DAY28 ~ 30:実践コーディング

最終課題という感じで、もう一回LPのコーディングをしてみましょう!難易度は最初よりも高いと思います。ボリュームもあるので3日間の期間を設けました。 実際のお仕事でも(急ぎでなければ)3日から5日ほど期…

はにわまん

DAY27:VSCodeに「Easy Sass」導入してSassで書いてみる

Webサイト(ブラウザ)はSassを読み取りことはできません。あくまでもHTMLやCSSだけです。 なので、Sassで記載した内容をCSSに変換してあげる処理が必要になります。変換する方法(ツール)は…

はにわまん

DAY26:Progate:Sass Ⅰ

CSSは管理がとても大変… その大変なCSSの管理を楽にすべく登場したのがSassという言語です。 使えるようになっておくと、コーディングが早く、ミスが少なく、管理が楽になります。 今回の…

はにわまん

DAY25:モーダルを作る

よくコーディングで登場するモーダルをデザインカンプを見ながら作って行きましょう! 課題:モーダルを作る Contactセクションの「プライバシーポリシー」のリンクをクリックした時にモーダルで内容が表示…

はにわまん

DAY24:Q and Aをアコーディオンでコーディング

アコーディオンを使った実践的なコーディングをしてみます。アコーディオンがよく使われる代表的なアイテムが「Q and A」です。 課題:Q and Aをアコーディオンでコーディング アコーディオンについ…

はにわまん

DAY23:ページ内リンクでクリックした要素に対して下線を引く(クリックイベントの処理)

個人的にjQueryでよく使うのが要素をクリックした時の処理です。 今回は、ページ内リンクでクリックした要素に対して下線を引くという処理を加えてください。 課題:ページ内リンクでクリックした要素に対し…

はにわまん

DAY22:スムーススクロールとフローティングアイテムを作る

内部リンクをクリックした時に「ぐいーん」と移動した方がページ内を移動していることが理解できて少し親切だと思います。この動きのことをスムーススクロールと呼んだりします(呼び方はスムーズスクロールの説もあ…

はにわまん

DAY21:スマホ時のドロワーメニューを作る

スマホ時のグローバルメニューをドロワーメニューで作っていきましょう。 スマホ時のドロワーメニューを作る 以下のようなドロワーメニューを作成してください。「drawer-open」の方が通常時、「dra…

はにわまん

DAY20:スクロールに応じて要素を「フワッ」と登場させる

スクロールに応じて要素が「フワッ」と登場させるアニメーションもWebサイトで好まれがちな動きです。今回はこの動きを実装してもらいます。 課題:スクロールに応じて要素を「フワッ」と登場させる DAY11…

はにわまん

DAY19:スライダー(カルーセル)を作る

スライダーを作っていきましょう。スライダーはカルーセルとも呼ばれたりします。 作ると言っても、ライブラリの使い方を覚えることと、そのライブラリをカスタマイズできればとりあえずはOKだと思います。 課題…

はにわまん
1 2 4