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 >>100
<p>タイトル:どいつもこいつも<br>死ねよマジで</p>
<p>タイトル:どいつもこいつも<br> 空白空白死ねよマジで</p>
<style>
p {
margin-bottom: 1em;
}
</style> >>98
ありがと、好きなテンプレートエンジンを使えるのね
実際の使用感を聞きたいな >>99
padding-left: 1em;
text-indent: -1em; >>102
俺はhandlebarsやmustashが好き。
Pugやslmみたいな省略して書けるんです系のは嫌い。 >>73
>同じように <br /> も未知の/という属性
/ は属性とは認識されないはず
>>56
>つまり、SEOガー、SEOガーの話
section、aside、article などは、
SEO ではなく accessibility の話じゃないのかな？ >>105
section、aside、article などで
アクセシビリティがどのように変わるというの？ >>105
SEOガーいってるやつは負けて荒らすために書いてるだけだから >>107
公式な取り決めとして
<main>やら<nav>やらの意味が定義されると
マシンリーダブルになるんさ
従来のHTMLは
語や句をマークアップする要素は沢山あったんだけど
ブロックについては<form>くらいしか意味のあるものがなくて
セクションを明示するものは全くなかった
だから、たとえばプログラムで
ナビやら広告やらではなく本文部分にアクセスしたい
なんて時に、とても難儀してた
これがHTML5で定義されたセクショニング系要素があると
<nav>や<aside>は本編ではない、<main>が本編、とわかっているので
大変アクセスしやすくなったわけですな
そういう観点でアクセシビリティに大いに寄与している >>109
マシンリーダブルとアクセシビリティにはなんの関係もないですよね >>110
アクセシビリティってのは
ドキュメント内の要素へのアクセス出来やすさ具合のことよ
要素内のコンテンツを得るための障壁がいかに低いか、だけでなく
要素自体へどれだけ到達しやすいか、も重要なファクターなわけよ 国語 : 50点
算数 : 70点
みたいな表を作るとき、HTMLの要素はなにが適してますか?
自分の知識では
<ul>
<li><label>国語</label><label>:</label><p>50点</p></li>
<li><label>算数</label><label>:</label><p>70点</p></li>
とかなんですがlabelでもpでもなんか違う気がしてまして…… ふつうに書き直しました
<ul>
<li><label>国語</label><label>:</label><p>50点</p></li>
<li><label>算数</label><label>:</label><p>70点</p></li> >>115
ありがとうございます
table調べてみます tableを知らない世代が出てきたか。
かつてのHTMLはtableだらけだったんだよ。 >>116
tableはやめとけｗｗｗ
そんなことしたら恥ずかしすぎるぞｗｗｗ
どう考えてもdl >>123
tableでもdlでもおかしくないと思うがな dl好きなやつ一定数いるよなあ
dtとddをセットにして括る要素がないから使いづらいと思うんだが >>125
いや基本文章なんてタイトルと本文だろ？
それの繰り返しでhを下げていってhほどでもないものはdlになるわけだから増えるのが当たり前 headerとかh1とか邪魔だったんで、display:noneしちゃったんですけど、seo的にやばかったりします？ >>113は「表を作る」とはっきり書いているので、<table>が適切なのだろうな >>128
いいえ。SEOなんて嘘、まやかしです。
そんなものありません。HTMLの書き方で変わることなんてありません >>127
また国語勉強しないといけない人？
リストであればいれるでしょ
どうして「なんでも」になるの？ >>125
別に一対一じゃなくていいぞ
dl
dt
dd
dd
でも可能
でもこういう場合は普通hになるけどね
>>128
h1を消すと検索結果の表示が変わる
それでいいなら別に問題はない >>131
>>126を読むと、dtをhnと同等に扱うというよに見受けられるから、じゃね？
俺もたまに、なんで<article>にしないで頑なにdtとddなのかなー
と思うのに出くわす
横からすんませんでした 海外では最近どこもflexboxのサイトばっかだな
3、4個のカラム横並びにして、でかい写真でごまかす
同じようなデザイン
俺はそういう軟弱なデザインは使わない
htmlにtableでデザイン
cssもいらない
cssは不幸にしかならないよ
サイト作成の依頼募集してます 日本語ってvertical-align:centerを設定してもアルファベットに比べて上よりになってしまいますが、
ここって調節してますか？
https://html5experts.jp/takazudo/13592/ >>133
1対1じゃないところこそが
dtとddをくくってくれる要素がないことが不便なんじゃね？
tableのtrにあたる要素があれば便利なんだけど <html>
Hello World
</html>
これだけありゃあ十分やろ dtに続くddを拾うのに
次のdtが現れるか親dlが終わるまでnextSiblingを１つずつ見てかなきゃならん
ということじゃね？ 次の</tr>を見る必要があるのと、何の違いがあるというのか このスレの範疇で言えば
tableでは tr:first-child って書けるけど
dlではそれが出来ない、的な >>141
いやいや
trがあるから、thとtdのセットはいちいち数えなくても、trの子要素として拾えるのよ
dlにはtrに当たる要素がないからそれが出来ないって話 dl
dt
dd
dl
dt
dd
別にこういう風に繰り返しても良いんだぞ それだと１つ目と２つ目のdlがセットであることを以下略 インプットとラベルを一々二要素に分けたくない という質問です
<input type="checkbox" id="labelX">sample</input>
<label for="labelX">ラベル</label>
こうすることで文字列｢ラベル｣をクリックすることにより、｢sample｣のチェックボックスをオンオフの切り替えが出来ます。
でも、一々こうやって2つの要素を作成しid, for属性を対応させるというのが煩わしいのですが、
1要素だけで｢文字列をクリックすることによってオンオフの切り替え｣をしたいです。
つまり、｢sample｣文字列をクリックするだけで｢sample｣のチェックボックスのオンオフを切り替えられるようにしたいです。
しかも1要素だけで。 別の言い方をすると、
<input type="checkbox" style="display:none">click</input>
これだけだと｢click｣をクリックしてもオンオフの切り替えが出来ませんが、これをオンオフの切り替えが出来るようにしたいです。
1要素で。 >>146
ちょっと変わった書き方だな
こうする人が多いと思う
forを使う場合
<input id="hoge">
<label for="hoge">ここをクリックしてもOK</label>
forを使わない場合
<label>
<input id="hoge">ここをクリックしてもOK
</label>
前者のほうがCSS的な意味で都合が良い場合が多い、と個人的には思う >>147の要望通りではなかったのですが、
<label><input type="checkbox">sample</input></label>
では、｢sample｣をクリックするだけでチェックボックスのオンオフ切り替えが出来ますが、
こうすると、cssでinput:checked に対するスタイルの設定が効きません。
なぜでしょうか… >>146
すまん>>150のforを使わない場合の方は
<input>のidはいらなかった >>151
input:checkedはあくまでinput要素に対するスタイル
inputは置換インライン要素なので、中身はない
<input>文字列</input>
と書いたところで、文字列はinput要素の中身となるわけじゃない 置換インライン要素ってのは
要素の形成するボックスの中身が何かに置き換えられる要素のこと
主にimg、input、select、video、audioなどのこと
inputは形成するボックスの中身がUI部品に置き換わってる感じ >>153
なるほど
では、
<label><input type="checkbox" />sample</label>
とすることによって、css側で｢子要素のinputがcheckedになっているような親要素labelに対するスタイルの設定｣というモノをすれば良いのでしょうか
でも、そんな設定って出来るんですかね 例えば、
<label><input type="checkbox" />sample</label>
これに対して、｢sample｣をクリックしたら背景を赤にするというのはCSSだけでは無理ですか？ >>156
親は無理なんじゃないかなあ
CSSをごにょごにょしたら出来るのかも知れんけど
input[type="checkbox"]の親のクラスをトグルするJS書いちゃった方が早い気がする > input[type="checkbox"]の親のクラスをトグルするJS書いちゃった方が早い気がする
こういうのがjQueryが得意なことなんだよな。
Reactやvueじゃ面倒になる >>161
そんなに変わんなくね？
要素アクセスして
changeイベント拾って
parentのclassname変えるだけじゃん？ >>162
それを100個作ることを考えてみ。
jQueryだとHTMLはそのままで良くて、
ほんの数行（たぶん3行）書くだけで終わり
Reactやvueを使うとHTMLがガラリと変わってしまい
100個分コードを書かないといけなくなる >>163
100個分のコード書くわけねーだろカス ＞親のクラスをトグルする
こんな漢字か
http://jsfiddle.net/d50mhLkw/
なんだろう、なんか微妙。何かが違う気がする。垢抜けない >>164
そう？ならHTMLを書いたから（100個は多いので20個にした）
これをわずかの修正（可能な限りHTML、CSSを修正せずに）で実現してみて
https://jsfiddle.net/s1Lqwp8m/
ちなみにjQuery版、HTML、CSSは全く修正せずに、3行JavaScriptコードを追加しただけ
https://jsfiddle.net/Lnh2ac74/ ReactなんかはJavaScriptを使ってコンポーネントを作って
そのコンポーネントをHTMLで使うという感じ
（といってもHTMLで直接使えないのでJSXとJavaScriptコードの中に書く）
jQueryはHTMLとCSSでコンポーネントを作って
そのコンポーネントにJavaScriptで動きを追加するという感じ >>166
お前バカだからそんなしょーもないレベルのただのテスト環境で勝ち誇ってるってわかってねえんだろ 私のレスに色々知恵を絞って貰ってありがとうございます。 >>163
なんか勘違いしているよ
このくらいのことはむしろ
jQueryがあってもなくても大して変わらないタイプのコードだと思う
querySelectorが使えなかった頃なら
Sizzleの使えるjQに若干アドバンテージがあったかも知れんけど >>156
まだ:hasが使えるブラウザは無いのでcssだけでやりたいなら素直にforを使うしかない この程度ならinputの後ろのテキストをspanで囲って兄弟セレクタで色々やるだろ普通 >>174
は？なんの話してんの？
標準機能ってなに？ >>173
兄弟セレクタなら誰でもできるんじゃね？
質問はlabelをinputの親要素にした時の話だよ 今ってキャッシュさせたくないときってどうするのがいいの？
設定してたの全部旧式になっちゃったみたい <label><input type="checkbox"><span>sample</span></label>
input:checked + span { background-color: red; }
こうすればいいって事か >>166
俺は164ではないけどこんな感じかなん?
jqueryのソースをほぼ展開しただけみたいな
document.querySelectorAll('input[type="checkbox"]').forEach((e) =>{
e.addEventListener("click", function (e) {e.currentTarget.parentNode.classList.toggle("checked")})
}); >>180
jQuery版に比べて動的に増減した場合には対応できないって問題点があるね
あと要素の数だけクロージャーが生成されるのでリソースの無駄とか
querySelectorAllの要素にforEachが使えない場合があるとか
作り込みが甘い >>166
jQuery分の数万行足し忘れてるぞｗｗ ブラウザのコード数百万行に比べれば
無視できるレベル document.addEventListener("click", e => {
const t = e.target;
if (t.nodeName === "INPUT" && t.type === "checkbox") {
t.parentNode.classList.toggle("checked");
}
});
実際にはclickイベント拾うのは並べてある要素でいいし
inputに同じclass与えておいてそっちで判定した方がいいと思うけど まあ作りどうこうはともかく
>>163の
> 100個分コードを書かないといけなくなる
は「そんなこたーないんじゃね」ってことだね > は「そんなこたーないんじゃね」ってことだね
いや、反論まだ出てないんだが・・・
四の五の言わずに>>166に対してreactのコードを書けと
vueでもいいんやで 誰もjQが劣ってるとかいってるわけじゃないんだから
優位性を語るのは他所でやってくれんかね 優位性じゃなくて適材適所だな
誰もゲーム作るのにjQueryを使えとか言ってない
ウェブの大半を占めるウェブサイトはが、これからもアプリ開発なんかするわけもなく、
ウェブサイトとして欲しい機能はこれからも対して変わらないのだから
jQueryが適切という話しかしてない わかった
よくわかったから、もう自由に書いていいから
次からコテつけるかID出してお願い
全部保存して家宝にするから 言われなくても自由に書いてる
IDつけるかどうかも俺の自由だ >>193
よほどでなければ良い悪いは無い
別に>>179でも良い
俺は>>158 >>190
空気読めよNGするって言ってんだよ
公共の場では他人に配慮しろよ学校で習っただろ >>195
一つ一つNGにすればいいのでは？
俺が気を使う必要はないよね >>194
いい悪いじゃなくて標準機能ってなんだよって IME（日本語入力ソフト）が変換前文字列の下に出すアンダーライン（横線）って、色とか変えられるんでしたっけ？
text-decoration-colorはダメっぽかったです
黒線のままだと、黒背景のとき困るなと思い…
キャレット（縦線）の色はcaret-colorで変えられるんですが、これで一緒にアンダーラインの色まで変わったりはしないようです… >>199
PCならすぐ下に候補でるから困ら無いと思うけど
OS依存だと思う ■ このスレッドは過去ログ倉庫に格納されています
