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

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

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

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

DAY26:Progate:Sass Ⅰ

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

DAY25:モーダルを作る

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

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

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

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

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

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

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

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

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

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

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