【Flexbox】HTML/CSS最強レイアウト！フレックスボックスの基礎講座。Flex入門コーディング
今回は、HTML/CSSでのレイアウト作りには欠かせない、Flexboxについての動画です。
初めは覚えるのが大変なフレックスボックスですが、基本から少しづつ覚えていけばかなり便利に使えると思います☺️
[ 今回使用したファイル ]
www.craft.do/s/HwfhaORm0NM640
この動画が気に入っていただけたら、ぜひチャンネル登録よろしくお願いします😆❗️
その他のSNSもフォローいただけたら嬉しいです🙇♂️❗️
◆ チャンネル登録
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
---- パソコン ----
【 Apple Macbook Pro 16inch 】
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
---- 周辺機器 ----
【 Apple AirPods Pro 】
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
---- デザイン 基礎編 ----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
---- デザイン 思考編 ----
【 誰のためのデザイン？ 】
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
---- 書籍デバイス ----
【 キンドルペーパーホワイト Kindle Paperwhite 】
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
Пікірлер: 49
とても参考になりました！
@hirocode
3 жыл бұрын
ありがとうございます😆🎵
固定幅と可変幅の組み合わせのところと並び順を変えるところ！ これが知りたかった！ものすごくシンプルでわかりやすかったです。 ありがとうございました。
@hirocode
2 жыл бұрын
ありがとうございます😊♪
超わかりやすい！ 3日悩んだのが、数分で解決した!
@hirocode
3 жыл бұрын
コメントありがとうございます🎵お役に立てて良かったです😆‼️
非常にわかりやすくためになりました！
@hirocode
3 жыл бұрын
ありがとうございます🙇♂️❗️
いつもわかりやすい動画ありがとうございます😊
@hirocode
2 жыл бұрын
こちらこそ、いつもご視聴いただきありがとうございます😊♪
いつも勉強になります、ありがとうございます!!🙏
@hirocode
2 жыл бұрын
そう言っていただけて嬉しいです😭こちらこそありがとうございます🙇♂️‼️
分かりやすい！！！
@hirocode
2 жыл бұрын
嬉しいコメントありがとうございます🙇♂️‼️
まじで役に立ちました。
@hirocode
2 жыл бұрын
嬉しいですー😭ありがとうございます🙇♂️‼️
とてもわかりやすかったです！他の動画も見たいと思いました。ありがとうございます。
@hirocode
3 ай бұрын
嬉しいコメントいただきありがとうございます😆❗️
flexはややこしいので困っていました。分かりやすい解説をありがとうございます😭😊
@hirocode
3 жыл бұрын
お役に立てたようで嬉しいです😊♪こちらこそご視聴いただきありがとうございます🙇♂️❗️
フロート地獄から抜けたくてこのような動画を探してました！
@hirocode
3 жыл бұрын
コメントありがとうございます🙇♂️ フロート地獄って表現めっちゃ共感できます😅 以前はフロートで組む必要があったものが、FlexBoxが出てきてくれたおかげで、ここ数年フロートは全く使用せずに済んでいます☺️♪ 参考にしていただけたみたいで嬉しいです😆❗️
ありがとうございます😆 flexboxの動画の中で一番わかりやすいと思います！！！ 今後お時間あれば、最後の方の固定幅とorderの方ももう少し詳しい動画お願いします！！！
@hirocode
3 жыл бұрын
コメントありがとうございます😆❗️めちゃめちゃ嬉しいです😭ありがとうございます🙇♂️ 詳しい動画追って上げたいと思います❗️❗️
他の人と同じコメントになりますが、とても分かりやすかったです。 今日仕事で悩んでしまった箇所も解決できそうです。 今後も視聴します！
@hirocode
Жыл бұрын
そう言っていただけてめちゃめちゃ嬉しいです😭❕ ありがとうございます🙇♂️
分かりやすい！はい、登録ー。
@hirocode
3 жыл бұрын
嬉しいです😭ありがとうございます🙇♂️‼️
3日間モヤモヤしてたのが10分でスッキリできました^_^ これからクソほど再生させて頂きます
@hirocode
3 жыл бұрын
めちゃめちゃ嬉しいコメントありがとうございます😆❗️❗️
めちゃくちゃ分かりやすいです！ 特に例や説明の見やすさが素晴らしい。 display: gridも説明動画作っていただけると嬉しいです。
@hirocode
3 жыл бұрын
嬉しいコメントありがとうございます😆❗️ display grid は出たての時に試したのですが、IE用にプロパティ名変更するなど結構面倒な指定が多くてそれ依頼敬遠していたのですが、また調べてみて便利な使い方などあったら動画にしてみますね☺️♫
わっかりやす〜🥺何件サイトをはしごしても解決できなかったのに、初っ端一発で原因特定が出来ました、、、ありがとうございます これから信者になります🥺🥺🥺
@hirocode
3 жыл бұрын
嬉しいコメントありがとうございます😭❗️❗️
3:30 align 6:50 均等配置
いつも参考にさせて頂いています。 この動画の最後に仰っている「次の動画」というのが見つけられないのですが、続きは作成されていますか？
@hirocode
3 жыл бұрын
コメントいただきありがとうございます😊❗️ すみませんこの続きの動画については作成できてないです💦 直近上げられるか分からないので、実際のレイアウトについては下記動画などが参考になるかと思いますので、お時間あればみていただければ嬉しいです❗️❗️ ヘッダーの組み方 kzread.info/dash/bejne/aIOrr6OtitHLo5c.html 模写コーディング kzread.info/dash/bejne/eWqjuq1rhtuaYZM.html 引き続きよろしくお願いします🙇♂️
@TK-he8hp
3 жыл бұрын
@@hirocode 返信頂きありがとうございます！参考にさせて頂きます🙇♂️ 今後も楽しみにしています🙂
こんにちは！ 横並びにする時はdisplay:flexのみで、flex:directionは必須ではないでしょうか？ それとも、記載していた方がいいでしょうか？ あと、3つ並びをレスポンシブで1列に変える場合、display:blockを使ってましたが、flex:direction rowとかの方がいいですか？ 初歩的な質問すみませんm(_ _)m
@hirocode
2 жыл бұрын
コメントいただきありがとうございます😊 flex-direction: row;が初期値で当たるので指定は不要です！また、並び替えについていくつかやり方あります。親要素にflex-direction: column;を指定するか、子要素を横幅100%固定にする形もできます。上記のサンプルファイルアップしておくのでよかったら参考に見てみてください😆❗ www.craft.do/s/HwfhaORm0NM640
@QSL0901QSL
2 жыл бұрын
@@hirocode 早速お返事頂いてありがとうございます！これからも楽しみに拝見させて頂きます！！
コードのファイルを公開して欲しいです！！ 真似したのですが、黒点があったり、boderから中身がはみ出たりします笑 助けてください。
@hirocode
3 жыл бұрын
コメントありがとうございます‼️ 概要欄にファイル貼ったので使ってみてください😆 ブラウザにデフォルトで指定されているcssをリセットするためのcssresetというcssも読み込む必要があるので、そのせいで崩れてだと思います！説明足りてなくてすみません💦
flex properties を紹介した動画ってどれですか？？
@hirocode
3 жыл бұрын
次の動画では〜、、、と言っていますが、その動画上げられてません😵 すみません。。🙇♂️
@jamestate1145
3 жыл бұрын
@@hirocode だいじょうぶですよ！見つからなかったのでしまぶーさんのプロパティを見てしまいました(/ω＼) でも、ほかのものはヒロコードさんの動画で勉強させていただいてます！ｗ
@hirocode
3 жыл бұрын
ありがとうございます🙇♂️
良い！文（サイト版）はないのですか？
@hirocode
3 жыл бұрын
ありがとうございます😆‼️ブログや説明サイトは無いんです😭すみません💦