HTML/CSS のどんな質問に必ず優しく答えるスレ 31
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>208
こっちはエスパーじゃないんだからさ…
なんの下が何に対してどうはみ出るか書けよ >>206
max-width: 100%;
max-height: 100%;
俺がよくやるのは
<div class="box"><img></div>
.box{
position: relative;
width: 幅;
height: 0;
padding: 高 0 0 0;
}
img{
position: absolute;
margin: auto;
left: -1000px; right: -1000px; top: -1000px; bottom: -1000px;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
こんな感じ ゴメンよ仕事中で長文書けなかったんだ
object-fit: contain;
width:100vw;
height:100vh;
でいけたっぽい >>203
さすがに会社のＨＰなんで勝手にソースはるわけにいかないけど
<table>
<tr>
<td><img></td><td><img></td>
</tr>
<tr>
<td><img></td><td><img></td>
</tr>
</table>
みたいになってるだけです
>>204
だめでした
>>205
いや HTMLはできればかえたくないんですよね
ゆくゆくは１からかいておきかえるべきなんですけど
同じような書き方のページが大量にあるのでとりあえずＣＳＳだけで体裁をととのえたいんです >>213
こういうことなんですけどなんでこれうまくいってるんだろう
&:ってセレクタはじめてみたけど同じようにtdにwidth %つけてるだけにみえる
外側のテーブルに100%つけるのが必要だったのかな
来週出社したらためしてみまわすわ
ありがとうございます >>214
念のためだけど
SCSS
だということに注意 この5chの投稿欄ってtextareaですよね。
rows="5" cols="70"
となっていますが、入力する時には[ENTER]を押すと5行よりも沢山の
改行を入力できます。
これはなぜですか？
5行を超えるような改行の多い文書は入力出来ないようなtextareaを作成する事は出来ますか？ >>212
な？だからcssがうまくいかねーっていってのにscss書くとかほんと意味不明なんだけどさぁ
どっか別のスレたててやってくんない？ >>218
でも質問に答えてないお前のほうがいらないよ？ object-fit: cover;使えばええやん display:flex;って多用してるやついる？
俺は便利すぎてデフォがblockのタグは一括指定してるくらいの基地外だわ tachyonsってのがどうやらFunctional CSSとらを標榜してるCSSフレームワークのようだが
Bootstrapのように一つのCSSクラスに大量のスタイルを定義するかわりに、
一つの事しかやらないCSSクラスを大量に定義して
それを組み合わせて使えばCSSの変更が他ページに影響を及ぼすようなトラブルが無くなり最強って事らしいが
それってどうなの？HTML側のclassがコピペだらけになりそうな気がする
http://tachyons.io
従来のCSSフレームワークのやり方だと
他のページの表示に影響出ないようにCSSをコピーしたら
CSSが膨れ上がる上に
どれ使ってんのか使ってないのか良く分からなくなるってのはある
結果CSSがコピペとデッドコードだらけに >>225
気に食わない人追い出すとか言う話は
このスレと関係ないんで他でやってくんない？ >>224
結論はscssを使うのが最強ってことになると思うよ
まず一般論としてHTMLに限らないが、「名前」をつけるのは
大変な仕事なので「名前」はなるべくない方がいい。
また覚えることも少ない方がいい
だからbootstrapもそうだが、こちらでクラス名を用意しておきました。
さあ覚えてください。なんてのは間違ったやり方
名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
あるclassを起点にしてHTML要素の構造にスタイルを適用していく
そうするとHTMLは凄くシンプルになる。
デザインはscssの中ですべてを解決
何かを共通化したければ共通化できるし分離もできる
> 他のページの表示に影響出ないように
それはページごとにIDをつければ解決できるが
scssの@extendをうまく使えば安全に共通化してCSSサイズの削減ができる
> どれ使ってんのか使ってないのか良く分からなくなるってのはある
名前（class名）を少なくするというのは、使われている所を探す労力も減る このスレでやるなって話なのにしつこいな
はいたＣＳＳはればいいだろ CSSの質問の答えがまずSCSS覚えろってねえ…
仕事でＣＳＳさわり続けるならともかく
このスレにくるようなやつなんてむしろＣＳＳ１行かいたら人生で２度とＣＳＳさわる機会ないようなやつだろ SCSSとCSSの互換性は高く、
すべてのCSSはSCSSとして解釈できる
つまりCSSを覚えている人は、
そのままCSSの機能追加みたいな感じで
SCSSが使える HTMLの構造を指定してCSS書くのは嫌だな
同じコンテンツをあるページでは部分的に、
あるページではメインコンテンツとして使用したり、
動的だと間にタグが入ったり、タグ自体を変更することがしょっちゅうあるもん >>232
構造が変わっても同じデザインを
割り当てたいと言いたいんだろうけど
理由になってないよ
構造が変わればデザインも変えるのが普通なんだから >>226
scssで書かれてもcssにコピペして動かないんて他でやってくんない？ >>233
そんな事は無い。
自分は最初からレスポンシブ前提で書くから
どういう箇所で使用されようがデザインがある程度対応できるようにクラスで書く。
例えば、メインコンテンツの投稿日時のCSSをこんな風に書居てしまった場合、
main > article > footer >time
後からサイドバーにも投稿の紹介を掲載したい場合に、一切使えないよね。 >>226
scssはスレ違いだからお前が出ていけ。 >>235
なにが使えないのかわからないが？
まず第一に俺が書いた
> あるclassを起点にしてHTML要素の構造にスタイルを適用していく
を、あんたが書いた main > article ～ は
満たしてないので話にならない
せめて一番最初はclassにならないといけないし、
投稿日時はfooterに入れるとは限らない。
だからその場合は、.posted-at > time という風に
classを起点にしてHTML要素の構造にスタイルを適用するし、
サイドバーに表示したいなら、そのまま使える。
繰り返すが、なにが使えないのかわからない HTML/CSSのスレなんだからscss知らなくても分かる回答すべきじゃないの
それ以外のもの使うのは勝手だけど回答するときはCSSの出力で答えればいいだけじゃん いたよなjavascriptスレでcoffeescript宣伝奴
結果coffeescriptはどうなりましたか？
どんなに優れたcssプリプロセッサだろうがaltjsだろうが、結局はブラウザが解釈できるcss/jsに変換される。
生のcssの知識が無駄になることはないがcssプリプロセッサはありうる。
最近sassじゃなくpostcssの採用が増えているようだね。
このように標準規格であるhtml/css/jsより上のレイヤーでゴニョゴニョする系の技術は流行り廃りが激しくすぐ陳腐化する。
下位レイヤーのhtml/css/jsの知識は上のレイヤーに何を使おうがずっと役に立つ。 postcssもcssじゃないんでこのスレから出ていってください >239
> 最近sassじゃなくpostcssの採用が増えているようだね。
cssnextと言いたいのか？
postcssはcssの拡張文法を取り扱うための仕組みで
どんな文法に対応するかは使うプラグイン次第
例えばこれを使うとpostcssでscssが使える
https://github.com/postcss/postcss-scss >>239
> いたよなjavascriptスレでcoffeescript宣伝奴
> 結果coffeescriptはどうなりましたか？
結果TypeScriptはどうなりましたか？
結局文法が重要ってことだよ。
sassはcssと異なる文法だが
scssはcssの文法の拡張
JavaScriptはTypeScriptコードとして使えるように
CSSはSCSSコードとして使える >>242
つまりプロジェクトによって採用されるのがsassとは限らないんだね。やっぱりsassのオレオレ拡張仕様は標準規格じゃないし、頼れるのはcssの知識しかないね。 プロジェクトに採用されるのがsassとは限らないというのは
sassになるかもしれないということ
sassになったらcssの知識はいらない >>243
TypeScriptはJavaScriptコードとして使えないように
SCSSはCSSコードとして使えない
JavaScriptスレでTypeScriptのしつこい宣伝をすれば、
ここでのお前のように叩き出される。 scssっていうのはcssの知識が活かせるところが強いね。
cssの文法はscssの文法としても通じるから
そのまま移植すればOK
cssで何か知識を入れたらscssでも活かせる
何度も同じセレクタを書かなくていけない買ったのが
ネストで書けるようになったのが強い
これは標準ではできないこと >>246
> TypeScriptはJavaScriptコードとして使えないように
> SCSSはCSSコードとして使えない
そっち方向は、変換すれば使えるのでは？ >>245
lessやstylusになったらsassの知識は使えない
所詮one of themの非標準仕様。
CSSの重要性には比較にもならない。 というかここで質問するような初心者の人は
そもそもSCSSって何？って人も普通にいるんでは？ >>252
散々繰り返し言ってるのにscss基地がマウントとるためだけにグダグタいってんだよね >>237
書いた例は分かりやすくる為に極端にしたんだよ。
＞繰り返すが、なにが使えないのかわからない
↑イメージ力がなさそうなのでもう一例書こうか？
投稿ページでは投稿タイトルがH1だが
投稿の一覧ページでは投稿タイトルがH2になる。
ごくありふれた例だよな？
こいうのも使えない。
もう一例だそうか？
「購入する」「申し込む」などのコンバージョンボタンはあらゆる箇所に出現させられる必要がある
これは構造を指定する意味が全くない。
いいかげん理解してよ つーかさー、
>.posted-at > time という風に
これって超が付くほど普通の書き方だよね？
構造でもなんでもないよね？今更書く事じゃないよね？
最初に書いてたのは↓これじゃん？
>名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
>そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
>あるclassを起点にしてHTML要素の構造にスタイルを適用していく
これが「.posted-at > time という風に」の事を指しているなら
何今更3行も使ってごく一般的な事書いてるの？って思うんだが？
都合が悪くなって意味を変えたんでしょ？ .posted-at > time は超が付くほど普通の書き方たが構造でもなんでもないは嘘だろ。
posted-atクラス直下のtime要素、って構造だろ。
超が付くほど単純な構造だけど構造でもなんでもないは嘘。 HTML/CSS のどんな質問に必ず優しく答えるスレ 31 >>255
> これが「.posted-at > time という風に」の事を指しているなら
> 何今更3行も使ってごく一般的な事書いてるの？って思うんだが？
だから？ 一般的なこと、正しいことを書いたらダメなのか？
> 都合が悪くなって意味を変えたんでしょ？
「あるclassを起点にしてHTML要素の構造にスタイルを適用していく」
ってかいてあるよね？
それがどういうことなのか、お前が解釈したことを
言ってみて >>262
亀レス乙。よっぽど悔しかったんだねｗｗ >>258
> posted-atクラス直下のtime要素、って構造だろ。
その通り
.posted-atクラスは直下にtime要素を持つ構造であるということ
つまりクラスに対してHTMLの構造が定義されるというわけ
（もちろんその定義は .posted-atクラスは直下はtime要素しか
書いてはいけないという意味じゃないよ）
考え方によってはHTML構造があとから変わっても問題ないように
細かくclassをつけて、そのclassごとにデザインを
適用するってのが有るけど、あれとは対極
HTMLを制御できないJavaScriptライブラリが
作り出すHTMLのようなものは、細かくclassを定義して
部分ごとにスタイルを適用できるようにするってのはありだけど
自分らで書くHTML/CSSで同じことをやるのはコストが割に合わない
リセットCSS的な用途を除き、HTML要素に直接スタイルを
割り当てるのはだめだけど「あるclassを起点にする」ならば
それ以下はHTML要素（構造）に対してスタイルを割り当ててよい
でないと名前が多くなりすぎて、これ何のクラスだ？ってなって大変なことになる
そこまで手間かけることじゃねーよってな >>263
お前さんのように暇じゃないのでな
悔しいのはつまらないと指摘されちゃったほうだろ >>261
一般的、というか普通に皆メインはそう書いているだろう事を何で今更書いたの？
①.posted-at p span + time{プロパティ}
②.posted-at > time{プロパティ}
③.posted-at time{プロパティ}
”いわゆる”構造指定のセレクタとあえて言われればば①②などを連想するが。
③はごく普通に皆が普段使用している書き方。構造もざっくり指定しているがあえて構造セレクタとは言わない。
①②は汎用性が無いが、時と場合によっては有用で一般的には使えない。
③は今更言わなくても一般的で他に方法はない
ちなみに全部のセレクタに1つ1つクラス名を付けているのなんて見た事無い。
みんながそうしているとでも思ってたの？
つーか、>>254は理解できた？
まずこちらの質問に回答してよ もうみんな質問とかそっちのけで揉めまくっててワロスｗ まあ、クレーム付いているのはsassをしつこく押しつけてた1人だけっぽいけどなｗ >>267
> ちなみに全部のセレクタに1つ1つクラス名を付けているのなんて見た事無い。
> みんながそうしているとでも思ってたの？
自分が見たことないから、そうしてる人は一人もいないと思ったの？ >>266
お前もしつこい
data-の有無であって名称の付け方ではない
183が頓珍漢なことは間違いない >>267
> 投稿ページでは投稿タイトルがH1だが
> 投稿の一覧ページでは投稿タイトルがH2になる。
> ごくありふれた例だよな？
> こいうのも使えない。
だから何が使えないの？
何度も言うが「あるclassを起点にしてって」書いてあるとおり
classを起点にしてない時点で、H1にもH2にも直接スタイルを適用してはいけない
.post-page H1
.post-list H2
俺が言ったとおりにやると、それぞれ何のページかがわかるんだから、
それぞれで適切なスタイルを適用すれば良い。
別々にすることもできるし違ったスタイルにすることもできる
だから、何が使えないの？ > もう一例だそうか？
> 「購入する」「申し込む」などのコンバージョンボタンはあらゆる箇所に出現させられる必要がある
> これは構造を指定する意味が全くない。
構造を指定する？ 構造は指定するものじゃないが。定義するものだが？
コンバージョンボタン（.conversion-button）というものを作ったら、
そのボタンは、単に自分自身がinput type="button"要素であってもいいし、
<button class=".conversion-button"><i>アイコン</i><span>説明</span></button> みたいに
「コンバージョンボタンというのは中にi要素でアイコン、span要素で説明という構造を持っているものです」
という定義をして
この構造ををあらゆる場所に出現させることができる。
どこで出現させたとしても、「あるclassを起点にして」
つまり.conversion-buttonを起点にするから
どこで指定しても同じスタイルが適用できる。
構造の中にある要素にはわざわざクラスを付ける必要はない。iとかspanでよいと
何度も言ってるんだが？
いいかげん理解した？ .posted-at > timeが構造でもなんでもない(>>255)
といいつつ
構造指定といわれて.posted-at > timeを連想する(>>267)
というのがどういうことかわからなかったが
まあいいかｗ id表示がないから誰がどのレス書いてるのかさっぱり分からないｗ >>270
コミュ力大丈夫か？
皆がそうしていると思った = 一人もいない なぜそうなるの？大丈夫？
>>272
WordPressとか動的サイト作った事ないでしょ？
それぞれのページとか概念がおかしいし、わかる必要が無いんだよ。どこでも使えなきゃいけないんだよ。
.post-page H1
.post-list H2
だと親に「.post-page」か「.post-list」をもたなけれあいけなくなるから使えない。
H1かH2でなければいけなくなるから使えない。
要するに使えないんだよ。
どうしたらよいか
.titleで1回書くだけ書けばいい
どうしてもデザインを分けたい場合だけ、.親クラスを指定する。タグの指定は汎用性を落とすから使わない。 >>267をよく見てわかったわ
> ”いわゆる”構造指定のセレクタとあえて言われればば①②などを連想するが。
>>267は構造を"定義する"という考え方がないんだな。
（誰かの手によって）そういう構造になっている時に
セレクタで"指定する" という考え方しかないんだ
だから構造指定のセレクタとか言ってるわけか
だから俺は重要なこととして何行も使って 構造を"定義する" と 言ってるんだよ
もちろん.posted-atという構造を定義する場合、どのように定義すべきかは
決まってるわけじゃない。単に定義するという話で特に制限はない
（ただし同じクラスに二種類の定義をするのもダメとは言わないが混乱するだけだろう）
つまり以下のどういう構造でも良い（セレクタで書いてないのは意図的だからな）
①.posted-at の中に p があって、その中に span があって、それに隣接して time があるという構造
②.posted-at の直下に time があるという構造
③.posted-at の中に time があるという構造
.posted-atという構造の定義として「中に自由な要素を入れることができる」を加えてしまうと
中に想定外の p や span が入った時、1は誤爆しやすくなるが、それだけの話だな
その場合は定義を厳密にして、 .posted-at の直下にpがあって～とすればよい。
ここまでが .posted-at という構造の話で
その構造に対してデザインを適用する時のセレクタをどうするかはまた別の話
定義すべき「あるclassを起点としたHTMLの構造」というのはHTMLレベルの話で
それにデザインを適用する時のセレクタはCSSレベルの話であるということ
とは言えセレクタは構造通りに指定するのが誤爆しにくくなるのは言うまでもないがな >>277
> 皆がそうしていると思った = 一人もいない なぜそうなるの？大丈夫？
箱の中に赤いボールしかないと思ったんでしょ？
なら青いボールは一つもないよ
当たり前だろう？ >>273
理解してないのお前だよｗ
ボタンがbuttonタグじゃなかったら使えないよね？
aタグだったりinput type="button"だったらダメだよねそれ？
てか理解する気ないならしなくていいよ。
その手法で頑張って。 >>277
> .post-page H1
> .post-list H2
> だと親に「.post-page」か「.post-list」をもたなけれあいけなくなるから使えない。
> H1かH2でなければいけなくなるから使えない。
> 要するに使えないんだよ。
>
> どうしたらよいか
> .titleで1回書くだけ書けばいい
それは俺と同じことを言ってるだけだが？
H1とH2で区別しないなら.titleでいいだろ？
.post-page .title
.post-list .title
投稿ページとリストページで区別付けないなら
.titleと省略できるだろうな
.titleというclassを起点として中にHTML要素がない（定義しない）という
俺が言った一番シンプルなパターンだ 指定じゃない定義！ﾄﾞﾔｧとかさぁ
もうscss基地と同一人物なのまるだしじゃねーか…
ここはあなたの売れないscss本の後書き欄じゃありませんから自分でスレ立ててそっちで構造定義！scssで解決！ってやってください >>279
長い上に全く意味不明
>.posted-atという構造を定義する場合、どのように定義すべきかは
>決まってるわけじゃない。単に定義するという話で特に制限はない
なら普通にCSSセレクタ定義するのと何が違うの？
>.posted-atという構造の定義として「中に自由な要素を入れることができる」を加えてしまうと
>中に想定外の p や span が入った時、1は誤爆しやすくなるが、それだけの話だな
だから最初からそこを指摘して使えないっていったんだって
なんのこっちゃ > 名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
> そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
> あるclassを起点にしてHTML要素の構造にスタイルを適用していく
> そうするとHTMLは凄くシンプルになる。
名前は必要な所（.title）につけて、「そのclass以下にある要素」が無いと言うだけ
もし構造を以下のように定義した場合は
<header class=".title"><h1>見出し</h1></header>
h1というHTMLタグで区別できるならh1にclass名を付ける必要がなく
単に .title > h1 とすればよいと言ってる。
明確ではないが
<header class=".title"><h1>見出し</h1></header> という構造
<header class=".title"><h2>見出し</h2></header> という構造
という2つの構造を定義すれば
.title > h1 と .title > h2 で投稿ページと投稿一覧ページが区別できるから
別々のスタイルを適用することもできるし、別々のスタイルを適用することもできるだろう。
だけど .title だけだと同じスタイルしか適用できない
最初に書いたこれ↓であれば、同じスタイルでも違うスタイルを
適用することが可能になるし意味が明確になる。
> .post-page H1
> .post-list H2
この場合の"構造" は .post-page の中にh1があるという構造
.post-list の中にh2があるという構造 ということになる >>284
> なら普通にCSSセレクタ定義するのと何が違うの？
自分で "CSS" セレクタと書いてしまっているだろ？
HTMLの構造を決める段階で CSSを意識してしまってる
CSSをどうするかは後から考えろ。
まずHTMLの構造を定義するという話。
ここまで説明する必要があるってことは、
やっぱり当たり前の考えではなかったとうことだろうなｗ >>284
> だから最初からそこを指摘して使えないっていったんだって
それは定義が悪いだけで。"中に" じゃなくて "直下に" って
定義にすれば（場合によっては別の定義が必要かもしれんが）
そうすればできるよね？
反論有る？ >>276
まだ草1個だからまだましかな
3つ生やしたらそいつは終わってる >>279
皆→大多数を指す（全てではない）
その糞例えにあえて付き合うなら
箱の中に赤と緑と青があって90%が赤
つまりそれが「大多数」であり、「皆」な。
皆という単語は100%の意味を持たない。
一般的な会話もできないの？ > なら普通にCSSセレクタ定義するのと何が違うの？
だからCSSセレクタは、選択するための書き方であって
定義ではないと
"CSSセレクタ定義"でググっても2件しかでてこないわｗ >>290
その理屈だと「見たことがない」は
お前が見たこと無いだけだろｗ
で終わる話だよな >>287
>>288
>定義にすれば
そこからもうだめ。
動的の経験をもっと積まないと話にならないよ。
つまり汎用性がないから使えないんだよ。いずれわかるだろう >>292
そうだよ？見た事あるの？
そのサイトのURL出してよ。
めずらしくないんでしょ？たくさんあるよね？ >>295
はいどうぞ
https://kuroeveryday.blogspot.jp/2017/03/css-structure-and-rules.html
どれもひどいもんだね
俺のやり方ではこの例はこうなる
<h1>title</h1>
<ul class="menu">
<li>link</li>
<li class="active">active</li>
</ul>
HTMLもシンプルだし最低限のclassしか必要としない
menuという起点となるclassがあって
liはulの直下と書けば良いのだから不要
どうしても無理なパターン（この場合はactiveが近いな）にのみ
classをつける >>271
しつこいのはお前だろ暇人ｗ
>>183のレス先たどってみろよ。data-の話題と関係ないんだが。
暇人の上に文盲かｗｗｗ まあ実は、少しだけ命名規則が有るわけだが
今回言いたいこととは関係ないので、>>296には含めていない
既存のやぼったいフレームワークとは反対の考え方だから
俺独自のフレームワークとして公開したほうが良いかもな
まあフレームワークとして公開するような規模でもないし
単に考え方、最初にHTMLの構造を定義しましょうという話なんだが
（そうすればこんな複雑なフレームワークを持ちいらなくてもCSSセレクタは書けるようになる） OOCSS、BEM、SMACSS、FLOCSS、RSCSSといった設計思想は
CSSありきで、その設計をHTML側に反映させましょうというやり方だから
HTMLもCSSもあんなに複雑になるんだよな。
CSSが複雑なHTMLでも対応できるように考慮されてるから
大抵はシンプルで終わるHTMLに大規模対応の設計思想が組み込まれてしまう
俺の設計思想は方向が逆でまずHTMLの構造を定義しましょうという
思想だから、HTMLがシンプルになりCSSもシンプルになる
だからといって大規模なHTMLに対応できないか？と言われれば
そうではなく、それこそ俺がここに書いてない簡単な命名規則で対応できるレベル >>296
俺もこれ
もう最近はフレームワークとか使ってない
フレームワークのcssを打ち消したりする手間がしんどい
1から自分で書いたほうが色々と早い あらためてみると RSCSS が > を使うようで
一番俺の考えに近いのかな？
その他のフレームワークで、例えばBEMが
<ul class="menu">
<li class="menu__item--large">link</li>
<li class="menu__item--active">active</li>
</ul>
このように、menu_item--large みたいな長ったらしい
クラス名になってるのは、 ul の 直下にある li という構造を
前提としてないからこうなるんだよ
確かに .menu の直下に .menu__item--large がないかもしれないじゃないか！
って言われれば、そのとおりなのだが、それはHTMLの構造が定義されてないから起こることで、
.menuの直下にliがあってそれが（クラス名は付けないが） .menu__item--large 相当です。
と定義してしまえば、それに反することはないから、わざわざ .menu__item--large なんてものは
作らなくて良くなる。 なお、俺が言ってるやり方っていうのは > を多用するのでscssと相性が良い
使わないと見づらいし、scssで階層構造を作ってしまえば
そのリンク先のRSCSSのサンプルのように
scssを見るだけでも階層構造によってある程度HTMLの構造が把握することができる
OOCSSとかBEMとか普通のCSSでも書けるのはメリットかもしれないけど
名前から階層構造を判断しなきゃいけない 専ブラ使ってる方は、
NG Word 追加、正規表現にチェックをつけて、
sass|scss
と入力、連鎖あぼーんにチェックをつけてOKです。 >>296
いや一個一個id振るとか古より伝わるcssでもなんでもなく、そんなやり方してるやつ古より皆無だろ…何いってんのこのひと。
しかも 自分のやり方はこうだ！ﾄﾞﾔ してるがまたそれも当たり前のことだしむしろそれが古より伝わる書き方なんですけど一体なにを学んだらそんなマウント脳になれるんだろう
ってかもうどっちがscss！定義！マンだかわからないからほんと他でやってください うむ、RSCSSっていつから有るんだと思ったらgithubのリリースからすると
2015年2月っぽいちょうど俺がHTML/CSSを触らなくなった頃か
俺がOOCSS（2012年ごろ？）を聞いたときはなにクソな設計思想だなって
おもって、それを踏まえたBEMとかでてきて、
本来は既存のフレームワークを使いましょう派である俺だが、
俺のやり方とは真逆だ、ムキーって思っていたら
同じ方向性のRSCSSってのが出ていたんだな。
RSCSSはVariantsとか命名規則に少し違いが有るようだが、
俺がそれまでやっていたやり方と近いようだ。
これなら採用しても良いかも
ってか、クラス名ハイフンで初めてOKだったのかよｗ
俺はこれをstateと呼んでいて、is- をプリフィックスとして
使いましょうって命名規則にしてたわ
ElementsとかNested componentsとかLayoutsとか
なんとなく区別したほうが良さそうだが、そこまでいるかー？って考えで
逃げていたのがちゃんと書いてあって参考になるわ >>304
え？idに一個一個振るとかいう古代のCSSの話じゃなくて
OOCSSとかBEMとかの話なんだけど？
で、お前これらのフレームワークを見たことなかったんだよね？
それは認めないとｗ >>303
はい、ぜひともそれやってください。
そうすれば俺の書き込みが見えなくなるので
くだらない反論もしてこなくなります。
俺だけの意見が残って万々歳ですｗ ■ このスレッドは過去ログ倉庫に格納されています
