tapio

2020/11/24 23:03

66回答

HtmlとCSSをつかって、webサイトを作っています(学校の課題) その時、タグかぶりを防ぎたかったために、 CSSを利用して下記のように O2 { font-size: 9mm;

HtmlとCSSをつかって、webサイトを作っています(学校の課題) その時、タグかぶりを防ぎたかったために、 CSSを利用して下記のように O2 { font-size: 9mm; padding: 1rem 2rem; border: 3px solid #000; } このようなタグを作ってみたのですが、 ここで質問です。 htmlファイル内に <style></style> これで囲んで入力した際はちゃんと反応してくれました。 しかし(コードがごちゃごちゃになり制入りしたかったため) ファイルを別にcssファイルを作り、そこに同じコードを書き込み、 <link rel=“stylesheet” href=“style.css”> を調べたやり方の通り<head></head> の間に上記のコードを入力したら、反映されませんでした。 対処法を教えてくださいお願いしますm(__)m

HTML、CSS | プログラミング・26閲覧

ベストアンサー

0

dot********

カテゴリマスター

2020/11/25 8:52

大昔のIEみたいな話題ですね。 独自定義のDOM要素にスタイルが効く、というのがそもそもブラウザのバグに近いです。 ブラウザの違いや、バージョン変更ですぐに使えなくなりますので、やめたほうがいいですよ。 「タグかぶり」という言葉はじめて聞きました笑 クラスを組むか、「タグかぶり・クラスかぶり」を防ぎたかったらSASS（SCSS）を使うか、とにかくもう少しオーソライズされた方法をとりましょう。 クラス名をシンプルにしたければ、SASSの階層記述がとてもよい解決になると思います。

tapio

質問者

2020/11/25 10:41

タグかぶりと表現したのは、 h2でcssを設定していた際、h2で設定するのが少し不便だなと感じたためで、その際に「じぶんでタグを指定すればいいのではないか」と好奇心でやってみたら成功知ったっていうだけなんですよね

その他の回答（5件）

0

nic********

2020/11/25 20:28

タグは自分で作るようなものではない。 どうしても新しいタグを作りたいなら、最低限ブラウザを自作するのは必須。加えて、国際会議に出てAppleやGoogle、Microsoftに国際標準として認めさせる必要もあるな。 要するにアプローチからして全然間違っている。

0

eos********

カテゴリマスター

2020/11/25 9:31

<link rel=“stylesheet” href=“style.css”> ↓ <link rel="stylesheet" href="style.css"> パスが合っているなら後はキャッシュくらいかなぁ。

0

ama********

カテゴリマスター

2020/11/25 1:47

>HtmlとCSSをつかって、webサイトを作っています(学校の課題) >ファイルを別にcssファイルを作り、そこに同じコードを書き込み、 ><link rel=“stylesheet” href=“style.css”> >を調べたやり方の通り<head></head> >の間に上記のコードを入力したら、反映されませんでした。 下記サイトでCSSの基本的な書式を、CSSをテキストエリアに入力して検証できるようです、テキストエリアの下の[検証する]ボタンをクリックして下さい。 W3C CSS 検証サービス https://jigsaw.w3.org/css-validator/#validate_by_input

0

ybb********

カテゴリマスター

2020/11/24 23:42

oza********さん >･････反映されませんでした･･･････････ ソース全体を見ていないので何とも言えないが、 考えられる原因。 １．ファイル style.css が同じフォルダに無い。 ２．ソースの記述に誤りがある。 3．その他

0

yoy********

カテゴリマスター

2020/11/24 23:31（編集あり）

ファイルの断層はあってますか？ <link rel=“stylesheet” href=“style.css”> ↑ この場合、index.htmlが入っているフォルダ内に「style.css」があることを指します。 もし、index.htmlが入っているフォルダ内に「css」というフォルダがあって、そのフォルダ内に「style.css」がある場合は、「href=“css/style.css”」になります。