ฝัง
- เผยแพร่เมื่อ 13 ก.ย. 2024
- 今回は、HTML/CSSでのレイアウト作りには欠かせない、Flexboxについての動画です。
初めは覚えるのが大変なフレックスボックスですが、基本から少しづつ覚えていけばかなり便利に使えると思います☺️
[ 今回使用したファイル ]
www.craft.do/s...
この動画が気に入っていただけたら、ぜひチャンネル登録よろしくお願いします😆❗️
その他のSNSもフォローいただけたら嬉しいです🙇♂️❗️
◆ チャンネル登録
www.youtube.com...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.c...
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス 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...
----------------------------------------------------------
フロート地獄から抜けたくてこのような動画を探してました！
コメントありがとうございます🙇♂️
フロート地獄って表現めっちゃ共感できます😅
以前はフロートで組む必要があったものが、FlexBoxが出てきてくれたおかげで、ここ数年フロートは全く使用せずに済んでいます☺️♪
参考にしていただけたみたいで嬉しいです😆❗️
超わかりやすい！
3日悩んだのが、数分で解決した!
コメントありがとうございます🎵お役に立てて良かったです😆‼️
とてもわかりやすかったです！他の動画も見たいと思いました。ありがとうございます。
嬉しいコメントいただきありがとうございます😆❗️
めっちゃわかりやすかったです！！！
そう言っていただけて嬉しいです😆❗️ありがとうございます🙇❗️
他の人と同じコメントになりますが、とても分かりやすかったです。
今日仕事で悩んでしまった箇所も解決できそうです。
今後も視聴します！
そう言っていただけてめちゃめちゃ嬉しいです😭❕
ありがとうございます🙇♂️
ありがとうございます😆
flexboxの動画の中で一番わかりやすいと思います！！！
今後お時間あれば、最後の方の固定幅とorderの方ももう少し詳しい動画お願いします！！！
コメントありがとうございます😆❗️めちゃめちゃ嬉しいです😭ありがとうございます🙇♂️ 詳しい動画追って上げたいと思います❗️❗️
flexはややこしいので困っていました。分かりやすい解説をありがとうございます😭😊
お役に立てたようで嬉しいです😊♪こちらこそご視聴いただきありがとうございます🙇♂️❗️
わっかりやす〜🥺何件サイトをはしごしても解決できなかったのに、初っ端一発で原因特定が出来ました、、、ありがとうございます
これから信者になります🥺🥺🥺
嬉しいコメントありがとうございます😭❗️❗️
固定幅と可変幅の組み合わせのところと並び順を変えるところ！
これが知りたかった！ものすごくシンプルでわかりやすかったです。
ありがとうございました。
ありがとうございます😊♪
とても参考になりました！
ありがとうございます😆🎵
非常にわかりやすくためになりました！
ありがとうございます🙇♂️❗️
分かりやすい！！！
嬉しいコメントありがとうございます🙇♂️‼️
3日間モヤモヤしてたのが10分でスッキリできました^_^
これからクソほど再生させて頂きます
めちゃめちゃ嬉しいコメントありがとうございます😆❗️❗️
まじで役に立ちました。
嬉しいですー😭ありがとうございます🙇♂️‼️
めちゃくちゃ分かりやすいです！
特に例や説明の見やすさが素晴らしい。
display: gridも説明動画作っていただけると嬉しいです。
嬉しいコメントありがとうございます😆❗️
display grid は出たての時に試したのですが、IE用にプロパティ名変更するなど結構面倒な指定が多くてそれ依頼敬遠していたのですが、また調べてみて便利な使い方などあったら動画にしてみますね☺️♫
いつも勉強になります、ありがとうございます!!🙏
そう言っていただけて嬉しいです😭こちらこそありがとうございます🙇♂️‼️
3:30 align
6:50 均等配置
分かりやすい！はい、登録ー。
嬉しいです😭ありがとうございます🙇♂️‼️
いつも参考にさせて頂いています。
この動画の最後に仰っている「次の動画」というのが見つけられないのですが、続きは作成されていますか？
コメントいただきありがとうございます😊❗️
すみませんこの続きの動画については作成できてないです💦
直近上げられるか分からないので、実際のレイアウトについては下記動画などが参考になるかと思いますので、お時間あればみていただければ嬉しいです❗️❗️
ヘッダーの組み方 th-cam.com/video/6OwMAtZnes4/w-d-xo.html
模写コーディング th-cam.com/video/G6oXK2Vx410/w-d-xo.html
引き続きよろしくお願いします🙇♂️
@@hirocode 返信頂きありがとうございます！参考にさせて頂きます🙇♂️
今後も楽しみにしています🙂
こんにちは！
横並びにする時はdisplay:flexのみで、flex:directionは必須ではないでしょうか？
それとも、記載していた方がいいでしょうか？
あと、3つ並びをレスポンシブで1列に変える場合、display:blockを使ってましたが、flex:direction rowとかの方がいいですか？
初歩的な質問すみませんm(_ _)m
コメントいただきありがとうございます😊
flex-direction: row;が初期値で当たるので指定は不要です！また、並び替えについていくつかやり方あります。親要素にflex-direction: column;を指定するか、子要素を横幅100%固定にする形もできます。上記のサンプルファイルアップしておくのでよかったら参考に見てみてください😆❗
www.craft.do/s/HwfhaORm0NM640
@@hirocode 早速お返事頂いてありがとうございます！これからも楽しみに拝見させて頂きます！！
コードのファイルを公開して欲しいです！！
真似したのですが、黒点があったり、boderから中身がはみ出たりします笑
助けてください。
コメントありがとうございます‼️
概要欄にファイル貼ったので使ってみてください😆
ブラウザにデフォルトで指定されているcssをリセットするためのcssresetというcssも読み込む必要があるので、そのせいで崩れてだと思います！説明足りてなくてすみません💦
良い！文（サイト版）はないのですか？
ありがとうございます😆‼️ブログや説明サイトは無いんです😭すみません💦
flex properties を紹介した動画ってどれですか？？
次の動画では〜、、、と言っていますが、その動画上げられてません😵
すみません。。🙇♂️
@@hirocode だいじょうぶですよ！見つからなかったのでしまぶーさんのプロパティを見てしまいました(/ω＼) でも、ほかのものはヒロコードさんの動画で勉強させていただいてます！ｗ
ありがとうございます🙇♂️
いつもわかりやすい動画ありがとうございます😊
こちらこそ、いつもご視聴いただきありがとうございます😊♪