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 >>401
その169は153に対するレスじゃないよ
といってもレス先(アンカー)書き間違いでもない
2chの方見ればわかる
専ブラの都合かなんかでずれてるんだよ >>406
皆さんありがとうございました。
>liにtext-align left
で解決しました。
そもそも
divにtext-align:center の設定が
何故olの中のliにまで影響するのでしょうか?
div直下のbuttonにだけ影響すると思ったのですが。 すまん別件と勘違い
>>407は捨ててくれ
ただなおさら>>398で合ってるやん プロパティの継承で調べるといいかも
text系のインラインスタイルはだいたい内側に継承される というよりスタイル変更を内側でキャンセルしなきゃいけない構造にするから悪い
<div>
<div class="centeringContainer"><button>ボタン</button><div>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</div>
等で適用する範囲を限定するのが自然かと
あとインライン要素を同じ階層で他の要素と並べるのもあまりよくない
なるべくブロック化しておくのがスタイルも適用しやすい
自動出力等でHTMLが変更できないとかでなければね 誰か>>401を日本語に翻訳してくれ
普通に継続してるようにしか見えんのだが >>408
他にもcolorなど子孫まで影響する場合としない場合と、少し経験積まないと確かにわかりづらい
子孫まで継承させるプロパティもあるが>>402とは逆だし使ったことない 続き
>>262
↓
>>263
↓
>>265
↓
>>266
↓
>>271
↓
>>297
dataの話?文盲wwww >>405
>ボタンのサイズが小さくなってしまいましたとかいいだすだろ
すまんそこまで気が回らん勝った
しかし打ち消しはしたくないので>>411の方が良いと思う >>412
相手するな
草3つは負けを認めたようなもの
どうせunkochinchinなんてアホなこと書いたのも本人だろ dataの話に一切関わってないやつに行きなりdataの話で食って掛かるとか脅迫性障害じゃん? 自分がdataレスバで熱くなって、関係ないレスまですべてdataのレスに見えてるんだろうな。
覚醒剤でもやってるんじゃないか? >>411
なるほど。
大変参考になりました。
411さんはかなりの上級者の人ですね。
ありがとうございます。 >>418
だな
わざわざリンク書かなくてもツリー構造でも見てて全て見えてるってのになんかかわいそう
もういいわ とりあえずdataくんの「暇じゃない」ってのは嘘だったな。 >>402
div>button{
text-align:center;
}
じゃダメなんだっけ? >>414-415
冗長だわ。俺がまとめといてやろう。
二人を仮にdataくんとunkoくんとする。
1. dataくんが、unkoについてのレス>>183に対し攻撃
2. 煽りあいの後、>>271にて、dataくんが183をdataに関するレスと勘違いしていたことが発覚
3. 183のレス先>>169ではdataとunko2つを話題にしていた
4. dataくん、>>169はdataに関してのみのレスだと強弁
5. dataくん、unkoの話題をしていたunkoくんにdataの話題で言いがかりをつけたことを認めず自作自演で火消し中。自称暇じゃないらしい>>265 こっちでもdataの話題してるけど、
また別の話なんだよなぁ
俺は関係してない 暇じゃないなら勘違いしてました、でごめんなさいしとけばよかったのに。
よっぽど暇かレスバトル体質なんだろうな。
暇な奴ほど暇じゃないアピールするよな。
その後の行動で自ら暇人ですとバラしていくスタイルw 昨日かおとといくらいから書きまくってる奴いるけどすげーな
一日中5chやってたのか
完全に中毒だな とりあえず自己顕示欲を満たしたいなら
ブログでアフィやったほうがいいんじゃね?
荒らすなよクソが というか昨日も書いたけどid表示がないから誰がどのレスを書いたのかがさっぱり分からない
そくこれで延々レスのやり取り出来るなと >>426
ボタン自体を中央寄せなのでそれは違う
>>432
普段誰とも喋らないから、相手されるのが嬉しくて仕方ないんだろう
引きこもりニートか、ぼっちの中学生ってところだろうな
関わるだけ無駄だぞ 自称暇じゃない引きこもりニートぼっち中学生って凄いな >>427
4は違ってる
data-なし違反根拠が論点なので、unkoでなくhogeであっても同じこと
もう1人がunkoに対して反応したのでただ同意しただけだろ
勘違いはしてない >>427=435だぞ
自作自演でスレ違いのい話続けて、スレを荒らす手法
延々続けるとその内誰か釣られて勢いが出る position:staticな要素が
position:absoluteな要素を包含できないようになっている理由は何ですか?
それを出来るようにした場合になにがまずかったのかが分かりません position:staticってデフォルトじゃねーの?
普通にposition:absoluteって書いた
position:staticに内包されてるのと同じなんじゃねーの? 何故か包含できないと思い込んでいましたが
staticにabsoluteを入れても、absoluteは指定通りに表示されますね
staticの高さ計算から外れてstaticが消えてしまう場合があるので
出来ないと思い込んだのかもしれません
ありがとうございました 中身無しで高さ無し、要素が消えた!
この状態って初心者の鬼門だな 質問です。
<img>タグのwidthとかheightって、width=320でもwidth="320"でも動作するけど、""を使わないのは良くないと思っていいですよね? >>445
The attribute value can remain unquoted
if it doesn't contain spaces or
any of " ' ` = < or > .
Otherwise, it has to be quoted using either single
or double quotes.
The value, along with the = character,
can be omitted altogether
if the value is the empty string.
だそうな >>446
なるほど。特定の文字を含まなかったら無理に""で囲む必要はないんですね。
見た感じ気持ち悪いけど。
勉強になりました。ありがとうございました。 パース速度考えると省略できるところは省略したほうが速いのか?
ブラウザの実装に詳しい人教えてくれ 省略したほうが速いよ
保守性は下がるけど、まぁ好きにすればいい >>449
今時のPCだとたいした速度差にはならないような WebStormのプラグインのLiveEditを使いたいのですがうまく作動しません。
環境はwin7でクロームにJetBrains IDE Supportも入れています。
設定のプラグインのところでもliveeditにチェック入れています。
他に何をすべきでしょうか? http://jsbin.com/yazelolulu/1/edit?html,css,output
三つのフローティング要素があり、
二つ目は隙間に入りきらず「フロート落ち」したとします
三つ目はその隙間に入るサイズだったとしても、
二つ目と同じ垂直位置になり、一つ目の横には行きません
感覚的には、一つ目のフローティング要素に横に配置されそうですが。
何故このような動作になるのでしょうか?
フローティング要素が遡行できるのは直前の要素までなのでしょうか? >>443-451
保守性を考えて、常に、" " で囲む
どうせ、webpack などのツールで、minify するから、
自分で対応するのは、バグを増やすだけ
いらん事を考えるな きもいやつ消えた?
連休中、終日レスしてて、会社始まったらおとなしくなったようだな 見れば分かるのにあえて聞いて呼んでるのだろ
ただ荒らしたいだけ >>455
そういう仕様として決められている。
三つ目が二つ目より上に来ることは決してない。
さもなければ、画面幅に依存して上に来たり下に来たりして、読む側はとまどうだろう。 >>439の件ですが
udemyのCSS / CSS3 マスターコースを観ていたら
absoluteのための基準を作るために親をrelativeにすると言っていました
この自分の認識も、おそらく以前見た教育系コンテンツから得たものだと思います
ただstaticだと何故absoluteのための基準になれないのかが分かりませんし、
実際試してみると、staticでもabsoluteを正常に包含できている気もします
どうなのでしょうか? ↓のHTMLの時、.p1と.p2のfloat:left;を維持したまま両要素を縦に並べたいのですが、
.p2にclear:both;を設定する意外に良い方法はありませんか?
CSSに詳しい方、ご教授ください。
https://jsfiddle.net/3ozu1pv5/1/ >>468
>>470
レスありがとうございました。 >>466
CSSの仕様をよく読んだ?W3CでもMDNでもいいから穴が開くほどよく見てみ
staticは初期値で全ての要素が初めはstaticでありabsoluteの基準にはならない
absoluteはrelativeなど位置指定された親を基準にする
もし位置指定された親がなければトップレベルの親つまりbody要素を基準にする >>467
その質問の仕方だと方法はない
floatを維持してスペースがある限り横にならぶ
>>470のようにスペースをなくすってのは1つの方法だけど
floatの意味がないからやりたいこととは違うんだろう
p1, p2 を縦に並べた上で次の要素をその右におきたいならいくらでも方法はある PCサイトとスマホサイトを切り替える時のブレイクポイントどうしてますか!?
参考にしたいデス 基本はリキッドで作って、あとはざっくり
ipadはでかいんだからPCデザインでいいよね?って思いながら 768pxが境界線だわ
なんおサイズか忘れたけど、もうずっとこれでやってる
一体何のサイズなんだろうなぁ 原文ママって、<sup>要素で表現すべきですか?
それとも<span class="sic">などとしてCSS側で表記すべきですか?
個人的には、意味が違う (唯の視覚的な装飾ではない) ので <sup> かなとも思うのですが。 <p><sup>弟は一言こういいました。<br>「飯はまだかね?」<br>姉はすかさず言い返しました。<br>「さっき食べたでしょ」<br>二人は末永く飯を食べましたとさ。</sup>(原文ママ)</p>
こんな感じにしたいってこと?
<sup>は上付き文字だぞ? すいません言葉足らずでした。
引用文に「原文ママ」という注釈を加える時、その文言をどうタグ付けすべきかという質問です。
例えば
```
<q cite="http://iss.ndl.go.jp/books/R100000002-I000003978857-00" lang="ja">
必生<sup>原文ママ</sup>の作品を書き、地球へ痕を残すつもりです
</q>
```
という構造の<sup>原文ママ</sup>というタグ付けが、果して意味レベルなのか装飾レベルなのか、
どちらで解釈すべきかということです。
意味レベルでの注釈なら <sup> かそれに準ずるものですし、装飾なら <span class="sic"> とでもやって
CSS側で処理すべきですし…… >>484
「原文ママ」なんか括弧付きでそのままでいいと思うがそれは置いといて、
supはHTMLの勧告で、上付きにしないといけないちゃんと意味のある時にだけ使うようにされてる
見栄えのためだけに使うべきではない >>485
原文ママは原文には含まれていない用語なので、W3C が言う「意味」に合致するかは分かりませんが
ある程度構造的に区別するべきだと思うんです。
<small>ですかね。注釈という意味では。 <blockquote>尾木ママ</blockquote> Wikipediaなんで眉唾なんですが、ざっと目を通した限りでは
<sup> 若しくは <small> のようですね。
しかし確かに上付きという目的の為に <sup> を用いるのは W3C 勧告に即していないと思います。
https://en.wikipedia.org/wiki/Template_talk:Sic
ただ、しつこいですが「原文ママ」は原文に含めているが意味的には非原文≠ニいう構造を取るべきだと思うので
やはりなんらかのタグで区別したいです。
原文に含めているが意味的には非原文=ゥこれで想起したのが引用者註ですが、これもやはりタグで区別するとかいう意見は見当たりませんでした。
うーん。私が異端ですね、これは……w
https://stackoverflow.com/questions/37029600/is-there-a-sic-attribute-or-tag-in-html
ここでも質問と解答がありましたが、<i> 要素で囲めという主張でした。 >>490
異端じゃないだろタグで区別すべきwikipediaが間違ってる。wikipedia根拠にするとか >>491
ありがとうございます。
結局、
<q
cite="http://www.worldcat.org/oclc/676129102"
lang="ja">
必生<small class="sic"></small>の作品を書き、地球へ痕を残すつもりです
</q>
このような HTML に対し
q small.sic,
blockquote small.sic
{
font-size: 80%;
vertical-align: super;
}
q:lang(ja) small.sic::after,
blockquote:lang(ja) small.sic::after
{
content: "\3014原文ママ\3015";
}
のような CSS を用意することで解決しました。
<small>要素が空でもいいのかなとか色々疑問は残りますが、まあ企業じゃなくて個人だし、もうこれくらいで妥協します。 Windowsのスタートメニューみたいなクリックすると展開する階層メニューってJSなしでCSSだけでつくれる? >>493
作れるよ
メニューにcheckbox使って、例えば
.menu-button:checked + .submenu {
display: block;
}
で表示させる
閉じるのもメニュークリックが必要だけど 原理的にはどんなアクティブなものも(パフォーマンスが許す限り)作れる
あらゆる画面遷移を全部htmlにうめこんでdisplayをnoneとそれ以外で切り替えていけばいいだけ
ただ現実問題画面遷移が2つ3つならcssでくんでもいいけど
そんなこったことしないならプルダウンメニューぐらいJS知らなくてもjQueryのテンプレコピーするだけで1時間もあれば作れる パフォーマンスならjsよりcssのほうがいいじゃん 要素のレイアウトの為に切り替えが必要になる
display:inline;、display:inline-block;、display:block;
要素の表示/非表示を切り替えで使用する(クラスで)
display:block;、display:none;
これらは用途が違うので、干渉させたくないのだけど良い方法ないかな?
表示/非表示はvisibility:hidden/visibleで制御できれば理想なんだけど
高さなどの情報が残ってまう display:blockは要素を表示するものじゃなくて、
要素をブロック要素として扱うだけだぞ?
display:blockが表示というのなら、
display:inlineもinline-blockも表示だ
お前、JavaScriptからcssのスタイルを直接変更しようとしてるだろ?
JavaScriptでcssを直接いじるな。classを使え > パフォーマンスならjsよりcssのほうがいい
↑これ確かにそれっぽいけど、実際に速さの違いなんて測れるの?
自分としては眉唾モノなので、「CSSでもできるけどJSの方が楽」な挙動はJSで書いてるわ。 制作会社など現場で働いてる人に聞きたいんですが
要素を横並びなどにコーディングするとき使ってる技術は何ですか?
float、flexbox、grid、tableなど色々あると思いますが >>472
staticの中でabsoluteすると
たしかにbody基準になりました
以前実験した時には
body直下に作ったstaticな要素の中で子をabsolute指定したので
一見親要素基準で正常に表示されているように見えたのでした
ありがとうございました border-widthを可変にしたいのですが
%だと認識されず、vwだと認識されるけど期待した通りにならない
2%で可変にしたような効果を得るにはどういう書き方したらいいですかね >>498,>>499
用途
jQueryで言うなら.show()、.hide()にあたるもの。
表示/非表示のみをcssのクラスとして作成し制御したい場合。
表示/非表示のみを制御するcssクラスを作成した場合、
ある個所はdisplay:blockが良くても別の場所ではdisplay:inline-blockであってほしい事があり、
1つのクラスだけでは使いまわせない不便さがあるから、良い方法ないかと思って質問してみた。
>>498
jsからcssのスタイル変更なんてしようとしてないよ。
レスポンシブでデザインをcssのみでどこまで切り替えできるかをやってるだけ。 >>505
とあるサイズでだけ非表示にするだけのクラスを用意したらどうかな?
@media screen and (max-width: 900px) { .mobile-hidden { display: idden; } }
みたいなかんじで ■ このスレッドは過去ログ倉庫に格納されています