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 >>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点の人から叩かれて当たり前だ こんな小さくて細けえことにうだうだ問答繰り返して気持ち悪い inputタグを折り返すにはどうすればいいんでしたっけ、それとも無理でしたっけ？
長いので2行以上に折り返したい（けど改行コードは入力してほしくない）入力欄を作るには、textareaでkeyupだかするたびにreplaceで改行コードを取り除くしかないですかね？ <details>
<summary><ol><li>a</li><li>b</li></ol></summary>
<ul>
<li>c</li>
</ul>
</details>
が期待通りの出力になりません
なぜですか？ つまり
1.a
2.b
をひとまとまりとして?マークがついて欲しいのにずれて表示されます ▲←これを右に90度傾けたマークの表示位置が上手く行かないんですね >>735
＞改行コードを入力してほしくない
これは難しい。ブラウザでなんとでも入呂できる
通常はそのままサニタイズだけしてDBに入力させる
その後、改行が多いようなら管理画面の表示では改行をなくすなどの処理をかませる >>739
より正確に言うと身内向けで、うっかり改行を防ぎたくて…
(最終的にチェックされたり置換されたりはしますが、最後だとやり直しの手間が増えたり、予期せぬ置換が起こったりするので)
あるいは改行コードをアイコン的な感じで目に見えるようにできればいいのですが
editable化されたdivならともかく、ただのinputやtextareaでは難しいでしょうか
○文字目に改行コードがありますよって赤文字を出したりすることは簡単でしょうけれど
…あ、その位置を元にline-heightなどで計算してposition:absoluteでアイコンを重ねて表示すれば無理やり行けなくもない…のかな…？ flex って１度使うと子孫要素は height 一切できなくなるの？
内側で地図やグラフのJSライブラリを使いたいから
height100% をずっと指定したいんだけど…
有名な chart.js も flex の内側だとつかえないし
使わずにすむなら使わないほうがいいのかな flexboxは互換性考えたらゴミだっていってんのに
このスレやたらflex推すバカが居るからな
同じことができるならfloatやinline-block使っとけ
flex使わないといけないのは不特定多数の等間隔配置したいときだけ >742
そうなんですね…
よくある
1カラムヘッダ
2カラムでサイドバー
をそれぞれ可変長でもってて
それ以外の領域にめいっぱいグラフを表示させるってどうすればいいですか？
header
----------
side | chart
可変要素に対して残りの高さや幅めいっぱい使うというのが flex-grow を使う以外にやり方が分からなくて… flex使おうがJSならサイズとることはできるから
chart.js使うってことはJSかけるならJSでサイズセットしたほうがはやくね？ 独自ドメインって個人レベルがお名前.comのようなサービスを介さないで
取得する事ってできるもんなんですか？ 別の会社利用しているかもしれないが
同じようなもん >>744
jsはあまりなれてなくてchart.jsもテンプレのデータだけ入れ替えて使うぐらいで
設定変えるとか全くわからなくて半日かけてもうまくリサイズしてくれない…
あきらめて flex つかわずにレイアウトすることにします
ありがとうございました こういうときこそflexならなにでもできる君こねーの まぁそういうものだからねw
自分が不利なときには絶対来ないw flexって未だに互換性イマイチなの？
高さ合わせて横並びにする時、pading9999＋margin9999のハックなんてもう使いたくないよ 画像の回り込みみたいのはfloatしかできないよね
それ以外はflex使うけど
CSSGridはIE問題があるから手出してない そもそもそんな新聞みたいな段組でデザインすることが無い
もちろんそういう案件が来たら使うけどね >>757
いや、出来るけど得手不得手が大きすぎる
画像の回り込みだけはfloat最強だろう >>742
互換性考えたらゴミというと、具体的にどういうことでしょうか？ 実際>>743がflexのせいで動かないっていってんじゃん
DOMのレイアウトだけならモダンブラウザはほぼ対応してるけど
JSライブラリの中にはまだまだflex使うと動かないものはあるってことだろ >>759
まだ古いIEやらを相手にしてる人も少数だがいるんだよ 画像の回り込みデザインみかけなくなったな。
レスポンシブに弱いからか。 >>762
だと思う。モバイルで回り込みは見づらすぎるからな
最近はpc版もモバイルをそのまま横長にするだけってのも増えてきたし、
今後はもっと減っていくんじゃないか >>764
末尾要素を変な技使わないと左寄せできない
他にもいくつかあったが忘れた。
ケースバイケースで使い分けてるわ。
floatが苦手なんでしょ？ どんなケースか忘れたが、flexは中身の要素の高さを認識できない時があった。 なんでcssは何十年建ってもまともなレイアウトが出来ないんだよｗ ■ このスレッドは過去ログ倉庫に格納されています
