HTML/CSS のどんな質問にも優しく答えるスレ 35
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!
質問側も節度あるレスで!質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人(立てられない場合は次の宣言者)が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(>>980を取った場合も)
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 34
http://mevius.5ch.net/test/read.cgi/hp/1538966757/
■関連スレ
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 CSSでどうやってinlineにblockを入れるっていうんだよw
こういう書き方でも想定してんのか?
.class1 {
display:inline;
.class2 {
display:block;
}
} ここでの質問するべき内容か迷ったのですが
linuxとwindowsからgoogleで確認したときlinuxのときだけ
置という字がくずれます
ブラウザのgoolgeは両方更新おり文字コードはutf-8で書いています
HTML/CSSのほうの原因を疑うべきでしょうか? >>349-350
要素のコンテンツモデルはHTML規定
>>343はレンダリングの話なので、CSS規定
違いを勉強し直せ >>354
つまり、崩れてなくて違う書体の置が表示されてたのか
設定がどこかで変わっているということか? >>343は意味不明じゃね?
HTML5では
display:inlineにした要素のことさしてインライン要素
display:blockにした要素のことをさしてブロック要素
と言ってるのだから
display:inlineの中にdisplay:blockを入れた時の挙動は
= インライン要素の中にブロック要素を入れた時の挙動は
インライン要素にブロック要素を入れた時の挙動と変わってないけどな
と当たり前のことを言ってる。
順番が前後するが、
HTML4の時の特定の種類の要素のことを
インライン要素、ブロック要素と呼ぶ概念はなくなっている
すべての要素はインラインにもブロックにも出来る。 そういうの社会では通用しないぞ
上司にもそう言うの?ww 社会だと、え?刺してほしかったの?ぐさぁって言われるからなw IEがスタンダードを受け入れれば、人類とインターネットの関係はもっと捗ると思うの っていうかもうaの中にdivも入れられるからな?いつの時代の話してんのおまえら >>357
> HTML5では
> display:inlineにした要素のことさしてインライン要素
> display:blockにした要素のことをさしてブロック要素
> と言ってるのだから
そんな定義ないぞ >>366
そりゃないよw
HTML5ではインライン要素やブロック要素というのは廃止された
ただ「インラインにした要素」のことをインライン要素と呼んでいる所があるってだけ
定義じゃなくてたんなる呼称 >>367
それはCSSを理解してない輩が勝手にそう呼んでるだけだろ >>367
それと「HTML5で言ってる」なんていうなよ inlineの中にblockが現れたら
そこでinline側のボックスは強制終了するんじゃなかったっけ? >>370
終了はせず、ブロックは2つの行ボックスに挟まれる
例えばインラインボックスに指定したボーダーは
ブロックで途切れるが、後続の行ボックスにまた現れる
>>357
厳密には、インライン要素というよりインラインボックス(要素が生成するボックスがインラインになる) >>371
そうね
そして、インラインボックスはCSSの用語なので、HTML4やHTML5を取り上げるのは間違い >>374
曖昧というより知った風な事いって俺スゲーしてるだけの白痴 >>371
ああそうかそうだった
pの中にブロックが現れるとそこで終わるのと勘違いしてた
ところで、↓この、空のpが作られるのって仕様でしたっけ?
http://jsfiddle.net/muf1vg7L/ HTML5は正しくないHTMLを与えられた時
どのように解釈するのかも決まってるんでしょ? >>332
です。勉強してきました
○結論 chromeのバグ
・inlineの中にblockを置くと、blockの前後でinline要素が分かれて匿名ブロックボックスに包含される
・opacityは継承されないが、子要素全体に及ぶ。
・更にposition:absoluteを付けた場合。opacityも付くが、前面のa要素が背景まで貫通する
この動作が合ってるかどうかは不明
http://jsfiddle.net/r4g8qm23/1/
・borderとかbackgroundを持ち出すとどんどんややこしくなってきたので、chromeのバグって事で。
○そもそもはと言うと、記述が間違っていたが、意図通りに動いていたのが始まり
そもそも論で言うと>>333さんが最も正しい。
aの中のimgに対してdisplay:block;margin:0 autoを設定し、
「a要素の親要素の中央」に来る事で問題ないと思ってしまった
※この動き自体は完全にcssの仕様通り
aをdisplay:blockにしてmargin:0 autoだけで済んでいた
○mozilla.orgについて
知識付けてから読むと、翻訳ミスも結構ありました。色々と修正しています。 >>339-340,344 サイト内容は合っています。ブロックレベル要素、インライン要素は無くなりました。英語版は信用できますが、日本語版は翻訳が普通に間違っていjます。
>>346 chromeが間違っています。継承では無く、スタイルが適用されなくなる、といったほうが正しいかも
>>349 CSS3にそのルールはありません。入れて良いかどうかはコンテンツカテゴリで決まります。CSS2時代は不明です
>>357,367 aかimg、i(アイコン)をインラインにする時に使いますね。インライン=display:inline。インライン要素と言われてもニュアンスは伝わります。ボックス要素というのは使わないです
>>376
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
解釈の順番はこんな感じ
・元html
<p>foo<div>bar</div>baz</p>
・pの中にdivは不可(フレージングコンテンツのみ)。pはdivの前で終了、p終了タグを一個追加
<p>foo</p><div>bar</div>baz</p>
・pの終了タグが最後に余っているからp開始タグを一個追加
<p>foo</p><div>bar</div>baz<p></p> >>379
> 英語版は信用できますが、日本語版は翻訳が普通に間違っています。
>>339-340にレスしてるけど、http://www.htmq.com/html5/007.shtmlにも英語版があるの?
少なくとも、>>339の引用文に間違いはないと思うけど、具体的にどこの翻訳が間違ってる? だーかーらー、HTML5ではインライン要素とか
ブロック要素はなくなりました。で終わりだろ。
馬鹿だけだよ。まだあるとか言ってるのは 人は見たいものしか見ない。
彼らは永遠になくなったインライン要素とブロック要素を追い求めるのだww >>381
「ブロックレベル要素」ね
彼らはdisplay:blockばかりに目が向いてるけど、table要素はdisplay:tableでHTML4.01ではブロックレベル要素だった
なので、「ブロックレベル要素(HTML4)=ブロックボックス(CSS)」は明らかに間違い >>379
> インライン=display:inline。インライン要素と言われてもニュアンスは伝わります。ボックス要素というのは使わないです
伝わる/伝わらないの問題ではなく、その表現をする人は大抵HTML/CSSのルールをごちゃまぜに覚えてる
<span style="display:inline"><span style="display:block">block</span></span>
「インライン要素の子にブロックレベル要素は持てないので、上のHTMLは文法違反です。」とドヤ顔でいいかねない >>380
書き直してる内に変になりました、すいません
英語版はmozillaの事です
日本語版はみんな好き勝手書いてるのでかなり注意した方がよいですね × 日本語版はみんな好き勝手書いてる
○ お前が好き勝手直さないのがいけない >>385
「みんな好き勝手書いてる」という具体的な部分を書けない時点であなたの情報が無価値なのでは
MDN日本語は完全に英語版と動機が取れてないので、古いバージョンの情報がそのまま残っている事はある
で、日本語訳の誤植は個人的にはあった気が記憶がないが、そんなに多いか?
どちらかというと、原文のMDN英語版でも仕様を明確に説明しきれてない事があるので、細かい記述まで気にするレベルならMDNを読むのを止めて仕様書を読んだ方が良い 言う必要はない。間違いが多いが真なら、
そのページも間違いがある >>390
偽なら「翻訳」には間違いがない事になる
何も言わなかったのと同等のゴミ情報 >>392
じゃあ、>>379の「日本語版は翻訳が普通に間違っています」はどういう意味? https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements
> 使用法
> ブロックレベル要素は <body> 要素内にのみ現れます。
これは間違い
HTML4-01 Strictではbody要素直下にはブロックレベル要素しか置けない規定があったが、ブロックレベル要素は他の場所にも置けた
また、Traditionalを宣言すれば、body要素直下にインライン要素を置くことが出来た
では、翻訳ミスかといえばそうではなく、原文(英語)から元々、この記述だった
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
結論「MDNは英語/日本語ともに間違い。仕様書を読みましょう。」 > ブロックレベル要素は <body> 要素内にのみ現れます。
よくよく読むと、要素内だから<body>の子孫要素であっても良いのか
>>394は忘れてくれ あえていうなら、HTML5で追加されたarticle,main,nav...etc要素がブロックレベル要素に分類されているのが違和感あるな
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/sgml/dtd.html#block
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements
「although "block-level" is not technically defined for elements that are new in HTML5」と書いてはあるけど、このページだけ読む初心者には見分けがつかないので意味をなさない(実質、MDNのオレオレ定義だし)
こういう誤った分類が残っているから「article要素はブロックレベル要素だから...」と語る初心者が後を絶たない >>397
ごめん、レス番間違えたわ
>>396は>>393アテネ >>396,399
「どこが間違ってるの?」と何度聞いてもはぐらかしてばかりだね
「他のページ」のURLとか間違っている記述を聞いても答えないんだろうし、君の中では「MDN英語版が正しくて日本語版が正しい」のだろうね、」としかいえないわ 言葉足らずで誤解を広げる>>379が他人の質問によって後出し情報を追加していく様はJSスレのそれに近いな
「日本語勉強しろ」な人が多すぎでないか 延々と間違いを責め合うんじゃなく
みんなで勉強していけばいいじゃん
有意義なスレにしようぜブラザー供 >>398
>article要素はブロックレベル要素だから…
「 article要素はブラウザ環境では HTML UAスタイルシートでブロックレベルにされているから…」
の略記なんです、
という解釈もできなくはないので、まったく誤りというわけでもないがな bootstrap3 と 4
の普及率ってどのくらいなの?
大体の人がブラウザにキャッシュされてると考えていい? >>404
スタイルシートで指定するのはブロックレベルではない div>ul>liのような構造で
liをクリックしたら内包しているul(コンテナ)を閉じる
ということをcssだけでやるにはどうしたらいい?
JSで値を書き換えるのはできるんだけどcssだけでできないかなと >>408
inputを使う
css アコーディオン とかでぐぐると例が出てくる
https://saruwakakun.com/html-css/reference/accordion
そういやこういうcssだけでjsみたいに見せる技術ってなんか名前無いんかね detailやsummaryがedgeやieで使えないから
こういうめんどくさいことになってるのかねえ >>410-411
ありがとう
アコーデオンで調べてみます アコーディオンを実現するためにjs回避したところで他で使いたくなるんだから、そこまで凝らなきゃいけないケースってそんなにあるかなぁ
実装例としては面白いけども >>410
名前つけるほど、大層なことはしてない
疑似クラスで制御してるだけ ↓のコードで2カラムのリンク集合体的なものを作るとき、
.buttonの幅(それぞれ50%)やボタン同士のmarginは.listと.buttonどっちに持たせた方がいいの?
.button自身のデザインは完成してて、liの中いっぱいに広がるという条件で
<ul class="container">
<li class="list"><a class="button">link1</a>
<li class="list"><a class="button">link2</a>
<li class="list"><a class="button">link3</a>
....省略
<li class="list"><a class="button">link20</a>
</ul> >>416
http://jsfiddle.net/h49z7o6u/2/
考え方は、どこをクリック出来るようにすると使いやすいかを中心に考える
まずはaはliと同じサイズにする事が基本
すると、liにpaddingは付けられない、と言った等が見えてくる >>379
>>376だけど
遅くなりましたがありがとー
良いお年をー 年末まで殺気立つとかどんなつまらない人生送ってるの・・・ >>421
お礼言われるの楽しみにワクワクしてたのに散々待たされたんだぞ
その気持ちがお前にわかるのかよ >>423
>>376だけど
せめて文体似せるくらいはしようよw >>423
ってか>>379は俺なんだけど
嘘ばっかり付いてると朝鮮人と思われるよ
もうちょっとちゃんとしよう >>427
俺が>>376だけど違うよー
俺そんなに詳しくない >>426
>>379だけど
めんどくさいことにしかならないので、止めてくれ >>434
客で使ってるとこあったけどその時7.1だったぞ
変えられるはず >>435
ありがとう
連絡来てどうにかしてくれって言われたわ
さすがにwpも動かんとか死ぬと思った
まぁ来年やな、良い音塩! >>436
アルファメール…
事前に確認とって開発開始したのに
納品直前になってPHP4しか動かせないとか言われ、蔵の○塚の営業担当にぶち切れた記憶が蘇ったわ
結局4で動くようにデグレを強要されるハメに。
その当時ですらさすがに4はないだろ…と思ったもんだが…鯖によっては変えられないかもよ…
それ以来、大○の関わるサービスには近寄らないようにしてる >>437
・・・えw
新年早々ヤバイ案件かよ〜〜
転送で対処するかな、さすがにphp4はどうにもできんわ PHPのバージョンはなんでもいい
3とか4でも変わりない
そう、HTMLならね https://codepen.io/infologicmation/pen/KbZoqK
先輩方よろしくお願いします
ちなみにここで使われているMathJaxは見た目上の問題を分かりやすく示すために使われているだけであって、
MathJaxはなんの関係も無いです。 アルファメールはphp4
プラチナも4
プレミアが5.4と7.0(どっちもセキュリティサポート終了)
アルファメールは絶対に使うな >>445
ありがとうございます。
しかし、リスト表記時の「・」はどうしても残しておかなければなりません さすがにそれはその場しのぎすぎてちょっと実用に耐えないです li要素でflexプロパティを使用しても、li要素の点「・」が消えなければいいのですがね… ■ このスレッドは過去ログ倉庫に格納されています