【超入門】Flexboxを30分で完全習得！初心者向け【HTML・CSS コーディング】
Тәжірибелік нұсқаулар және стиль
※※※内容訂正のご案内※※※
動画内「align-items」解説時（10:44）のスライド画像と、「align-content」解説時（12:05）のスライド画像が編集時のミスで逆のものになってしまっております。
下記より、スライド画像をまとめたpdfファイルをご覧いただけますので、こちらも併せて動画をご視聴いただけますと幸いです。大変失礼いたしました！
webgodweb.com/flexbox/flexbox...
レイアウト調整を簡単、簡潔にする超便利なFlexbox！
なんとなく使っている、イマイチ使い方がわからない…そんな皆さんに向けて、Flexboxを完全解説しました！
＜目次＞
・オープニング 0:00
・Flexboxとは？ 0:47
・Flexboxはどういう時に使う？ 1:50
・Flexboxの使い方 3:20
・Flexboxのプロパティ 4:41
・Flexboxのプロパティ（親要素に指定するもの）のまとめ 14:48
・Flexboxのプロパティ（子要素に指定するもの）15:57
・エンディング 28:16
・今回のまとめ 28:36
-- Webの神様 --
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！
【タグ】
#CSS #コーディング #プログラミング
【SNS】
-- Twitter --
/ webgodweb
-- Facebook --
/ webgodweb
【運営会社】
株式会社カラフルクローバー
www.colorful-clover.co.jp/
★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！
【お知らせ動画】
「Webの神様」があなたのメンターになります
• 【お知らせ】「Webの神様」があなたのメンタ...
【プランの詳細・お申し込み（MENTA）】
menta.work/plan/5148
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★
Пікірлер: 99
flex-direction:column指定した後にjustify-contentやalign-itemsの主軸も逆になるなんて知りませんでした。 これ知らなかったら今後の勉強でどツボにハマる所でした。 とても有益な動画でした！ありがとうございます！
※※※内容訂正のご案内※※※ 動画内「align-items」解説時（10:44）のスライド画像と、「align-content」解説時（12:05）のスライド画像が編集時のミスで逆のものになってしまっております。 下記より、スライド画像をまとめたpdfファイルをご覧いただけますので、こちらも併せて動画をご視聴いただけますと幸いです。大変失礼いたしました！ webgodweb.com/flexbox/flexbox.pdf レイアウト調整を簡単、簡潔にする超便利なFlexbox！ なんとなく使っている、イマイチ使い方がわからない…そんな皆さんに向けて、Flexboxを完全解説しました！ ＜目次＞ ・オープニング 0:00 ・Flexboxとは？ 0:47 ・Flexboxはどういう時に使う？ 1:50 ・Flexboxの使い方 3:20 ・Flexboxのプロパティ 4:41 ・Flexboxのプロパティ（親要素に指定するもの）のまとめ 14:48 ・Flexboxのプロパティ（子要素に指定するもの）15:57 ・エンディング 28:16 ・今回のまとめ 28:36
スライド画像をまとめたPDFがとてもわかりやすくてありがたいです！！
@webgodweb
3 жыл бұрын
ご返信が遅くなりすみません💦 ご視聴ありがとうございます！お役に立てて嬉しいです😊
分かりやすくて何度でも何度でも繰り返し視聴出来るのでありがたいです！
@webgodweb
3 жыл бұрын
コメントありがとうございます、何度も観ていただけて嬉しいです！🙇♀️ 着実に身についていっていると思います！！
とても理解しやすい動画でした！コーディング初心者でこちらの動画に出会えた方は幸運ですね。
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます✨ 今後も初心者のみなさんにわかりやすい動画になるよう頑張ります！
非常にわかりやすいKZreadで本当にありがとうございます
@webgodweb
3 жыл бұрын
こちらこそご視聴ありがとうございます🙇♀️
とってもわかりやすい！！
よい説明でした！ありがとうございます！！
@webgodweb
3 жыл бұрын
こちらこそ、ご視聴ありがとうございます☺️
いつもすごく参考になります。 主軸の話、勉強になりました。 grid編も待ってます！
@webgodweb
3 жыл бұрын
ご視聴、コメントありがとうございます！！ 今後の動画の参考にさせていただきます☺️
今週は土日も仕事確定なので、なつこさんの動画を見れないかもしれませんが更新楽しみにしています。毎週楽しみです！
@webgodweb
3 жыл бұрын
土日のお仕事お疲れ様です(T . T) 今週末は動画アップ出来そうにありません💦ごめんなさい😞
痒いところを確認できるので、ありがたいです！チャンネル登録しました！
@webgodweb
3 жыл бұрын
ご視聴、チャンネル登録誠にありがとうございます！ 今後ともよろしくお願いいたします✨
いつもわかりやすい動画ありがとうございます。 質問です。のをフレックスボックスで並べたい場合は親要素をにして書くべきでしょうか？ classやid要素で囲って書くべきでしょうか？
@webgodweb
3 жыл бұрын
ulタグ、liタグは、並列関係にあるものをマークアップする用途で使われるのが望ましいです。 なので、Flexbox部分をどんなHTML構造にすべきかは、並べたい要素の種類によると思います。 Flexbox基準ではなく、文書構造をもとにして、使用するHTMLタグ（ulタグ、もしくはdivタグにクラス名をつけるなど）を決めてみてください！
めちゃくちゃわかりやすいです！！ あとかわいい
@webgodweb
Жыл бұрын
ありがとうございます！！🙇♀️🙇♀️
今のところ自分に一番フィットする教材として活用させていただいています。 ドットインストールとセットで使うと理解度めちゃくちゃ上がります！！ WEBの神様にお願いです。 XDデータ・フォトショップ・イラストレーターのデザインからのコーディングを最初から解説した分かりやすい動画がなくて地味に苦戦しています。 模写コーディング実践編の様に詳細な解説動画あると助かります🙏
@webgodweb
3 жыл бұрын
リクエストありがとうございます✨デザインからのコーディングですね💡 リクエストにお応えするのに少し時間がかかるかもしれませんが、お待ちいただければ幸いです🍀
話し方と図解がめちゃくちゃ分かりやすいです。すごい。勉強になります！
@webgodweb
3 жыл бұрын
コメントありがとうございます😊嬉しいお言葉励みになります🍀
知ったつもりで知らなかったこと、javascript編も含めて、なつこさんの動画で勉強しなおしています。 おまじないのように覚えさせられたことも理解できてすっきりです。 それぞれのチートシートがダウンロード出来たら幸せになれる気がしたので、ご検討いただけると幸いです。 これからも頼りにさせていただきますので、頑張ってください！ ・・・スライド画像をまとめたpdfが用意されてましたね。ありがとうございます！
@webgodweb
Жыл бұрын
コメントありがとうございます！！ チートシート配布がわかりづらくすみません！今後別の動画でも資料ダウンロードなどしていただけるように検討してまいりますね🙇♀️🙇♀️
PDF活用させていただきます！
@webgodweb
2 жыл бұрын
ありがとうございます！🙇♀️ お役に立てば嬉しい限りです！！✨
ヘッダーコーディングの学習の記事で .header{ margin-top: 20px; position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: #333; display: flex; flex-direction: column; align-items: center; } このように書かれていて 要素が中央にきていました。 これは主軸の方向が逆になっていたということだったんですね。 justify-content は text-align-center ; align-items:center はvertical-align:center と覚えてしまっています。 すっと軸の向きが変わるとすんなり頭にいれるのが難しそうです。
可愛いすぎるので気をつけてください^_^ わかりやすかったです、ありがとうございます😊
@webgodweb
3 жыл бұрын
お役に立てて嬉しいです😂
投稿者さんが綺麗すぎて動画の内容が頭に入ってきません（）笑
@webgodweb
3 жыл бұрын
コメントありがとうございます！ 繰り返しご視聴いただけたら嬉しいです…！😂
どの動画も本当にわかりやすくて、すごいです。CSS,カナリわかるようになりました！ありがとうございます！！！
@webgodweb
3 жыл бұрын
嬉しいお言葉ありがとうございます🍀これからもよろしくお願いします😊
可愛すぎます！
@webgodweb
2 жыл бұрын
コメントありがとうございます🙇♀️🙇♀️
@kozukaeleven9040
2 жыл бұрын
@@webgodweb 7年ぶりにコーディングしてます！ 図解で分かりやすい説明と声が落ち着くのでなんか良いです♪
いつも見させていただいてます。 ちょっと質問なんですが、FLEXBOXはとても便利な機能だと思いますが 最初のうちはFLEXBOXなしでもできるようになってから、使用した方がいいのでしょうか？
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます！ はい、仰る通りです。比較的新しい機能なので、Flexboxを使っていないレイアウトのサイトの方がまだまだ多いのが現状かと思います。 そういったサイトを改修したりするときに、どうしてもFlexboxの構造には後から変えられない、あるいは変える必要が無いこともあり得るので、まずオーソドックスなやり方を身に付けていただくのは必須かと思います🙇♀️
flexはややこしかったのですが、とても勉強になりました。ありがとうございます。スライド画像は分かりやすいです。これはフォトショップやイラストレーターで作っているのですか？
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます！ お役に立ててよかったです！✨ はい、スライド画像はすべてAdobeのIllustratorで作成しています！
いつも学習の為に楽しく拝見しております🙇♂️1つ質問があります！ある講師の方にflexboxを制したらコーディングも6割近く制する事が出来るといわれました！そのコーディングにもよりますが模写などをする際に本当にある程度はflexboxでできるものでしょうか？もしそうならもっとflexboxを理解して苦手としているコーディングをよりスムーズに行けたらと思っております。よろしければアドバイス頂ければ幸いです🙇♂️
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます！ 確かに、Webサイトは要素を整列させるようなレイアウトが基本にはなってくるので、これを簡単に扱えるFlexboxを使いこなせれば、かなりコーディングが楽になるとは思いますよ！ よろしければ、こちらの動画で最低限の使い方から覚えていただければ幸いです！ kzread.info/dash/bejne/go6n2KiSlty9p5M.html
@user-oj7dc3yb7l
3 жыл бұрын
@@webgodweb さん コメント頂きありがとうございます🙇♂️おすすめ頂いた動画も拝見させて頂きます！☺️ちなみにwebの神様のなつこさんの動画でremや%の単位の動画などはございますか？？こちらの方もある課題で理解せねばいかずなつこさんの動画が分かりやすいのでインプットして課題でアウトプットを考えているのでが、、😓重ね重ねすいません。🙇♂️
いつもありがたく拝見させていただいております！😃 操作画面とトーク画面の2画面で説明してもらえないでしょうか？
@webgodweb
2 жыл бұрын
貴重なご意見ありがとうございます！ わかりづらい構成にて失礼いたしました🙇♀️ 改善した動画の作成も今後検討いたします！ すべて同じ内容ではないのですが、 よく使うものだけをピックアップしたこちらの動画では操作画面を見ながら解説していますので、一旦はこちらも参考にしていただけると幸いです！ 【超入門】初心者必見！10分でわかるFlexbox講座【HTML・CSS コーディング】 kzread.info/dash/bejne/go6n2KiSlty9p5M.html
わかりやすい説明とても助かります！ありがとうございます！！ 例えばブログでモバイル画面時にヘッダー上部の"画像のみ"を縮小して全体を見えるようにすることは可能でしょうか？？ ブログタイトルを画像自体に書いているため、画像ごと縮小する方法を模索中です…
@webgodweb
2 жыл бұрын
ご返信が遅くなりすみません！ 恐縮ですが、状況をもう少し具体的に教えていただけると助かります🙇♀️ img要素を画面幅に応じてサイズ変更したい、ということでしょうか…？
わかりやすい😭😭😭😭
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます😊これからもよろしくおねがいします🍀
この動画のアングルが一番可愛いです😄 カンプからのコーディングで挫折も多いですが、いつも参考にさせて頂いております。
@webgodweb
Жыл бұрын
コメントありがとうございます🙇♀️🙇♀️ いつもご視聴ありがとうございます！！
質問失礼します。 display:block、inline、flexの3つの違いってどうイメージすると良いですか？
レイアウトを考える上で非常なプロパティだと思います。ただ単純に画像だけを並べるのならいいけど、そこにテキストで説明を加えたり、ひとつひとつの大きさが違うとどこで折り返せるようにしたりとか、かなりスキルも必要だなと苦戦しています。
@webgodweb
10 ай бұрын
ご返信遅くなりすみません🙇♀️ 仰る通り、場合によってはかなり工夫が必要なレイアウトなどもあり、どこでどのようにFlexboxを使うか、を考えるのが特に難しいかもしれません。 使い続けていると、次第に慣れていろいろな活用が思い浮かぶようになってきます！倦厭しているうちは上達しにくいので、是非進んで取り入れていただければと思います🙆♀️
Flexboxでつまずいています。サイトのMENUボタンに使う物でしょうか。 主軸が右並びでも左並びでも数字で記入されていなければどっちが主軸か分からない気がするのは初心者だからなのでしょうか。
@webgodweb
3 жыл бұрын
Flexboxは、要素の横並びなどが簡単で、レスポンシブ対応なども楽になる便利機能です！メニューだけでなく、要素を並べるときにはよく活用します。 主軸の方向は必ずデフォルトがあるので、今どんなプロパティが指定されているかを調べたりすれば、予想がつくようにもなります🙏
inline-blockのときは、display= inline-flexですか？？😮
@webgodweb
7 ай бұрын
おっしゃる通りです！！
もしかしてalign-itemsとalign-contentの場面の順番が、間違っていません？
@webgodweb
3 жыл бұрын
ご指摘ありがとうございます。編集上のミスで、仰る部分のスライド画像が反対になっておりました…。 概要欄に訂正の案内と、スライド画像をまとめたデータを掲載させていただきました。こちらにて動画内容を再度確認していただければ幸いです。 webgodweb.com/flexbox/flexbox.pdf 混乱を招いてしまい大変失礼いたしました！
@ramirami-dy3fc
3 жыл бұрын
@@webgodweb ありがとうございます✨
これ・・・無料でいいんですか！？ 他のサービスでお金出して買った内容より充実してます！😂笑
@webgodweb
3 жыл бұрын
時間をかけて制作したので、そう言って頂けると嬉しい限りです🙇♀️今後ともみなさまのお役に立てるように頑張ります！
アラインアイテムズとアラインコンテントの図がが逆になってますね。
動画のalign-itemsとalign-contentの表示が逆になってませんか？
@webgodweb
Жыл бұрын
はい、編集ミスがあり申し訳ございません。。。 概要欄から正しいスライド資料をPDFにて配布しておりますので、こちらもご参考にしていただけると幸いです🙇♀️
@kagomekagome807
Жыл бұрын
@@webgodweb ご丁寧にご回答ありがとうございます^_^ 今後もがんばってください♪
めちゃわかりやすかった。この子と仕事したいがために応募する人多そう＾＾
@webgodweb
3 жыл бұрын
コメントありがとうございます😊弊社はフラットな関係でいながら、笑いの絶えない仕事場ですが、スピード感や求められる資質等の要件が高いので、Webを極めようと熱い想いをもった方のご応募が多めです✨
サイコ―！(^^)/
@webgodweb
3 жыл бұрын
ご視聴ありがとうございます🍀そう言っていただけると嬉しいです😃
90年代のインターネットビッグバンの時代は、休日はいつも秋葉原を徘徊し、自宅で固定IPアドレス取得した自作PCにDNSサーバー、WEBサーバー、メールサーバーを立てて、名刺サイズの動画ストリーミング実験などを趣味（いわゆるヲタク）でやっていました。まだユーチューブすら無かった時代でした。その後、レンタルサーバーや各種ネット上のサービスで何でも済ませられる時代になり、2000年以降はパソコンヲタクもやめてしまいました。ここ数年、本業の仕事も定年退職となり、浦島太郎の様にジジイになった今、ウェブ関連の知識を取り戻し、更には格段に進化した言語を学び直してみたくなり、ユーチューブで学習動画を見まくっています。私の様な「元ヲタ」が若い人から動画で教えて頂けて、しかも完全無料とは感謝しか有りません。ありがとうございます。（追記）プログラミングを学習し直しているのは自前でネットショップを作りたくなったからです。今はショップを作るサービスはいくらでも有りますが、必ず販売手数料を取られます。自前で作れば出店料や販売手数料を取られずに利益を残せます。最近流行りのマイニングをする代わりにネットショップでコツコツ稼ぐべく、昔の知識を磨き直して活かそうとしています。
@webgodweb
3 жыл бұрын
コメントありがとうございます！恐れ多いです。 少し目を離した隙に目まぐるしく状況が変わって、新しい情報・技術が次から次へと流れ込んでくるのがWebの面白いところだと私も思います。今後ともご視聴いただければ嬉しい限りです！
@casettejp
3 жыл бұрын
@@webgodweb 女神様の動画で現代プログラミングを勉強させて頂きます。
floutのほうがかんたんにかんじてまうくらいむずい
@webgodweb
3 жыл бұрын
おっしゃる通り、最初習得するときには少しパワーがいると思います🥲 ただ、floatの使い方によっては、あとあとサイトの構造を変えたり、メンテナンスしていったりするときに苦労することがあります。。その点、Flexboxは、内側に封じ込めてつくるぶん、レイアウト変更や並び替えなどが簡単だなと思います🙏
教えるのが才能ありすぎです‼︎ 美人で頭良すぎて、、 美人なのがムダに思えるくらいすごくて。 全部動画見たいです！ありがとうございます♪
ごめんなさい、、タイプです
@webgodweb
3 жыл бұрын
ありがとうございます？！😂
displayの講座でもそうでしたが、この講座も編集ミスが残念過ぎます。台本は素晴らしく理解しやすいと思うのですが、編集がグチャグチャで本当に台無しかと。youtubeって撮り直し、或いは編集し直しは大変なんでしょうか。。。
@webgodweb
11 ай бұрын
貴重なご意見ありがとうございます。編集ミスで混乱させてしまい誠に申し訳ございません。 動画の差し替えができないKZreadの仕様上、こちらの動画は概要欄で正しい資料を配布の上、そのまま公開させていただいております🙇♀️ 最近の動画では複数人チェックの上、情報のミスがないように徹底しております。学習に活用いただけるコンテンツづくりにこれからも尽力しますので、今後ともご視聴いただければ幸いです🙇♀️
@kiyoshin8163
11 ай бұрын
youtubeでは仕様上、動画の差し替えができないんですね。残念です。いつでも何回でも見直して頭に刻みつけたいコンテンツだと思うのですが、話の筋が途中通らずストレスが溜まり、再び見る気にならないんです。でも、最近このチャンネルを見始めて、最初の方から少しずつフォローさせて頂いているところであり、まだまだこれからも追っていきます。楽しみにしてます。
いつも動画ありがとうございます。 お願いがあります。 出来るだけ難しい単語を使わないで説明していただけないでしょうか？ もっと簡単に説明してほしいです。 すみません。お願いします。
@hennnyu.channel
3 жыл бұрын
本当に初心者向けなのであれば、初心者の人は途中で見るのをやめてしまうと思います。
@webgodweb
3 жыл бұрын
貴重なご意見ありがとうございます。今後の参考にさせていただきます。 Flexboxについては、公式のリファレンスの概念自体も難しく、これ以上噛み砕くと余計に分かりづらくなってしまうと考えたので、難しい単語・概念についてはそのまま動画内でも使用させていただきました。 もし宜しければ、軸の概念などのややこしい部分を理解しなくても良いように、さらに初心者向けのFlexboxの使い方動画をアップしておりますので、こちらからご覧いただければ幸いです。 kzread.info/dash/bejne/go6n2KiSlty9p5M.html 初めはこちらの動画の内容のような程度で、多少使い方に慣れていただいてからの方が、概念が難しい部分も直感的に分かりやすくなるかと思います。
@hennnyu.channel
3 жыл бұрын
@@webgodweb ありがとうございます😊
なんで実際にコード書いて解説してくれないんだ。理解しにくい。。。 いつもわかりやすいのに。動画見終わってなるほどってならない。
@tatsuyanishikawa9982
3 жыл бұрын
この動画の後に下記のリンク先の動画見るとわかりやすいです。 kzread.info/dash/bejne/eIlotNGcicK_Yc4.html
@webgodweb
3 жыл бұрын
コメントありがとうございます。 ご期待に添えず申し訳ありません！Flexboxは高機能でいろいろとややこしいので、動きが頭の中でイメージができるようになってから、自分でコードを書いて試しながら学習してもらえればと思います。 頂いたご意見は今後の参考にさせていただきます🙇♀️