HTML/CSS のどんな質問にも優しく答えるスレ 34
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 33
http://mevius.5ch.net/test/read.cgi/hp/1531279252/
■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>627
z-indexのことかと思ったけど614を読んでもよくわからなかった >>634
以前、cssのdisplayプロパティには表示/非表示を切り替える役割（jQueryでいう.show()/.hide()）と
インライン/ブロックなどのレイアウトを切り替える役割の2種類があって
表示/非表示を汎用クラスで使用する場合、無理があるって言ったら
このスレで意味不明とか言ってスゲーバカにされたわ。
言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
汎用クラスにする場合、出来ないっつー事だったんだがな
バカにされた意味が未だにわからん。 > 以前、cssのdisplayプロパティには表示/非表示を切り替える役割（jQueryでいう.show()/.hide()）と
> インライン/ブロックなどのレイアウトを切り替える役割の2種類があって
・インラインで表示
・ブロックで表示
・表示しない（インラインでもブロックでもない）
の1種類しか役割はない
「表示しない」もレイアウトの一つ
> 表示/非表示を汎用クラスで使用する場合、無理があるって言ったら
> このスレで意味不明とか言ってスゲーバカにされたわ。
何が言いたいのかわからん。意味不明と言われても当然だろう
> 言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
> 汎用クラスにする場合、出来ないっつー事だったんだがな
何が出来ないのかさっぱりわからない。日本語がおかしい >>636
>>636が正しいと思うよ。
表示非表示に関しては、そもそもがcssの欠陥だと思う
class="show block"や、class="show flex"みたいにするか。めちゃくちゃかっこ悪いけど
汎用classにするならwrapperをdisplay:inlineにすると影響が少ないのかな
そもそも論を言うとここはやはりjQueryに任せるべきか > class="show block"や、class="show flex"みたいにするか。めちゃくちゃかっこ悪いけど
意味不明。show blockがあるってことは、その反対
「ブロックで表示しない」や「flexで表示しない」があるってことか？
それは一体どういう意味だ？
表示しないのであれば、そこになにもないで当然だろう
そこにもの（ブロック等）があるが見えないだけっていうのならvisibilityがある
displayは物自体がなくなるのだから、それはブロックでもflexでもない > 言いたかったのはあなたのような使い方で、表示/非表示をここではflexを使用しているが
> 汎用クラスにする場合、出来ないっつー事だったんだがな
.onっていう汎用クラス使ってるじゃん visibilityは使い勝手悪くない？
何かバグも合ったはずだけど忘れた 使い勝手？
visibilityを使ってこんな裏技考えてみましたとかやる気か？
そこに物はあるが見えなくしたいってときに使うだけだろ >>639
なんで汎用クラスにしたら全部が全部汎用クラスでの運用になるん？ >>639
>そもそもがcssの欠陥
その欠陥は認知されていて、過去に box-suppress とかいう表示切り替え専用のプロパティが提案されたこともあった
なので現状では、元のスタイルを display:none で上書きする専用のclass（その class を外せば flex や giid など何であれ、元のdisplayに復帰する）か、hidden属性で対処するしかない（それで十分とも言えるので box-suppressはお蔵入りになったのかもしれん） >>645
ありがとう！
歴史に詳しい人がいるとうまくまとまるね >>645
提案されて却下ってことは、みんなが欠点に気づいていないってことじゃなくて、
それは欠点ではないと結論が出たってことなんだよ >>645
> なので現状では、元のスタイルを display:none で上書きする専用のclass（その class を外せば flex や giid など何であれ、元のdisplayに復帰する）か、hidden属性で対処するしかない
対処するしか無いんじゃなくて、そのやり方がCSSの正しいやり方ってことだよ
他の属性だってみんなそのやり方なんだから 1つだけわかった
たぶん、意味不明とか反論している人は、使用場面に遭遇した事ないんだわ
以前に動的サイトをロクに作った事無い奴に、その手法は動的では使えないよって
言っても最初全く通じなかったのと同じだわ
わかる人だけは何人か反応してるからもういいわ 汎用クラス .on があったとして
表示させるためのプロパティがdisplay:blockだったとすると
flexでレイアウトしていた要素は非表示から表示時にflex状態で復帰できないとか
display:noneで非表示してしまうと再表示時に再度コンテンツの読み込み直しになるとか
そういうところが不便ってことじゃなくて？ やっぱおまえら
unsetは使わんの？IEで使えないから >>649
使用場面に遭遇したことがあるというのなら、
その使用場面を言えば？
それが出来ないから意味不明って指摘に反論できないんだろ。
自分が悪いのに他人のせいにするな >>651
ずっと前から欲しかった機能だわこれ
存在を知らなかった >>650
そういう事。だからラッパーに頼るしかなくなる
>>651
IEでバグるから回避して以来、ずっと忘れてた・・・
今って問題なく使えるの？ > そういう事。だからラッパーに頼るしかなくなる
えぇ？それが理由ならお前の勘違いってことじゃん
ラッパーなんかいらないし
<div class="dialog on">ダイアログ</div>
.dialog { display: none; }
.dialog.on { display: block; }
クラス名は階層にしなくても繋げられるんですよ？ >>658
.dialog.on { display: block; }
これがblockかflexかinlineかわからないよねって話してるの .red { color: red } と書いたらだめな理由知ってる？
クラス名 = 見た目 になってるからだめ
クラス名で一律に見た目が決定されたらだめなんだよ
同じ理由で .on { display: block } というのもだめ
.on というのは見た目ではなくて状態を表す言葉。
.on という状態でどういう見た目になるかは
そのコンポーネント次第 >>659
display: blockって書いてあるんだからblockじゃん？
flexならdisplay: flex、inlineならdisplay: inline って書くんだよ
CSSの勉強をしよう！ 未だに全て物のはインライン要素かブロック要素のどちらかに分類されるって
思ってるのかな？
HTML5でそういう分類は廃止されたんだが
https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements >>661
それがonという汎用classで使いまわせないって話 >>657
やっぱアカンか、ありがとう
IEいつまで独自仕様なんだろう >>663
> それがonという汎用classで使いまわせないって話
あー、やっぱりだｗ 良くない使い方をしている
汎用classで使いまわしたらだめ
だ・め
理由は>>660にも書いたとおり
長くやってる人ならわかってると思うんだけど、
クラス名の使い方には二通りある
一つはコンポーネントを表すクラス名
もう一つは状態を表すクラス名
状態を表すクラス名は、見た目と紐づけてはいけない
つまり.onという汎用classで使い回すなんてことはやってはいけない。
ある状態でどういう見た目になるかはコンポーネント次第。
だから、.dialog.on { 見た目 } にコンポーネントと紐づけて使う
.on { 見た目 } のような使い方をしてはいけない >>664
そう、offは出来る
display:none !important
で必ず非表示になるからそれは問題ないんだ >>667
!importantを使うのも下手の証拠 >>666
＞状態を表すクラス名は、見た目と紐づけてはいけない
＞つまり.onという汎用classで使い回すなんてことはやってはいけない。
では、理由をどうぞ
>>668
100%消したいんだからimportantを付ける事に何の問題があるの？ >>669
> では、理由をどうぞ
だから>>660に書いたって言ってるだろうが 良くないと言われているから何も考えずに従っているだけだろう
bootstrap等のフレームワークは
＞状態を表すクラス名は、見た目と紐づけてはいけない
紐づけまくっているが、どう問題があるんだ？
フレームワークだからいいとか言うなよ > 良くないと言われているから何も考えずに従っているだけだろう
> bootstrap等のフレームワークは
> ＞状態を表すクラス名は、見た目と紐づけてはいけない
> 紐づけまくっているが、どう問題があるんだ？
紐づけていない。状態を表すクラスは必ずコンポーネントと組み合わせて使われている .赤 { color: 赤 } と .表示 { 表示 } は
どちらも同じ間抜けな使い方だってことに気づいてないんだよな
初心者やで 非表示にしたい時に
.off{
display:none !important;
}
つければいいだけじゃん >>674
だからいい加減
赤 { color: 赤 } とか .表示 { 表示 } は
.非表示 { 非表示 } みたいな使い方はやめろ jQuery何かでtoggle()を使う場合、.>>674みたいに自作classのトグルにしないとバグる事があるよ
普通は問題ないけど、プラグイン何かで設定されるインライン要素のdisplay:noneに勝てない事がある >>676
そいつはそもそも状態を表すクラスじゃないし、
メディアクエリーと組み合わせて使われてる
ダイアログのようにJavaScriptからつけたり外したりしねーだろ
状態というのは変わるものだ。変わらないものは状態ではない >>678
ウィンドウサイズによって変わるなら同じ事だね
で、メディアクエリーなら問題なくこういう使い方してもいいって事なのね
ふ〜ん
まぁ俺は良いと思うけど フレームワークってそういうもんなんだから、フレームワークだからいいって言い切って良かったのに
何を意地になってんだか 別にフレームワークだからって綺麗に実装されてるわけじゃないしな、CSSに限らず
まあフレームワークと違って自分達で書いたコードは自分達が保守運用するんだからメンテしやすいに越したことはない >>660
それってさー、むかーしから言う人いるけど矛盾がない？
「redってネットワークのことです」って言われたらそれまでで
結局その言語を理解できる人だけにしか通じない話じゃん
意味ない気がする
結局classやidなんて識別子でしかないんだから
何書いても問題ねえよ 状態を表すクラス名に見た目(css)を紐付けるのは問題ないわ。コンポーネントごとに状態に対しての見た目が変わったっていい。
問題は見た目をクラス名にすることであって。 質問です。
youtubeの動画を埋め込む際、見終わった後の関連動画を表示させない方法で
2018年現在も有効な方法ってありますか？
ここに書いてあるような「?rel=0」って現在は効かないですよね？
https://beginners-high.com/youtube-kanren-display/ >>660
同じ理由で .on { display: block } というのもだめ
.on というのは見た目ではなくて状態を表す言葉。
↑
矛盾してない？
自分で 見た目{見た目} がだめっていってon{display:block}はonが見た目じゃなくて状態を表してるから
っておなじ理由じゃないじゃん 要は
.hoge .on{display:block}はダメ
.hoge.on{display:block}はokってことだろ？
なんでこれだけのことをやれ汎用だコンポーネントだとぐちゃぐちゃいってんの？日本語壊滅すぎるだろ colorの値ってborder,text-decoration,box-shadow等の色に継承されてんだな
なんでfont-colorってプロパティ名にしなかったのかやっとわかった >>689
> 矛盾してない？
全然矛盾してない。.onを状態として扱うなら、
.onのときに表示するか非表示にするかはコンポーネント次第。
つまり、 .dialogと組み合わせて初めて
どういう表示になるかが特定できる
.onだけで決めてはだめという話
>>690
> .hoge .on{display:block}はダメ
> .hoge.on{display:block}はokってことだろ？
ほら間違ってる。だから説明がいるんだよｗ
.onが状態（JavaScriptから変更するもの）ならば、.onだけで
見た目が決定されたらだめ。必ずコンポーネントを表すクラスと組み合わせて使う
.hoge .on は .on だけでは何も決まらず、 .hoge と組み合わせているから問題ない >>682
> それってさー、むかーしから言う人いるけど矛盾がない？
> 「redってネットワークのことです」って言われたらそれまでで
何がそれまでなのかわからない。
.redを赤という意味で使うなって話だろ。
.redをネットワークの意味で使ってるなら別にいいよ
本当にネットワークの意味で使ってるならな
お前の屁理屈は、それまでだなｗ >>656
> そういう事。だからラッパーに頼るしかなくなる
どうやら反論もないし、ラッパーはいらないってことでいいね >>697
.hoge.on{}だって、ほかと組合わさってるじゃんほんと意味不
ほらwとか書いてないで日本語ちゃんとかいてくれよ >>697
css以前に日本語が出来て無い
言ってる事が合ってるかどうか以前に何を言ってるかわからない
酔っ払ってるの？ >>697
690はお前への援護レスだろうに…間違ってねぇじゃんよ。お前がそのすぐ下に書いてるコメントと… >>700
理解できない頭は辛いなｗ
.on { 見た目 }
やってはいけないのはこれだけ
状態を意味するクラスに直接見た目を書いてはいけない
これ以上の説明いる？ >>703
言わんとすることはわかるが、幾ら何でも説明が下手すぎる
cssの表現なんて見た目以外ないんだから何を指して「見た目」と言っているのか
そこを説明しないと >>697
状態を意味するかどうかなんてわかんないじゃん >>704
頭が短絡的すぎる
「状態を示すクラス単独に見た目を書くな」と言ったんだよ
言い換えると「状態を示すクラスはコンポーネントを示すクラスと組み合わせて見た目を書け」
と言ってるんだよ。誰が「見た目を書くな」っていったんだ。
「状態を示すクラス単独に」を抜かすんじゃねーよボケ
> 状態を意味するかどうかなんてわかんないじゃん
状態である以上変わるもの。変わらないならば状態ではない。
JavaScriptでつけたり外したりするのが状態だよ クラス名を気分でつけてのかな？
クラス設計というものを勉強したほうが良いぞ
BEMとかOOCSSとか（まあこれらはやりすぎだと思ってるが） >>707
自分がいく職場は気分でつけるところばかり
BEMの職場にいったら破綻してた
運用で人がチェンジするから学習が必要なのは無理っぽい × 運用で人がチェンジするから学習が必要なのは無理っぽい
○ 学習してない人にチェンジするから学習が必要なのは無理っぽい
◎ 素人にチェンジするから学習が必要なのは無理っぽい >>703
さんざん日本語へたすぎるっていわれてるのに…日本語へたな上に頭まで固いとか老害かよ 老害じゃなくて中学生だろう
さすがにこんなのが社会にいるとは思いたくないぞ
たまにいるけど >>700が>>706をどう満たしてないの？
状態状態いってるけど全てのプロパティは見た目だぞ？
見た目と状態がある！って言ってるだけ >>716
「状態を表すクラス単独に見た目を書いてはいけない」
繰り返していってみ
どうも端折る傾向にあるからさ CSS設計の各用語がわかりません
https://kuroeveryday.blogspot.com/2017/03/css-structure-and-rules.html
例えば FLOCSS だとこんなに種類があります
・Foundation
・Layout
・Object-Component
・Component
・Project
・Utillity
これらはどう違うのでしょうか？
どう使い分ければ良いのでしょうか？
またOOCSS、BEM、SMACSS、RSCSSでは
FLOCSSの一部しかないようですが、何故なくても大丈夫なのでしょうか？
まずは、違いを教えてください。 今話をしている「状態」というのは
https://qiita.com/mrd-takahashi/items/07dc3b4bad027daa2884
.item-nav__item--state_active {…}
こういうもののことですか？ >>718
なんで>>714へのレスなのアンカーミス？
>>714は状態＝見た目派
状態が見た目とは完全に違うものとして存在すると言ってるのは>>706だよ >>715
>>700はクラス単独じゃないじゃん…
見た目かいちゃいけなかったらcssできないじゃん >>719
アンカミスではない。話のレベルを数段階上に引き上げる
状態というのはなにか？
どのフレームワークにも状態という概念がある
これをお前に説明できるか？ >>720
見た目書いたらいけないなんて
一言も言っていない。
お前は馬鹿なのか？ >>721
これは今作った俺用のフレームワークだけど、これに状態という概念があるのか？
俺も知らなかったわ〜そんなもの搭載したつもり一切ないのにな
http://jsfiddle.net/kqs0o4p1/ >>723
それはフレームワークじゃない。
ただのゴミカス というか、有名フレームワークはどれも状態がある
どうしよう困った。なら状態という概念がないフレームワークを考え出してやろう
有名フレームワークにはどれも状態があるからなー！
（ちくしょう）
という考えで作り出されたものに価値はない さて>>716の対比によると、状態というのはSMACSSで
そのまんま英語にした、Stateで表せされる。BEMではModifierだ
まあどれでもいいのだが、どのフレームワークも
単独で使っておらず、コンポーネントと組み合わせて
見た目が決まってるというのがわかる。
例えば、BEMだが、LargeというModifierは
menu__item--large のように、
menu__itemというBlock、Elementと組み合わせている
言い換えるとlargeだけではどのような見た目か決定することはない。
menu__itemのlargeなのだ なんだ…老害のうえに自演キチガイかよ…話のレベルを上げる？そもそもの日本語のレベルまともにしてから出直せよ ま…まさかだけどonはダメだけどitem_display-onはokとか言い出すの？
まさか違うよね？いつから命名規則の話にすり替えられた？ >>725
「どのフレームワークにも」
状態がないフレームワークはフレームワークではないとおっしゃるのですね
なるほど >>728
何故かフレームワークならそれは状態を表すからokという事らしい
フレームワークなんてそういうものなんだから、FWは別で基本的には〜〜みたいにしてさっさと手仕舞いすればよかったのに
頑固だから謎の俺ルールがどんどんでてきて収集つかなくなっている >>726
まぁもうネタばらしすると、
お前が論破され叩かれ続けるのは決まっていた
俺が誘導したんだけどな
cssはそもそも設計がクソすぎて、100%正解の記述なんてどこにもない。
そもそも論を言えばフロント周りは集客が出来てコンバーションが取れれば何でも良い
全部画像だろうがなんだろうがどうでもいい場面すらある
それを経験し、皆わかっていてどこかで線引して妥協しているのに、
お前は自分の100点だけが正しいと思い込んで他人を批判し続けた
1~99点、101〜200点の人から叩かれて当たり前だ こんな小さくて細けえことにうだうだ問答繰り返して気持ち悪い ■ このスレッドは過去ログ倉庫に格納されています
