Q&A
https://teratail.com/questions/181932
現在、テックアカデミーのYouTubeでCSSの基礎を学んでいます。
該当の動画の5:15あたりのところで、
講師と同じソースコードなのに、Chromeでの表示が異なっている状況です。
どちらが**実行結果として正しいか教えてください。**また、なぜ違う結果になっているのかを教えてください。
多分、CSSの最後のonly-childのところがで実行結果が食い違っているのだと思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>構造的な擬似要素の練習</title> 8 <link rel="stylesheet" href="style.css"> 9</head> 10<body> 11 <ul> 12 <li>The first child of ul.</li> 13 <li>2nd child.</li> 14 <li>3rd child.</li> 15 <li>4th child.</li> 16 <li>The last child.</li> 17 </ul> 18</body> 19</html> 20
CSS
1body { 2 padding: 1% 25%; 3 font-family: sans-serif; 4} 5ul { 6 margin: 25px auto 0; 7 padding: 12px; 8 border: 2px dotted grey; 9 list-style-position: inside; font-size: 1.5em; 10} 11li { 12 margin: 0; 13 padding: 15px; 14 border-bottom: 2px solid #224a6b; 15} 16/*擬似要素を使うと*/ 17:only-child { 18 background-color: tomato; 19}
環境：Intel MacbookのVSCode
こっちで講師のコード再現してみても講師の表示通りにはならないんですけど
テックアカデミーがやらかしてませんかねこれ･･･。
テックの方のウィンドウUIがかなり古いmacOSのものなのも気になりますね。
なにかやらかしてそうです。
（UIは変えれるはずだからなんとも言えないが）
Lhankor_Mhyさん >
そのリンクの質問の内容も踏襲させて回答修正していきます。
ありがとうございます！
回答1件
0
ベストアンサー
講師さんの方は下記記載がありませんね。
それの影響でしょう。
html
1<head> 2<!-- 他行は省略 --> 3 <meta http-equiv="X-UA-Compatitle" content="IE=edge"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5</head>
また、講師さんの方は、<!doctype htmlと、>が抜けています。
上記の<meta name="viewport" content="hogehoge">の記述は、レスポンシブレイアウト時には、特に重要な記述のため、
質問者さんのコードが正しいと言えます。
また、<!doctype htmlの不足した記述も、正しいCSS解釈の妨げになっている可能性が大いにあります。
追記（質問修正依頼コメント蘭のやりとりから原因を考察）
Lhankor_Mhyさんが提示してくださった、
HTML - only-childがHTML全体に反映されてしまう。｜teratail
においても、質問者さんと同じ状況で悩まれているものとなっております。
また、
K_3578さんがおっしゃる通り、
講師さんと同様のHTMLコードでも、表示に食い違いが起きるようです。
（上記質問内においても、質問者さんは同様の現象を訴えられていますね）
そして、講師さんのウィンドウUIを見るに、
かなり古いmacOSのものとお見受けします。
以上から、考えるに、
テックアカデミー側の環境が古すぎるため、CSS解釈が異なるGoogle Chromeを使用している可能性が浮上してきました。
追記での可能性が黄金のような気がします。
投稿2021/03/17 07:37
編集2021/03/17 08:39総合スコア9555
同じ質問あって草なんだ…
https://teratail.com/questions/181932
テックアカデミー・・・・
自分のブラウザーで「:only-child」でGoogle検索したらこの質問↑が上位にくるのが逆にすごい哀愁漂う…
と思ったらほかの質問もある（検索で出る）な。https://teratail.com/questions/222851
テックアカデミー…
実は、teratailって、ソースコード拝見したら感じますが、
SEOガッチリやってるんですよね・・・。
スキームタグ、適切に使ってるし。
2016年の動画だから古いってのはありますけどそもそも
<!doctype html って基本のキ以前の問題だと思うんですが･･･。
2016年・・・。
Web界隈ではいい感じに境目あたりな年数ですね。
そういうことか。
基本がなってないものをいつまでも教材に使うのはいかんですよね。
動画更新せんのか、テック・・・。
推測に過ぎませんけどあくまでyoutubeで公開してる内容だからあんまり気にしてないのかもしれませんね･･･。後、初学者向けすぎて動画が間違ってることに気づいてる人が少ないのかも。
前にteratailの回答丸パクリして騒ぎになったこともあるのにテック何やってるんですかね･･･。
ありがとうございます。みなさんよく同じ質問を見つけられますね！すごいです！
どうやって見つけ出しているんですか？
検索キーワードの選出の仕方かと。
みなさん、仕事などで、調べまくった経験から、
答えに辿り着きやすい検索の仕方を身につけてるのかと。
質問者さんもどうか、調査力を磨いていっていただければ幸いです。
リファレンスの類でない限り必ず裏を取る習慣がついているからだと思います。記事の投稿日時はもちろん（それもアクセス日時を出している詐欺的なやり方してるところもあるので注意）、コードの書き方や機能の使い方から「これは正しいのか」をドキュメントで裏を取ったり、自身で検証しているうちに適切なキーワードも見えてくるようになります。
(かなり前にコメントしたはずなんだけど送信されていなかったようなのでし直しておきます
通知邪魔だったらすいません)
自分は、ベテランって程経験が有る訳でないので、そんな未熟者の自分のコツとしては
「とにかくキーワードを切り分ける」ですかね。
初心者がありがちなのは自分の起こったことをそっくりそのまま調べがちなので、
それぞれの作った変数名等が含まれていると欲しい解はヒットしづらいです。(それでも
近しいところは探してくれるのでGoogle先生有能すぎる)
プログラミングに限らず物事は調べる力が大事なので経験の積み重ねによって
どんどん磨いてください。調べる力は最強の武器です。
あなたの回答
tips
プレビュー
