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 >>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指定だと要素扱いのような挙動になるのでしょうか
仕様ですか <!DOCTYPE html>
で書き始めた場合、ブラウザはhtmlのバージョン幾つで解釈するのでしょうか
常に最新でしょうか、それともそれっぽい感じで解釈してくれるのでしょうか >>263
ブラウザのバージョンによる。
例えばIE6だとHTML5に対応してないから
5で解釈するわけがない >>266
Chromiumユーザーよりかは多いぐらいだよ
で、それが今の話となにか関係あるの？ >>264
5.0、5.1どちらでしょうか？
>265
自分のサイトですが、IEのバージョンと割合です
11 93%
9 3%
10 1.4%
8 1.15%
7 0.29%
6 0.01%
5 0.00%
ガラケー以下です、考慮しなくて良さそうです
>>267
＞Chromiumユーザーよりかは多いぐらいだよ
google analyticsでChromiumかどうかは、
どこで判別するのでしょうか
＞で、それが今の話となにか関係あるの？
多数のユーザーに不満がない環境を提供したいために質問しています
0.01%のための環境構築は不要でしょう >>270-271
そんなもん
PCサイト
11 94.74%
9 3.06%
8 1.02%
10 0.98%
7 0.2%
6 0.01%
5は無し
スマホゲーサイト
11 75.81%
9 15.04%
8 8.85%
10 0.29%
5-7無し
まぁIE6を引き合いに出すのは無いわ 昔からたいていのブラウザはhtmlのバージョン厳密にチェックしてたわけじゃなく対応してるタグであればその通りに表示してたわけだし
<!DOCTYPE html>はhtml5以降という意味より標準モードを担保する役目の方が強い気がする 思った以上に脱IE進んでたのね
IEは全部捨てて良いという結論に達したわ
ちなみにIE自体は全体の8%
11.0 95.0984559%
8.0 2.5499363%
9.0 1.4591302%
10.0 0.7224819%
7.0 0.1133305%
6.0 0.0424989%
7.0b 0.0141663% https://netmarketshare.com/browser-market-share.aspx
1. Chrome 63.60
--- IE以下全部切り捨て --
2. Internet Explorer 11.19%
3. Firefox 10.00%
4. Edge 4.34%
5. Safari 3.82%
6. Opera 1.57% サイトごとにちゃんとアクセス解析して調べないとね
BtoBのサイトと、BtoCのサイトではブラウザの割合もまた変わってくるし >>279のおかげで思い出した
HTMLのバージョンが何と解釈されるかって話に
IE6のシェアがどう関係あるの？ >>265
＞例えばIE6だとHTML5に対応してないから
＞5で解釈するわけがない
0.0x%の特殊なユーザー環境を前提に回答するアホがいたから話がややこしくなった IE8は今でも企業内の多くのシステムで必須ブラウザとして使われているからなあ ページ全体で基底となる文字サイズや行間などフォント関連の初期設定は
html{}とbody{}どちらに定義するのが適切ですか？ ■ このスレッドは過去ログ倉庫に格納されています
