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 ふつうに書き直しました
<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はやめとけwww
そんなことしたら恥ずかしすぎるぞwww
どう考えても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を1つずつ見てかなきゃならん
ということじゃね? 次の</tr>を見る必要があるのと、何の違いがあるというのか このスレの範疇で言えば
tableでは tr:first-child って書けるけど
dlではそれが出来ない、的な >>141
いやいや
trがあるから、thとtdのセットはいちいち数えなくても、trの子要素として拾えるのよ
dlにはtrに当たる要素がないからそれが出来ないって話 dl
dt
dd
dl
dt
dd
別にこういう風に繰り返しても良いんだぞ それだと1つ目と2つ目の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分の数万行足し忘れてるぞww ブラウザのコード数百万行に比べれば
無視できるレベル 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依存だと思う devtoolのメッセージにstyleを適用させるのってどうやればいいんでしょうか?
https://i.imgur.com/39E08hB.png >>201
途中で書き込んじゃった
%c を文字に入れて、第2引数にスタイルを書く
例えばこんなの
console.log('%cabcde', 'background-color: #f00'); >>200
え、ダッと一気に文打って終わりでいいならいいですけど
推敲というか、戻って文章の途中を削除してそこに新たに文字を入れる場合とかけっこう見づらくならないですか?
とりあえずWindowsのChromeにだけ対応できればいいんですが
黒背景ということは文字には色がついているわけですから、フォーカスされたtextarea自体に
textarea:focus { text-decoration: underline; }
と設定し、変換前文字列の下だけは黒線が出る(つまり線が消えたように見える)という逆のやり方で一旦対処します… >>202-203
そういうのがあったんですね、ありがとうございます
ちょっとおもしろい センタリングの際の
text-align:center と margin: 0 auto
の使い分けがわからない。 >>206
text-align:center インライン要素が中央揃えになる
margin: 0 auto その要素自体が中央揃え。block要素のみ
text-align:centerは猛烈にダサくなるので使わないほうが良い
基本的にmargin: 0 autoで良い cssで親要素の端から端まで往復するアニメーションを作ってみようと思ったのですが、うまくいきません
どのようにすれば良いでしょうか
http://jsfiddle.net/564sbkn2/5/ >>209
ありがとうございます、うまく動きました!
http://jsfiddle.net/564sbkn2/8/
あと、CSSでthisみたいなのは使えないんでしょうか?
右端を親要素の右端に合わせる時、widthは決め打ちするしか無いのでしょうか
.span4 {
width: 20px;
}
@keyframes span4 {
0% {left: 0%;}
100% {left: calc(100% - 20px);}
}
以下のような感じで記述できると有り難いのですが
100% {left: calc(100% - this.width);} ■ このスレッドは過去ログ倉庫に格納されています