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 functional cssってのが流行ってるらしいけど
それって何? CSSでオリジナルのドロップダウンリストを作る時
▼マークは画像でやるしかないのでしょうか?
検索すると背景画像でやる例が多いようです CSSがいいならCSSでもできる
画像ならなにも考えなくて楽
Data URLスキームでもいい CSSだけでテキストを円形や扇型に表示することって出来ますか? CSSの詳細度が高いと良くないらしいですけど
どうしてですか?
cssstats.com
で詳細度のグラフ?が見られますが
見方が良く分かりません ありがとうございます
CSSWARPというジェネレートサイトを見つけることができました そもそもCSSの詳細度って何ですか?
どんなCSSだと高くなる(または低くなる)んですか? それCSSで一番に覚えなきゃいけないことだし、聞くより自分で調べてしっかり理解した方がいいと思う
詳細度の点数計算とかややこしいし
ここで中途半端に聞いたら勘違いしたままになるぞ
「とにかくセレクタをいっぱい書けば強い」とか「あとに書いた方が強い」とかいまだに言う人いるし fc2のサイトなのでNGワードにひっかかってURLを載せられないのですが
ドロップダウンメニューのCSSで
.dropmenu:before, .dropmenu:after{
content: "";
display: table;
}
と、テーブルを挿入しているコードがあります
動作を確かめてみたところ、
これがないとドロップダウンメニューの上部に空白が出来てしまうようです
しかし動作原理が分かりません
何故tableを挿入すると空白がなくなるのでしょうか? 画像がテーブルレイアウトされてる古いサイトのソース今のサイトにもってきたら
画像が巨大化してはみでるんだけどHTMLいじらずにCSSだけでテーブルにおさめるのってどうしたらいい?
tdにwidth30%とかかいても小さくならないんだけど > 詳細度の点数計算とかややこしいし
なんかすっかりそういうのを意識しなくなったな。なんでだろ?
一つはIDは原則的として使わずクラスをメインとして使うようにしているからだろう
もう一つはsassを使って階層化してるから外で定義されたものを中で定義したもので
上書きすると自然に認識してるからだろう。ともかく何も意識せず特に悩むこともなくなったよ そういや誰が言い出したか知らんけど100点だから10点だか
適当な点数を定義して10点が11個あつまれば110点で100点に勝てる!
みたいな間違った計算の解説まだやってる人いるの?
あれ余計ややこしくしてるだけじゃんかよ
style属性が最優先なのは感覚的にわかるだろ?
これは属性に書くものでセレクタじゃないから例外
あとは ID > クラス(疑似含む)> 要素名(疑似含む)> 全称セレクタの
4つしかなくてそれぞれ優先順位も感覚的にわかると思うんだけど
なんであんな馬鹿げた計算とか言い出したんだろ
考え方を簡単に書くならば、
セレクタにIDが一つ以上あれば優先度3、クラスが一つ以上あれば優先度2、
要素名が一つ以上あれば優先度1、全称セレクタは優先度0
(IDとセレクタの両方があっても合計なんてしません。最大の優先度になります)
優先度が同じなら、最大の優先度の数が多いものが勝つ
それも同じなら後に書いたもので上書きされる。
たったこれだけのルールなんだけどな。計算なんかいりませんって 「なんだよ、style属性に直書きされてんじゃん!効かないはずだよ… はい、!importantと。これでよし。」 >>199
今でもそれ生き残ってるのか、すごいな…
あれはね
90年代終盤に早々にCSSに手を出していた人達のなかでまことしやかに語られてたのよ
たぶん当時、海外のサイトかなんかで書かれてたのがそのまま広まっちゃったんだと思う
まだグーグルもなかったし、なによりまともにCSSをレンダリング出来るブラウザもなく
多段セレクタなんて書くような時代じゃなかったから、しゃーなしだと思う
この頃、すみけんたろうって人が書いたスタイルシートウェブデザインって本が名著で
これ読んだ人は正しく理解してたとは思うけど、なかなか知ってる人は少なかった
その後数年、テーブルレイアウト全盛が続くんだけど
Netscape6やMacIE5の登場、MTの流行、JIS X 8341-3の件などで
CSSを書く人が急に増えてウェブ制作板でもCSSのスレが熱くなったのが02〜03年くらい
その頃はまだ、100、10、1の足し算するのは間違ってるよって言ってもキチガイ扱いだったな
Dreamweaverメーリングリストで有名だったおばさんにすっごい噛みつかれた思い出 社内のHP移行でテーブルレイアウトで画像並べてる古いページをもってきたら
画像サイズがそろわなくなったんだけどどうしたらいい?
HTMLかわってないのにCSSがかわったせいなんだろうけど
td { width: 30% } とかかいても画像にあわせた幅まで拡大される… >>202
セルの大きさは中身優先なんで
<img width="100%">としてみたらどうだろうか 画像を
・縦横比を維持
・全体がブラウザウインドウに収まるうに
・可能な限り大きく
表示するにはどうCSS指定したらいい?
imgタグとimgタグの外側のタグでの指定方法を教えて >>206
img{width:100%;
height:auto;} >>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
さすがに会社のHPなんで勝手にソースはるわけにいかないけど
<table>
<tr>
<td><img></td><td><img></td>
</tr>
<tr>
<td><img></td><td><img></td>
</tr>
</table>
みたいになってるだけです
>>204
だめでした
>>205
いや HTMLはできればかえたくないんですよね
ゆくゆくは1からかいておきかえるべきなんですけど
同じような書き方のページが大量にあるのでとりあえずCSSだけで体裁をととのえたいんです >>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はればいいだろ CSSの質問の答えがまずSCSS覚えろってねえ…
仕事でCSSさわり続けるならともかく
このスレにくるようなやつなんてむしろCSS1行かいたら人生で2度とCSSさわる機会ないようなやつだろ 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
亀レス乙。よっぽど悔しかったんだねww >>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{プロパティ}
A.posted-at > time{プロパティ}
B.posted-at time{プロパティ}
”いわゆる”構造指定のセレクタとあえて言われればば@Aなどを連想するが。
Bはごく普通に皆が普段使用している書き方。構造もざっくり指定しているがあえて構造セレクタとは言わない。
@Aは汎用性が無いが、時と場合によっては有用で一般的には使えない。
Bは今更言わなくても一般的で他に方法はない
ちなみに全部のセレクタに1つ1つクラス名を付けているのなんて見た事無い。
みんながそうしているとでも思ってたの?
つーか、>>254は理解できた?
まずこちらの質問に回答してよ もうみんな質問とかそっちのけで揉めまくっててワロスw まあ、クレーム付いているのはsassをしつこく押しつけてた1人だけっぽいけどなw >>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)
というのがどういうことかわからなかったが
まあいいかw id表示がないから誰がどのレス書いてるのかさっぱり分からないw >>270
コミュ力大丈夫か?
皆がそうしていると思った = 一人もいない なぜそうなるの?大丈夫?
>>272
WordPressとか動的サイト作った事ないでしょ?
それぞれのページとか概念がおかしいし、わかる必要が無いんだよ。どこでも使えなきゃいけないんだよ。
.post-page H1
.post-list H2
だと親に「.post-page」か「.post-list」をもたなけれあいけなくなるから使えない。
H1かH2でなければいけなくなるから使えない。
要するに使えないんだよ。
どうしたらよいか
.titleで1回書くだけ書けばいい
どうしてもデザインを分けたい場合だけ、.親クラスを指定する。タグの指定は汎用性を落とすから使わない。 >>267をよく見てわかったわ
> ”いわゆる”構造指定のセレクタとあえて言われればば@Aなどを連想するが。
>>267は構造を"定義する"という考え方がないんだな。
(誰かの手によって)そういう構造になっている時に
セレクタで"指定する" という考え方しかないんだ
だから構造指定のセレクタとか言ってるわけか
だから俺は重要なこととして何行も使って 構造を"定義する" と 言ってるんだよ
もちろん.posted-atという構造を定義する場合、どのように定義すべきかは
決まってるわけじゃない。単に定義するという話で特に制限はない
(ただし同じクラスに二種類の定義をするのもダメとは言わないが混乱するだけだろう)
つまり以下のどういう構造でも良い(セレクタで書いてないのは意図的だからな)
@.posted-at の中に p があって、その中に span があって、それに隣接して time があるという構造
A.posted-at の直下に time があるという構造
B.posted-at の中に time があるという構造
.posted-atという構造の定義として「中に自由な要素を入れることができる」を加えてしまうと
中に想定外の p や span が入った時、1は誤爆しやすくなるが、それだけの話だな
その場合は定義を厳密にして、 .posted-at の直下にpがあって〜とすればよい。
ここまでが .posted-at という構造の話で
その構造に対してデザインを適用する時のセレクタをどうするかはまた別の話
定義すべき「あるclassを起点としたHTMLの構造」というのはHTMLレベルの話で
それにデザインを適用する時のセレクタはCSSレベルの話であるということ
とは言えセレクタは構造通りに指定するのが誤爆しにくくなるのは言うまでもないがな >>277
> 皆がそうしていると思った = 一人もいない なぜそうなるの?大丈夫?
箱の中に赤いボールしかないと思ったんでしょ?
なら青いボールは一つもないよ
当たり前だろう? >>273
理解してないのお前だよw
ボタンが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で解決!ってやってください ■ このスレッドは過去ログ倉庫に格納されています