CSSのgridを使った多段レイアウトは慣れたら超簡単【grid-template-columns, gap】

画像素材と完成版のコードはこちら↓
drive.google.com/drive/folder...
関連動画はこちら↓
gridの基本: • 意外と使う機会がないグリッドレイアウトを改め...
gapとは?: • グリッド使えなくてOK!CSSのgapが便利...
今日の動画ではCSSの強力な機能であるGridレイアウトを使って、多段レイアウトを簡単に作成する方法をお届けします。
Gridは一度マスターすれば、どんな複雑なレイアウトも驚くほどシンプルに実現できる魔法のようなツールです。
この動画では基本的なGridの設定方法から、grid-template-columnsやgapプロパティを活用した実践的なレイアウトテクニックまでを徹底解説します。
この動画はReact初心者のWebデザイナーが勉強したことや初めて知ったことを復習と共有を目的に投稿します。
学習教材のような動画ではありませんが、Reactでのコーディング、Reduxでの状態管理など、多くのことを学びますので一緒にハンズオンで作業して頂く形で視聴していただくことができると思います。
また僕自身がreactの予備知識は必要ありませんので、
同じような初心者の方はもちろん、
「Web制作でコーディングは出来るけどReactもやってみたい」という方に見て頂けると嬉しいです。
ブログ:lorem-co-ltd.com/
Twitter: / rubyprogram
#css, #grid, #gap
#web制作 #webデザイン #webデザイナー #javascript #コーディング

Пікірлер

    Келесі