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