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 >>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依存だと思う 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);} >>210
100% {left: 100%; transform:translateX(-100%);} ここの人らはgulp使ってる？
なんかオススメのプラグインあったらおせーて すいません質問お願いします
【Google検索結果で「ページがモバイル フレンドリーではありません。」を表示させない方法】
PCのみで、スマホサイトがないのですが、ヘッダーに下記ソースを記述しても特に問題ありませんか？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ttps://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ja
PCのみのサイトなので「ページがモバイル フレンドリーではありません。」とGoogle検索結果に表示されているのですが、
この表示を消したいのです。
ttp://kino-interior.com
このサイトはスマホサイトがありませんが、<meta name="viewport"~の記述があります。
Google検索結果では「ページがモバイル フレンドリーではありません。」が表示されていません。
この表示を無くす方法を知りたいのですが、手法をご存知の方おられますか？ 訂正。
Googleでログインした場合のみ表示されますが、その話とは別に
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これを入れても入れなくても特に問題ないですか？ >>217-218
・まず、スマホ対応のために以下のコードを入れるのは正しい
<meta name="viewport" content="width=device-width, initial-scale=1.0">
・これを入れても入れなくても特に問題ないですか？
入れないとめちゃくちゃ見づらい
俺は問題があると思うが、100%PCからしか見ないサイトなら問題はない
・Google検索結果
表示順位は下がる
入れない理由はさっぱり分からないが、
モバイルには見せたくない等の理由があるならまぁいいんじゃないかな >>217
PCのみでスマホ用がないんならモバイルフレンドリーじゃないんだからその通りだろ
逆にモバイルフレンドリーである(モバイルフレンドリーではないの表示がない)ならスマホ用がある
>Google検索結果では「ページがモバイル フレンドリーではありません。」が表示されていません。
そのサイトはお前のサイトか？
それなら人に聞く必要なくない？
お前のサイトじゃないなら表示されないのは当たり前
その表示はサイト所有者にしか表示されないからな bootstrap使うためには結局jqueryとcss HTMLの知識が必要じゃないですか？ >>221
native bootstrapもあるからjQueryはなくてよい
htmlとcssなんて中学生でもできるんだからそれくらいやれ
キミが小学生なら今からがんばろう <html>と<body>、この2つの間にインデントは付けますか？付けませんか？ >>224
なるほど、ありがとうございます
どういう時に使い分けてますか？ >>220
IE残って欲しいの？
そうならないようにEdgeが必要なんでしょう
誰もがChromeをインストールするわけじゃないんだから IEからの移行でEdgeが流行ればもう少しこの界隈は救われるかと思ったけど、移行失敗でEdgeという要素が増えただけ それを成功させるためにChromiumベースにするんだろう
OS標準で最新ブラウザを搭載するのは
ユーザーにとっても重要なことだし
ビジネス的にリターンが見込めないならば
開発コストを減らす方が重要
せっかくOSSとして落ちてるんだからバンバン利用しなきゃ >>220
いや、だから下に訂正って書いてるじゃねーか
ちゃんと読んでからレスつけろアホ ■ このスレッドは過去ログ倉庫に格納されています
