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 >>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
いや、だから下に訂正って書いてるじゃねーか
ちゃんと読んでからレスつけろアホ >>222
HTML CSSはやってるんだけど暗記科目過ぎて全く覚えられん 特にCSSの要素多すぎ >>233
全然多くない
普通に暗記できるレベル
九九以下 そもそも大半使わんからな
アニメーション関係はややこしいけど使う時にどうせもう一回調べ直す cssは覚えるもんじゃないよ
気づいたら覚えてる
九九と一緒、気づいたら60の段くらいまで言えるようになってる ゆとり以降のガキって、マジで1桁の九九しか覚えないらしいな
26×31とかの問題でたら、もしかしてひっ算とかすんのか？
非効率 ゆとりはインド式かけ算を習わないのか？
親に聞いてもインド式カレー？とか言ってたし 少なくとも戦後の日本の学校で
9x9以降を覚えさせる教育はしてないな
中学受験が過熱してた90年前後は
3.14の段と、11〜19までの平方数は覚えてただろうけど 今の時代なら15x15(FF)覚えさせればどうだろう？
奴隷化がスムーズですよ経団連さん >>249
ゆとりって言われるだけだからあまり年寄り扱いしないほうがいいぞ
ゆ・と・り♪ 今の若者ってゆとりじゃないらしいな
この間、2ちゃんで大学生を、最近のゆとりは〜とか言ってバカにしたら、おじさん逆に叩かれちゃった >>250
加齢臭プンプンでワロタｗｗｗｗｗｗ
こんなスレに書き込む前に頭部のお手入れからしろよな＾＾ cssで属性指定してn番目、ということは可能でしょうか？
nth-of-typeは要素のn番目しか指定できないようです
jsでなんとかするしか無いでしょうか ゆとり世代は20代後半ぐらいだからな
それより下のことをゆとりと言うのはまじでおっさんかじじいだけだね >>254
[foo="var"]:nth-child(n) >>250
そういやお前いい加減結婚したの？
ゆとりの俺の子供はもう小学生だよ？
まだ童貞つらいてるの？ >>256
ダメでした
記述間違ってますか？
http://jsfiddle.net/sjpemn83/1/
[class="osaka"]:nth-child(2){
background: red;
} ゆとりじゃなくて無能か、ゴメンな
>>256
はNG
>>258
[class="osaka"]:nth-of-type(4){
background: black;
} >>259
ありがとうございます、うまく動きました でも何でclass指定だと要素扱いのような挙動になるのでしょうか
仕様ですか ■ このスレッドは過去ログ倉庫に格納されています
