Тёмный

【初心者向け】CSSの書き方の鉄板講座!美しいWebデザインを自分で設計しよう!~Flexboxの使い方も網羅~【たった1動画で全てが分かるCSSの教科書】 

ユースフル / スキルの図書館
Подписаться 437 тыс.
Просмотров 79 тыс.
50% 1

▼ビジネススキルを上げるための最強の読書リストの受け取りはこちら →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/
■ RU-vid
/ 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

Хобби

Опубликовано:

 

20 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 16   
@youseful_skill
@youseful_skill 2 года назад
🔥有料版Excel講座「ExcelPro」🔥 全国各地から受講できる短期集中Excelトレーニング ↓今すぐチェックする↓ osanaikohei.com/excelpro2? 一部体験をRU-vid上に公開しています!  本編一部公開:ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yi8RSVemTzc.html  受講者の声 :ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-l49A5RWtw6E.html
@youseful_skill
@youseful_skill 2 года назад
▼本日の動画サマリー 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
@michik4199
@michik4199 2 года назад
理解しやすい説明で有難いです。 ありがとうございました
@monntarousekine7774
@monntarousekine7774 2 года назад
とても分かりやすく、出来なかった事が出来ました。ありがとうございました😊
@user-er7yq7vw6d
@user-er7yq7vw6d 2 года назад
説明がうますぎて分かりやすかったです😆
@sktakezo
@sktakezo 2 года назад
とても勉強になりました。
@takoma1950
@takoma1950 2 года назад
ここを変えると表示がこう変わるという動画で、大変よく分かりました。
@tzawa-he5zg
@tzawa-he5zg 2 года назад
神動画
@user-wk1si8zm2h
@user-wk1si8zm2h 2 года назад
素晴らしい動画ありがとうございます。質問です。Flexboxのレイアウトの所で画像を3つ表示出来ず1つしか表示されないんですが解決方法が分かりません。 教えて頂けますと幸いです。よろしくお願いします!
@jamjamland57
@jamjamland57 2 года назад
とっても勉強になりました。次は是非Java scriptもお願いしたいです。
@tomosta
@tomosta 2 года назад
撮影します!
@user-cq8lc1ij6w
@user-cq8lc1ij6w Год назад
最高!
@polly3842
@polly3842 2 года назад
復習のため拝見しました。とても分かりやすく、勉強になりました‼有難う御座います。 スクールでも別の方の動画でも、先生が、Childをチルドと発音してて、日本のIT業界ヤバいとドン引きしてましたが、こちらではチャイルドと発音していたので、これからはこちらの動画で勉強します❣
@user-wc3nx7hg1j
@user-wc3nx7hg1j 2 года назад
マインクラフトのやり方おしえてください
@user-vq2yf9dk4o
@user-vq2yf9dk4o 2 года назад
バックグラウンドイメージのURLを入力しても写真できないです、
@TV-vh5ji
@TV-vh5ji Год назад
最初の動作でもうつまづきました。style="color: red" をh1の中に打っても赤くなりません。画面内で、red の前に赤□が出てきますが、これがないとダメなのですか。できればもう少し丁寧にお願いできないですかね。
Далее
His reaction 😳 (via @kaitlyn.b0506/TT) #shorts
00:10
CSSクラス命名規則、FLOCSSとBEM。
11:50
Просмотров 24 тыс.
Amazing
0:37
Просмотров 20 млн
One moment can change your life ✨🔄
0:32
Просмотров 30 млн