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 >>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ではインライン要素とか
ブロック要素はなくなりました。で終わりだろ。
馬鹿だけだよ。まだあるとか言ってるのは 人は見たいものしか見ない。
彼らは永遠になくなったインライン要素とブロック要素を追い求めるのだｗｗ >>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
名前つけるほど、大層なことはしてない
疑似クラスで制御してるだけ ↓のコードで２カラムのリンク集合体的なものを作るとき、
.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だけど
せめて文体似せるくらいはしようよｗ >>423
ってか>>379は俺なんだけど
嘘ばっかり付いてると朝鮮人と思われるよ
もうちょっとちゃんとしよう >>427
俺が>>376だけど違うよー
俺そんなに詳しくない >>426
>>379だけど
めんどくさいことにしかならないので、止めてくれ >>434
客で使ってるとこあったけどその時7.1だったぞ
変えられるはず >>435
ありがとう
連絡来てどうにかしてくれって言われたわ
さすがにwpも動かんとか死ぬと思った
まぁ来年やな、良い音塩！ >>436
アルファメール…
事前に確認とって開発開始したのに
納品直前になってPHP4しか動かせないとか言われ、蔵の○塚の営業担当にぶち切れた記憶が蘇ったわ
結局4で動くようにデグレを強要されるハメに。
その当時ですらさすがに4はないだろ…と思ったもんだが…鯖によっては変えられないかもよ…
それ以来、大○の関わるサービスには近寄らないようにしてる >>437
・・・えｗ
新年早々ヤバイ案件かよ〜〜
転送で対処するかな、さすがにphp4はどうにもできんわ PHPのバージョンはなんでもいい
3とか4でも変わりない
そう、HTMLならね https://codepen.io/infologicmation/pen/KbZoqK
先輩方よろしくお願いします
ちなみにここで使われているMathJaxは見た目上の問題を分かりやすく示すために使われているだけであって、
MathJaxはなんの関係も無いです。 アルファメールはphp4
プラチナも4
プレミアが5.4と7.0（どっちもセキュリティサポート終了）
アルファメールは絶対に使うな >>445
ありがとうございます。
しかし、リスト表記時の｢・｣はどうしても残しておかなければなりません さすがにそれはその場しのぎすぎてちょっと実用に耐えないです li要素でflexプロパティを使用しても、li要素の点｢・｣が消えなければいいのですがね… うお、できたｗｗｗ
すげー時間の無駄だったｗｗｗ
spanとp両方に
display: list-item;
漬けてるから好きな方外してくれ
あと、(1)とか文字の位置は
text-indent: -100px;
で調節すればok
https://codepen.io/anon/pen/RExEdW >>450
ありがとうございます。
ベストではないですが、現状ではそれがベターなのでそれで使わさせて貰います 自分が考えついた物はベスト
人に教えてもらったいい物はベター
人に教えてもらった物はクソ
これがしったか初心者クオリティ ではベストではない点について言わせて貰いますと
>>450で見た目上、生成されている｢・｣はliの｢・｣ではなく、span.insert_stringに対して生成されたlist-itemによる｢・｣であって
これは本筋ではないと感じました。(HTML上の論理的な構造が変わっている)
僕の中でのベストとしては、HTML内の構造はそのままで、(javascriptで？)insert_stringを適切に移動”だけ”させて、>>450みたいにしたものだったのですが。 リストマーカーってあんまりそのまま使わなくなっちゃったなー 使うとしても一旦消してbeforeで中黒付けるかな
ブラウザでどう表示されるか分からんのは怖い >>458
俺もそれだなあ
list-style周りがあまり発展しないのは
やっぱ使う奴が少ないからなんだろうか >>459
だろうね
そもそもモバイル化に伴って、リスト自体が少なくなったと思う
ulやolはあんまり使わない。メニューぐらいかな？メニューだと絶対にlist-styleは使わない
あとは何かの手続き順序とか、ランキングの表でもあればolを使うかもしれない
とにかくlist-styleは使い勝手が悪い 画面に直接マッキーで点入れたいとこに打てばいんじゃね？
俺って天才かよ >>461
fixedやろ、それは考えてﾌﾌｯってしてやめた
わざわざ言うもんじゃないんだ ブログで数学の証明を書いてますので箇条書きは使いまくりですね 隣接セレクタが効きません。なんでだめなんだ...？
// HTML ------------------------
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
// CSS ------------------------
.menu li + .menu li {
margin-top: 10px;
} >>466
それでいいのか...！有難う有難う感謝です Twitterウィジェットのtweetswindが使えなくなってしまったので、新しくfeedwindを使って表示させたいのですが、うまくできません
iframeタグでtweetswindを使っていたので、feedwindでiframe用のコードを取得してコピペしたのですが、元のページが文字化けしてしまいます。元のページはUTF-8です 答えてやりなよｗ
>>468
「iframe 文字コード」で検索すれば色々でてくる
文字コードは実物みないと解決策がわからん 質問です。
たまに画面がグチャってるサイトってありますけど、
こういうのは意図的に、ワザとこうなってるのですか？
http://www.flower-record.com
それとも特定の別ブラウザで見ると、綺麗にレイアウトしてるものなのですか？
自分だけこう見えるってこと？
なぜこうなるのか、意味が分りません >>471
IE11だとまともに見える（デザインセンスは酷いけど）
まぁ、あまり気にしなくていいと思うよ。知り合いなら教えてあげたほうが良いかも <thead>の子でthの代わりにtd使ってもいい？ ■ このスレッドは過去ログ倉庫に格納されています
