質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

981閲覧

【CSS】コードが同じなのに講師とChromeでの表示結果が異なる

daretohaiwan

総合スコア5

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/17 07:25

現在、テックアカデミーの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
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/03/17 08:53 編集

こっちで講師のコード再現してみても講師の表示通りにはならないんですけど テックアカデミーがやらかしてませんかねこれ・・・。
miyabi_takatsuk

2021/03/17 08:27

テックの方のウィンドウUIがかなり古いmacOSのものなのも気になりますね。 なにかやらかしてそうです。 (UIは変えれるはずだからなんとも言えないが)
miyabi_takatsuk

2021/03/17 08:29

Lhankor_Mhyさん > そのリンクの質問の内容も踏襲させて回答修正していきます。
daretohaiwan

2021/03/17 09:02

ありがとうございます!
guest

回答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
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sousuke

2021/03/17 08:46 編集

自分のブラウザーで「:only-child」でGoogle検索したらこの質問↑が上位にくるのが逆にすごい哀愁漂う… と思ったらほかの質問もある(検索で出る)な。https://teratail.com/questions/222851 テックアカデミー…
miyabi_takatsuk

2021/03/17 08:47

実は、teratailって、ソースコード拝見したら感じますが、 SEOガッチリやってるんですよね・・・。 スキームタグ、適切に使ってるし。
K_3578

2021/03/17 08:50

2016年の動画だから古いってのはありますけどそもそも <!doctype html って基本のキ以前の問題だと思うんですが・・・。
miyabi_takatsuk

2021/03/17 08:53

2016年・・・。 Web界隈ではいい感じに境目あたりな年数ですね。 そういうことか。 基本がなってないものをいつまでも教材に使うのはいかんですよね。 動画更新せんのか、テック・・・。
K_3578

2021/03/17 08:59

推測に過ぎませんけどあくまでyoutubeで公開してる内容だからあんまり気にしてないのかもしれませんね・・・。後、初学者向けすぎて動画が間違ってることに気づいてる人が少ないのかも。 前にteratailの回答丸パクリして騒ぎになったこともあるのにテック何やってるんですかね・・・。
daretohaiwan

2021/03/17 08:59

ありがとうございます。みなさんよく同じ質問を見つけられますね!すごいです! どうやって見つけ出しているんですか?
miyabi_takatsuk

2021/03/17 09:02

検索キーワードの選出の仕方かと。 みなさん、仕事などで、調べまくった経験から、 答えに辿り着きやすい検索の仕方を身につけてるのかと。 質問者さんもどうか、調査力を磨いていっていただければ幸いです。
m.ts10806

2021/03/17 10:02

リファレンスの類でない限り必ず裏を取る習慣がついているからだと思います。記事の投稿日時はもちろん(それもアクセス日時を出している詐欺的なやり方してるところもあるので注意)、コードの書き方や機能の使い方から「これは正しいのか」をドキュメントで裏を取ったり、自身で検証しているうちに適切なキーワードも見えてくるようになります。
K_3578

2021/03/31 04:56

(かなり前にコメントしたはずなんだけど送信されていなかったようなのでし直しておきます 通知邪魔だったらすいません) 自分は、ベテランって程経験が有る訳でないので、そんな未熟者の自分のコツとしては 「とにかくキーワードを切り分ける」ですかね。 初心者がありがちなのは自分の起こったことをそっくりそのまま調べがちなので、 それぞれの作った変数名等が含まれていると欲しい解はヒットしづらいです。(それでも 近しいところは探してくれるのでGoogle先生有能すぎる) プログラミングに限らず物事は調べる力が大事なので経験の積み重ねによって どんどん磨いてください。調べる力は最強の武器です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問