Размер видео: 1280 X 720853 X 480640 X 360
Показать панель управления
Автовоспроизведение
Автоповтор
※動画内でElementのネスト（l-header__nav__item）はOKと説明していますが、公式では非推奨でした、申し訳ございません🙇正しくは、.l-header__nav、.l-header__itemのような形になります！
公式のBEMドキュメントも読んでみましたが、公式だとmodifierとelementの間はシングルアンダースコア（_）で分ける、と紹介されていました。なので、block__element_modifierとなり、element同士のネストはNG・・・のような書き方だったと思います。ただ、（ウェブデザイン歴はほとんどありませんが）仕事の関係先で見たCSSは、HIROさんが動画内で紹介されていた通りの設計手法になっていました。日本だと（公式のやり方に従わず）こちらのやり方を採用する場合が多いのですかね？🤔
en.bem.info/methodology/naming-convention/#modifiers公式ドキュメントで、「Two Dashes style」という手法の紹介もあったようです。すみません！
独学で頑張っている者です。ちょうどcss設計について悩んでいた所でホントわかりやすい動画でした♪何度も見直して勉強頑張ります💪ありがとうございます😊
嬉しいコメントいただきありがとうございます🙇❕独学応援してます😆❗️
BEMについて色々調べていて、良くわからなかったのですが、こちらの動画で腑に落ちました！ありがとうございました！
よかったです😆❗️ありがとうございます🙇❗️
独学中の者です！クラス命名規則どうしようか悩んでいたところに、ヒロさんのこの動画のサムネ出てきて、秒でクリックしました😂画像付きで丁寧な解説で本当に助かりました🙇🏻♂️毎日コツコツ積み上げ頑張ります💪🏻
コメントありがとうございます🙇♂️タイムリーで動画出せてよかったです😆❕独学されてるんですね！応援してます😊♪僕ももっと参考になるような動画出せるように頑張ります💪
自分は OOCSS を土台に FLOCSS っぽい感じで制作しています。CSS の表現力が上がり、ほぼ同じ HTML 構造で全く別の意匠にできるケースが多くなったので、いろいろな面で使い回せて自分には合っています。BEM は「ちょこっと違うもの」が積み重なると（しかも後出しで）管理などがなかなかに厳しく、上手く使えれば良いんだろうけどなぁ、と思いつつ使えていません。
OOCSS使ったことなかったですが、これもオブジェクト指向の手法なんですね😲❕BEMはComponentとProectの切り分けが結構曖昧な点があったりして、なかなか試行錯誤するところ多いですよね😅
これは永久保存版！超ありがたい！！できたら1年前に知りたかったーー！！！😂笑
そう言っていただけて嬉しいです😆♪ありがとうございます🙇♂️❕
CSS設計に触れられたRUclips動画ってあまりない気がします。CSSって実は奥深く、自由度が高すぎるが故に複雑なんですよね〜
ありがとうございます🙇♂️❕知れば知るほどその複雑さが見えてきますよね...😅新しいプロパティ増えたりで便利にはなってきてますが、逆に初学者は何使えばいいか分からないみたいな感じにもなりそうですね😱
FLOCSSは過剰なんだよなぁ base, components, project, utils の４つを適切な順番で読み込めばcssが破綻することはないよね
わかります！特にlayoutsはなくても全然いけますね🤔
Nuxt環境の現場になってからフロックス使わなくてなりましたなあ
BEMでいつも迷うことがあり、質問です。まず私は、.l-header__nav--originalとしたい場合、そのhtml要素にdiv.l-header__nav.l-header__nav--originalと、長ったらしいですが2つ付けています。もしhtml上で.l-header__nav--originalだけで済むようにする場合、css側では.l-header__nav,.l-header__nav--original{}の2つに共通スタイルを当てないといけず、それを避けるためにそうしています。伝えづらいですが、html上で、div.parent- div.l-header__nav- div.l-header__nav- div.l-header__nav--originalと構築しているという事は、css上では.l-header__nav と .l-header__nav--originalにそれぞれ共通のスタイルを当てているのでしょうか。一般的な方法を知りたいです。
コメントいただきありがとうございます🙇どちらかといえば複数付与する形が多いです。すみません、この動画では単一で指定する形になっていますが、どちらも試した結果、僕も現在は複数付与する形をとっています。ちなみに単一で指定する場合は、.l-header__nav--originalに@extendで.l-header__navを読み込む形になります❗️
@@hirocode ご返信ありがとうございます！ヒロコードさんもそうなんですね、人それぞれかとは思いますが、そういうやり方もちゃんとあると知れて安心しました！
BEMでは基本的にエレメントのネストは特殊なケースを除いて一般的にはNGだと思いますが、私の知識が浅いだけでしょうか？
おっしゃる通りエレメントのネストは公式で非推奨のようです😵！今までネストOKでやってたので、見直したいと思います💦ご指摘いただきありがとうございます🙇❕
はじめまして、独学で勉強しているものです。BEMとFLOCSSの併用について２点質問があります。１点目が、ブロック名__エレメント名__エレメント名は、勉強した際に間違いというものも見ました。ブロック名__エレメント名__エレメント名は、実際は記法的に問題ないのでしょうか？自分の場合、ブロック名__エレメント名__エレメント名になりそうな場合は、新しくブロックを作ってブロック名__エレメント名としております。２点目が、l-header__navとありますが、lはレイアウトのため装飾があるようなものはlとしない認識がありました。l-header__navは実際には装飾などをしていくと思うので、p-header__navと作成すると思っておりました。実際はどうなのでしょうか？まだまだ、勉強が足りないため、合っているのか自信が持てないため、HIROさんの見解をお聞きしたいです。以上、何卒よろしくお願い致します。
コメントありがとうございます😊♪1点目、2点目共に認識間違いないです❗️混乱させてしまって申し訳ないです、むしろこの動画が間違ってます💦この動画修正版作らないとですね😱
@@hirocode お忙しい中早急に回答して頂きありがとうございます。認識あっていてよかったです。今後とも勉強させて頂くので何卒よろしくお願い致します。
BEMでの記述の際にdiv要素が多い時どのように対処されてますか？デザインの都合上、divタグが増えてしまうことがあると思うのですが、その際にクラス名を複数考えるのがいつも苦労して、そもそもクラス名として合っているのか？となってしまいます…
めちゃくちゃわかります！！これが正解かわかりませんが、最近だとBlockを細かく分けることが多いかもです。例えば、.header__navというelementだったものを.headerNavというblockにしてしまって、.headerNav__buttonみたいにする感じです。もしこのボタンが複雑なものなら、.headerNavButtonみたいにこれもブロックにしてしまった方が分かりやすくなるかもしれないです！
elementをblock名くっつけてしまうんですね！目から鱗です。その場合人にもよると思いますが、単語同士をblock名にする場合ハイフンで繋ぐかヒロコードさんの例のように大文字を混ぜるかといったところは好みになりますかね？特にその辺はBEMの記述規則にはあったような無いような…って感じですよね笑
完全に人によります！！僕でいうとハイフンない方がぱっと見でblockとして認識しやすいって理由からそうしてます😆❗️
ご返信ありがとうございます！！とても参考になりました！投稿頑張ってください！🫡
こんにちは😃動画ありがとうございます♪現在WordPressの卒業課題に取り組む前に、頂いた初案件を優先して進めてやっと終わったところです。SCSSで記述しているものの、ただ上からダラダラと書いている感じがして、今後の保守管理上、つくづくBEMの考え方やFLOCSSが大切だと実感しました。慣れるまで少し戸惑いそうですが(⌒-⌒; )分割管理はWPの案件の際も親和性が高いでしょうね。フリップで表示されていた画面は全部スクショしゃちゃいました😅ノートとってがっつりお勉強します。本当にありがとうございました
初案件おめでとうございます😊♪やっぱり実際の経験があると、重要性とか実感できますよね😆❕こちらこそ、ご視聴いただきありがとうございます🙇♂️
updateとinsertで両方「set****」にしてるプロジェクトは見事炎上してた。
初めまして！長いLP等のコーディングの際、同じようなキャッチコピーが3セクション以上配置されているデザインに遭遇します。同じような内容のセクションだけど見た目は違う場合、BEM規則におけるclass名はどの様に差別化するのでしょうか？
初めまして！コメントいただきありがとうございます😊♪複数箇所で同じデザインのキャッチコピーが使われている場合は、.c-copyのように、パーツとして各所に配置するのが良いかと思います。3つセクションがあり、それぞれ共通点が無い完全独立したデザインであればそれぞれ名称をつけるのが良さそうです。.p-about, .p-feature, .p-priceなど逆に、だいたい同じようなデザイン（上下の余白は同じで背景色が異なるとか）であれば、.p-sectionのように共通のセクションを設け、その上で、.p-section--darkのようにmodifireを使ってパターン分けしていく形になりそうです。もしくは、.p-section.u-bg--dark みたいに、utilityクラスを用意して変更を加える形もできるかと思います😆❕
Reactとかは触ったことありますか？
コメントいただきありがとうございます😊♪以前Reactのプロジェクトに参加したことあって、環境構築やルーティングなどかなり苦戦した記憶があります😱それ以来reactはほとんど触ってないです💦
ReactのプロジェクトをしているのですがFLOCSSとBEMに構成や具体的な記述法を教えて欲しいです！
こんにちは。横スクロールのサイト作成ができそうならしていただけませんか？
ご要望いただきありがとうございます😊♪ちょっと検討してみます❕
1年1組とか1年A組とか星組とか月組とかそういう話かと思ったら、ぜんぜんちがくて笑った。
😂😂😂
Good
ありがとうございます🙇❕
拡張しやすいの文言が拡張子やすいになってますよ😢
ほんとですね😅ご指摘いただきありがとうございます🙇♂️!
※動画内でElementのネスト（l-header__nav__item）はOKと説明していますが、公式では非推奨でした、申し訳ございません🙇
正しくは、.l-header__nav、.l-header__itemのような形になります！
公式のBEMドキュメントも読んでみましたが、公式だとmodifierとelementの間はシングルアンダースコア（_）で分ける、と紹介されていました。なので、block__element_modifierとなり、element同士のネストはNG・・・のような書き方だったと思います。
ただ、（ウェブデザイン歴はほとんどありませんが）仕事の関係先で見たCSSは、HIROさんが動画内で紹介されていた通りの設計手法になっていました。日本だと（公式のやり方に従わず）こちらのやり方を採用する場合が多いのですかね？🤔
en.bem.info/methodology/naming-convention/#modifiers
公式ドキュメントで、「Two Dashes style」という手法の紹介もあったようです。すみません！
独学で頑張っている者です。
ちょうどcss設計について悩んでいた所でホントわかりやすい動画でした♪
何度も見直して勉強頑張ります💪
ありがとうございます😊
嬉しいコメントいただきありがとうございます🙇❕独学応援してます😆❗️
BEMについて色々調べていて、良くわからなかったのですが、こちらの動画で腑に落ちました！ありがとうございました！
よかったです😆❗️ありがとうございます🙇❗️
独学中の者です！
クラス命名規則どうしようか悩んでいたところに、ヒロさんのこの動画のサムネ出てきて、秒でクリックしました😂
画像付きで丁寧な解説で本当に助かりました🙇🏻♂️
毎日コツコツ積み上げ頑張ります💪🏻
コメントありがとうございます🙇♂️
タイムリーで動画出せてよかったです😆❕
独学されてるんですね！応援してます😊♪
僕ももっと参考になるような動画出せるように頑張ります💪
自分は OOCSS を土台に FLOCSS っぽい感じで制作しています。
CSS の表現力が上がり、ほぼ同じ HTML 構造で全く別の意匠にできるケースが多くなったので、
いろいろな面で使い回せて自分には合っています。
BEM は「ちょこっと違うもの」が積み重なると（しかも後出しで）管理などがなかなかに厳しく、
上手く使えれば良いんだろうけどなぁ、と思いつつ使えていません。
OOCSS使ったことなかったですが、これもオブジェクト指向の手法なんですね😲❕
BEMはComponentとProectの切り分けが結構曖昧な点があったりして、なかなか試行錯誤するところ多いですよね😅
これは永久保存版！
超ありがたい！！
できたら1年前に知りたかったーー！！！😂笑
そう言っていただけて嬉しいです😆♪
ありがとうございます🙇♂️❕
CSS設計に触れられたRUclips動画ってあまりない気がします。
CSSって実は奥深く、自由度が高すぎるが故に複雑なんですよね〜
ありがとうございます🙇♂️❕
知れば知るほどその複雑さが見えてきますよね...😅
新しいプロパティ増えたりで便利にはなってきてますが、逆に初学者は何使えばいいか分からないみたいな感じにもなりそうですね😱
FLOCSSは過剰なんだよなぁ base, components, project, utils の４つを適切な順番で読み込めばcssが破綻することはないよね
わかります！特にlayoutsはなくても全然いけますね🤔
Nuxt環境の現場になってからフロックス使わなくてなりましたなあ
BEMでいつも迷うことがあり、質問です。
まず私は、
.l-header__nav--original
としたい場合、
そのhtml要素に
div.l-header__nav.l-header__nav--original
と、長ったらしいですが2つ付けています。
もしhtml上で.l-header__nav--original
だけで済むようにする場合、css側では
.l-header__nav,.l-header__nav--original{}
の2つに共通スタイルを当てないといけず、
それを避けるためにそうしています。
伝えづらいですが、
html上で、
div.parent
- div.l-header__nav
- div.l-header__nav
- div.l-header__nav--original
と構築しているという事は、
css上では
.l-header__nav と .l-header__nav--original
にそれぞれ共通のスタイルを当てているのでしょうか。
一般的な方法を知りたいです。
コメントいただきありがとうございます🙇
どちらかといえば複数付与する形が多いです。すみません、この動画では単一で指定する形になっていますが、どちらも試した結果、僕も現在は複数付与する形をとっています。
ちなみに単一で指定する場合は、
.l-header__nav--originalに@extendで.l-header__navを読み込む形になります❗️
@@hirocode
ご返信ありがとうございます！
ヒロコードさんもそうなんですね、
人それぞれかとは思いますが、そういうやり方もちゃんとあると知れて安心しました！
BEMでは基本的にエレメントのネストは特殊なケースを除いて一般的にはNGだと思いますが、私の知識が浅いだけでしょうか？
おっしゃる通りエレメントのネストは公式で非推奨のようです😵！
今までネストOKでやってたので、見直したいと思います💦
ご指摘いただきありがとうございます🙇❕
はじめまして、独学で勉強しているものです。
BEMとFLOCSSの併用について２点質問があります。
１点目が、ブロック名__エレメント名__エレメント名は、勉強した際に間違いというものも見ました。
ブロック名__エレメント名__エレメント名は、実際は記法的に問題ないのでしょうか？
自分の場合、ブロック名__エレメント名__エレメント名になりそうな場合は、新しくブロックを作ってブロック名__エレメント名としております。
２点目が、l-header__navとありますが、lはレイアウトのため装飾があるようなものはlとしない認識がありました。
l-header__navは実際には装飾などをしていくと思うので、p-header__navと作成すると思っておりました。実際はどうなのでしょうか？
まだまだ、勉強が足りないため、合っているのか自信が持てないため、HIROさんの見解をお聞きしたいです。
以上、何卒よろしくお願い致します。
コメントありがとうございます😊♪
1点目、2点目共に認識間違いないです❗️混乱させてしまって申し訳ないです、むしろこの動画が間違ってます💦
この動画修正版作らないとですね😱
@@hirocode お忙しい中早急に回答して頂きありがとうございます。認識あっていてよかったです。今後とも勉強させて頂くので何卒よろしくお願い致します。
BEMでの記述の際にdiv要素が多い時どのように対処されてますか？
デザインの都合上、divタグが増えてしまうことがあると思うのですが、その際にクラス名を複数考えるのがいつも苦労して、そもそもクラス名として合っているのか？となってしまいます…
めちゃくちゃわかります！！
これが正解かわかりませんが、最近だとBlockを細かく分けることが多いかもです。
例えば、.header__navというelementだったものを.headerNavというblockにしてしまって、.headerNav__buttonみたいにする感じです。
もしこのボタンが複雑なものなら、.headerNavButtonみたいにこれもブロックにしてしまった方が分かりやすくなるかもしれないです！
elementをblock名くっつけてしまうんですね！目から鱗です。
その場合人にもよると思いますが、単語同士をblock名にする場合ハイフンで繋ぐかヒロコードさんの例のように大文字を混ぜるかといったところは好みになりますかね？
特にその辺はBEMの記述規則にはあったような無いような…って感じですよね笑
完全に人によります！！僕でいうとハイフンない方がぱっと見でblockとして認識しやすいって理由からそうしてます😆❗️
ご返信ありがとうございます！！
とても参考になりました！
投稿頑張ってください！🫡
こんにちは😃動画ありがとうございます♪現在WordPressの卒業課題に取り組む前に、頂いた初案件を優先して進めてやっと終わったところです。SCSSで記述しているものの、ただ上からダラダラと書いている感じがして、今後の保守管理上、つくづくBEMの考え方やFLOCSSが大切だと実感しました。慣れるまで少し戸惑いそうですが(⌒-⌒; )分割管理はWPの案件の際も親和性が高いでしょうね。
フリップで表示されていた画面は全部スクショしゃちゃいました😅ノートとってがっつりお勉強します。本当にありがとうございました
初案件おめでとうございます😊♪
やっぱり実際の経験があると、重要性とか実感できますよね😆❕
こちらこそ、ご視聴いただきありがとうございます🙇♂️
updateとinsertで両方「set****」にしてるプロジェクトは見事炎上してた。
初めまして！
長いLP等のコーディングの際、
同じようなキャッチコピーが3セクション以上配置されているデザインに遭遇します。
同じような内容のセクションだけど見た目は違う場合、BEM規則におけるclass名はどの様に差別化するのでしょうか？
初めまして！コメントいただきありがとうございます😊♪
複数箇所で同じデザインのキャッチコピーが使われている場合は、
.c-copy
のように、パーツとして各所に配置するのが良いかと思います。
3つセクションがあり、それぞれ共通点が無い完全独立したデザインであればそれぞれ名称をつけるのが良さそうです。
.p-about, .p-feature, .p-priceなど
逆に、だいたい同じようなデザイン（上下の余白は同じで背景色が異なるとか）であれば、
.p-sectionのように共通のセクションを設け、その上で、.p-section--darkのようにmodifireを使ってパターン分けしていく形になりそうです。
もしくは、.p-section.u-bg--dark みたいに、utilityクラスを用意して変更を加える形もできるかと思います😆❕
Reactとかは触ったことありますか？
コメントいただきありがとうございます😊♪
以前Reactのプロジェクトに参加したことあって、環境構築やルーティングなどかなり苦戦した記憶があります😱
それ以来reactはほとんど触ってないです💦
ReactのプロジェクトをしているのですがFLOCSSとBEMに構成や具体的な記述法を教えて欲しいです！
こんにちは。横スクロールのサイト作成ができそうならしていただけませんか？
ご要望いただきありがとうございます😊♪ちょっと検討してみます❕
1年1組とか1年A組とか星組とか月組とかそういう話かと思ったら、ぜんぜんちがくて笑った。
😂😂😂
Good
ありがとうございます🙇❕
拡張しやすいの文言が拡張子やすいになってますよ😢
ほんとですね😅ご指摘いただきありがとうございます🙇♂️!