【初心者向け】CSSの書き方の鉄板講座！美しいWebデザインを自分で設計しよう！～Flexboxの使い方も網羅～【たった1動画で全てが分かるCSSの教科書】
HTML-код
- Опубликовано: 3 авг 2024
- ▼ビジネススキルを上げるための最強の読書リストの受け取りはこちら →college.youseful.jp/booklist
待望のHTML講座に続き、【たった1動画でわかるCSSの教科書】ついに公開しました！
HTMLだけでは味気ないホームページも、CSSを用いればあっという間に思い通りのページデザインに仕上がります！字の大きさ変更・レイアウト・色の指定・ボタンの設置・アニメーションなどあらゆるデザインを自由に実現できると楽しくなること間違いなし！是非最後までご視聴ください！
🔥 ここをみた方はYousefulチャンネル登録必須です！🔥
/ @youseful_skill
＊＊＊＊＊＊＊
社会人におすすめのスキルアップ動画一覧
＊＊＊＊＊＊＊
【超入門コース】Excel｜ビジネス基礎力養成講座（初心者向け）
• Excel( "ExcelPro" の基礎編)
【超入門コース】Excel VBA｜ビジネス戦闘力養成講座（初心者向け）
• Excel VBA
【超入門コース】Outlook｜ビジネス基礎力養成講座（初心者向け）
• Outlook
【超入門コース】Teams｜ビジネス基礎力養成講座（初心者向け）
• Teams
【超入門コース】Zoom｜リモートワーク力養成講座（初心者向け）
• Playlist
【超入門コース】Slack｜リモートワーク力養成講座（初心者向け）
• Playlist
＊＊＊＊＊＊＊
🔥 この動画の関連動画：
①【ウェブサイトを創る】HTMLとは？初心者でもWebページが作成できる入門講座！
• 【ウェブサイトを創る】HTMLとは？初心者で...
②【データサイエンスはじめの一歩】Python入門講座！基本構文そして頻出エラーまで、初手で知りたいことを網羅した初学者向け講座
• 【データサイエンスはじめの一歩】Python...
▼本日の動画サマリー
00:00 本日のテーマ
01:55 CSSとは？HTMLとの違い
02:43 CSSを書いてみよう 内部参照
03:54 CSSを書いてみよう インライン参照
08:18 CSSを書いてみよう 外部参照
11:03 CSSの宣言方法
16:08 セレクター
18:33 結合子
21:05 リセットCSS
29:49 CSSで使われる単位（34:33でも再出）
38:29 色の指定
50:05 メディアクエリー
52:46 Flexboxとは（レイアウト）
57:46 Flexbox（フレキシブルボックスレイアウト）ができること
1:01:17 主なディスプレイプロパティ
1:15:04 向きの指定 flex-direction
1:07:33 位置揃え（水平）-justify-content-
1:10:41 位置揃え（垂直）-align-items-
1:13:23 折り返しの指定 flex-wrap
1:15:35 個別の縦位置の指定 align-self
1:18:45 位置の変更 order
1:22:55 ベースの幅 flex-basis
1:25:40 幅が縮む割合の指定 flex-shrink-
1:27:06 ショートハンドプロパティ flex
1:28:52 サンプルを作ってみよう
1:45:42 エンディング
＊＊＊＊＊＊＊
🔥 MC プロフィール 🔥
たにぐちまこと：谷口 允
ともすた合同会社代表、株式会社エイチツーオー・スペース代表取締役
小学生からプログラミングに親しみ、Web制作会社 H2O spaceを起業。主に Web業界のクリエイター向けに、各種の講演や執筆を通じ、学習コンテンツを展開。『マンガでマスター プログラミング教室（ポプラ社刊・監修）』や、『よくわかるPHPの教科書（マイナビ出版刊）』など執筆多数。近年は、講座動画配信プラットフォーム Udemyを通じた映像講義配信なども手がける。
■ Webサイト
tomosta.jp/
■ RUclips
/ tomostajp
■ Udemy
①HTML/CSS/JavaScript フロントエンドエンジニアになりたい人の Webプログラミング入門
px.a8.net/svt/ejp?a8mat=3HC8B...
②WordPress開発マスター講座
px.a8.net/svt/ejp?a8mat=3HC8B...
③PHP+MySQL MariaDB Webサーバーサイドプログラミング入門
px.a8.net/svt/ejp?a8mat=3HC8B...
🔥 お仕事の依頼やお問い合わせはこちらから 🔥
form.run/@youseful-contact
▼概要欄のサービスリンクには、amazonアソシエイト等のASPアフィリエイトリンクが貼られています。
youseful.jp/
▼本動画で紹介されているような会社名、商品名、製品名などは一般に各社の登録商標または商標です。本動画の中では※やTMマークは明記しておりません。
#Youseful #プログラミング #CSS #HTML 
Хобби
🔥有料版Excel講座「ExcelPro」🔥
全国各地から受講できる短期集中Excelトレーニング
↓今すぐチェックする↓
osanaikohei.com/excelpro2?
一部体験をRUclips上に公開しています！
本編一部公開：ruclips.net/video/yi8RSVemTzc/видео.html
受講者の声 ：ruclips.net/video/l49A5RWtw6E/видео.html
▼本日の動画サマリー
00:00 本日のテーマ
01:55 CSSとは？HTMLとの違い
02:43 CSSを書いてみよう 内部参照
03:54 CSSを書いてみよう インライン参照
08:18 CSSを書いてみよう 外部参照
11:03 CSSの宣言方法
16:08 セレクター
18:33 結合子
21:05 リセットCSS
29:49 CSSで使われる単位（34:33でも再出）
38:29 色の指定
50:05 メディアクエリー
52:46 Flexboxとは（レイアウト）
57:46 Flexbox（フレキシブルボックスレイアウト）ができること
1:01:17 主なディスプレイプロパティ
1:15:04 向きの指定 flex-direction
1:07:33 位置揃え（水平）justify-content
1:10:41 位置揃え（垂直）align-items
1:13:23 折り返しの指定 flex-wrap
1:15:35 個別の縦位置の指定 align-self
1:18:45 位置の変更 order
1:22:55 ベースの幅 flex-basis
1:25:40 幅が縮む割合の指定 flex-shrink
1:27:06 ショートハンドプロパティ flex
1:28:52 サンプルを作ってみよう
1:45:42 エンディング
▼ビジネススキルを上げるための最強の読書リストの受け取りはこちら
form.run/@youseful-skill-booklist
神動画
理解しやすい説明で有難いです。
ありがとうございました
ここを変えると表示がこう変わるという動画で、大変よく分かりました。
とても分かりやすく、出来なかった事が出来ました。ありがとうございました😊
説明がうますぎて分かりやすかったです😆
とても勉強になりました。
復習のため拝見しました。とても分かりやすく、勉強になりました‼有難う御座います。
スクールでも別の方の動画でも、先生が、Childをチルドと発音してて、日本のIT業界ヤバいとドン引きしてましたが、こちらではチャイルドと発音していたので、これからはこちらの動画で勉強します❣
最高！
素晴らしい動画ありがとうございます。質問です。Flexboxのレイアウトの所で画像を3つ表示出来ず1つしか表示されないんですが解決方法が分かりません。
教えて頂けますと幸いです。よろしくお願いします！
とっても勉強になりました。次は是非Java scriptもお願いしたいです。
撮影します！
マインクラフトのやり方おしえてください
バックグラウンドイメージのURLを入力しても写真できないです、
最初の動作でもうつまづきました。style="color: red" をｈ１の中に打っても赤くなりません。画面内で、red の前に赤□が出てきますが、これがないとダメなのですか。できればもう少し丁寧にお願いできないですかね。