MENU

Fun & Interesting

【HTML/CSSレイアウト】よく使われるサイドバーデザインを一緒にコーディングしていきましょう【ヤフー出身エンジニアの初心者向けプログラミング講座】

しまぶーのIT大学 70,448 5 years ago
Video Not Working? Fix It Now

🐙 GitHub(使用したコード) https://github.com/lightsound/html-css-class/tree/master/003_Sidebar 📙 もくじ 0:00 サイドバーレイアウトとは 1:03 コードを書く準備 2:19 ブラウザ標準のスタイルをリセット 3:39 flexboxを用いてサイドバーを作る 4:28 min-heightを使って高さをMAXにする 6:20 サイドバーに横幅を設定する 7:59 サイドバーにフッターを作る 11:06 メインを全体幅から固定幅に変更する 11:50 次回つくるものの予告 12:45 サイドバーのデザインを解説 14:35 サイドバーを使っているサイトを見る 18:09 まとめ 🚀 今日のひとこと 今日はよく使われるレイアウトの 「サイドバー」をコーディングしていきます。 動画の後半でWebデザイン解説も行っています。 HTMLとCSSの基礎を終えた方にオススメです。 エンジニアYouTuber「しまぶー」による HTML/CSSの実践的なプログラミング講座! 🔥この動画だけは見よ! 【HTML/CSSレイアウト】 聖杯レイアウトのコーディング実践、デザイン解説 https://youtu.be/XrFD_0Pr6Nc 【HTML/CSSレイアウト番外編】 コーディングに便利なChrome拡張機能を作りました https://youtu.be/CXrW5rqP-WY 👨‍💻 自己紹介 ヤフー株式会社でプログラマーとして働いていました! 現在は起業家として新規サービスを開発中です! 下記に興味がある方はチャンネル登録をおねがいします! ・IT業界、Web系、プログラミング講座 ・リモートワーク、在宅勤務、副業 ・スタートアップ、ベンチャー、経営者、社長 🌏 SNS Twitter: https://twitter.com/shimabu_it Instagram: https://www.instagram.com/shimabu_it 🏷️ タグ #Sidebar #Webデザイン #サイドバー

Comment