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

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

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

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

CSS

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

Q&A

9回答

567閲覧

HTML&CSS CSSが適用されないです

PGPGPG25

総合スコア12

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/04/21 07:57

編集2020/04/22 00:48

現在、ウェブ制作の勉強をしています。
しかし、
HTMLとCSSがつながりません。
どうしてでしょうか?

<HTMLコード>

<!DOCTYPE html> <html> <head> <title>test1</title> <link rel="stylesheet" href="test1.css"> </head> <body> <div class="title"> <h1>Cafe~clover~</h1> </div> <ul> <li>ホーム</li> <li>お知らせ</li> <li>お問い合わせ</li> </ul> <h2>おすすめのメニュー</h2> <h3>本日のパスタ</h3> <img src="https://i.pinimg.com/originals/ec/15/05/ec15052dbbc3cb3cc1561d3d6222c32f.jpg"> <p>旬の食材を生かして、当店一番の人気メニューです。</p> <p>ランチタイムだけでなく、カフェタイムにも注文いただけます。</p> <p>900円(税別)</p> <a href="#">ご予約はこちらから</a> </body> </html>

<CSSコード>
.title h1{
font-weight:bold;
color:#663300;
}

ファイルはこんな感じで保存しています!
イメージ説明

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

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

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

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

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

m.ts10806

2020/04/21 08:00

コードはマークダウンの機能を利用してご提示ください。 https://teratail.com/questions/238564 また、この手の問題は原因も対策もほぼ出尽くしています。 何かしら調べたり試したりされましたか?具体的に記載してください。
hoshi-takanori

2020/04/21 08:52

エディタは何をお使いですか? 実はファイル名が test1.css.txt とか…。
PGPGPG25

2020/04/22 00:46

サブライムテキスト を使っています!
tak_subaka

2024/02/14 01:57 編集

CSSが適用されない場合は、以下の通りです。 1.リンク先が間違えている 特によくあるのがCSSファイル名のスペルミスです。もしスペルが間違えている場合は、修正することで解決できることがあります。またフォルダ内(例えば、フォルダ名がCSSの場合)にCSSがある場合、適用されません。その場合は、 <link rel="stylesheet" href="./css/test1.css">で解決することがあります。 2.ブラウザをキャッシュ もしスペルが一致しているのに、CSSが適用されない場合、ブラウザのキャッシュが溜まっている可能性があります。縦3つの…から設定を開く→履歴のメニューから履歴を開く→閲覧履歴の削除を開く→履歴の削除のポップアップ画面が出るので、データを削除を選ぶ。(履歴を削除したくない場合やパスワードごとも削除したくない場合は、Chromeの場合、キャッシュされた画像とファイルとCookieとほかのサイトデータにチェックを入れる。(Googleアカウントへのログイン状態は削除されることはありません。Google以外のアカウントのログイン状態は削除される可能性があります。不安な場合は、キャッシュされた画像とファイルのみにチェックを入れてください。))→ブラウザを再起動する。(Chromeの場合) これで解決できることがあります。 3.パソコンを再起動 それでも解決できない場合は、パソコンを再起動しましょう。これによりブラウザに発生したエラーが解決することがあります。以下の手順です。 Windowsの場合:Windowsのロゴ(スタート🪟)をクリック。→電源アイコンをクリック。→再起動をクリック。これで再起動がかかります。 Macの場合:左上のAppleのロゴ(🍎)をクリック。→再起動をクリック。→再起動をするかのダイヤログウィンドウが出てくるので、再起動をクリック。これで、再起動がかかります。 Linux(例:Ubuntu)の場合:右上の歯車(⚙)をクリック。→一番下のシャットダウンをクリック。→シャットダウンのダイヤログウィンドウが出てくるので、左の再起動クリック。これで再起動がかかります。 ChromeOSの場合:右下の時計をクリック。→電源をクリック。表示されたオプションから再起動をクリック。これで再起動がかかります。 4.別のブラウザを利用 もしブラウザがChromeの場合は、edgeやSafariなどのブラウザで試してください。ただし、ブラウザによっては、対応していない機能があるので、注意してください。 5.シークレットウィンドウ(ゲストモード)を利用 シークレットウィンドウでは、ブラウザやログイン情報を保存されることはありません。ブラウザを開く→3つの…をクリック→新しいシークレット ウィンドウを開くをクリックします。すると、シークレットウィンドウが開くはずです。(Chromeの場合) これでCSSが適用されるはずです。 それでも問題が解決しない場合は、再度返信へお知らせください。
guest

回答9

0

HTMLファイルと、
CSSファイルは、同じフォルダ内に置いていますか?

<link rel="stylesheet" href="test1.css">
↑こちらの記述はHTMLファイルとtest1.cssが同じフォルダにあるときの記述です。

もし、「css」フォルダ内にtest1.cssがあるのであれば
<link rel="stylesheet" href="css/test1.css">
↑と書いてください。

投稿2020/04/21 08:02

編集2020/04/21 08:03
new1ro

総合スコア4528

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

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

PGPGPG25

2020/04/21 08:07

回答ありがとうございます。 原因はこれではないようです。 CSSが適用されませんでした。。。
PGPGPG25

2020/04/21 08:08

フォルダーは同じところに入れています。
new1ro

2020/04/21 08:23 編集

ファイル名が、本当に「test1.css」か確認する..、くらいでしょうか test1.css (全角文字が紛れ込んでいる) test1.ccs (拡張子が間違い) testl.css (1じゃなくて小文字のエル「l」) test1.CSS (拡張子が大文字) あとは、test1.cssファイルの読み込み権限が、 自分以外にも付与されているかを確認してもいいかもしれません。
guest

0

なんか.cssぽくないファイルの見た目してますよね。

test.cssをcmd+iしてファイルの情報を見た時
種類にCascading style sheetて書いてありますか?
一般情報:の中です。
イメージ説明

投稿2021/11/19 19:35

recal

総合スコア1128

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

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

0

見た感じcssとhtmlは大丈夫そうですが、google chromeの方に原因があったりしないでしょうか。
「google chrome css 読み込まない」で検索するとブラウザ側の設定だったりキャッシュの消去についてだったりいろいろ出てきますよ。

投稿2021/11/19 01:29

nak_ka

総合スコア2

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

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

0

私が試したところ、ちゃんと適応されております。

<head>のところに ```html <meta charset="UTF-8"> ``` を追加してみてください。 それでも、できない場合は 多分同じ名前のファイルがあるので、フォルダを作成してその中にtest1.htmlとtest1.cssを入れてみてください。

投稿2021/06/27 00:30

mogmo

総合スコア13

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

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

0

ディレクトリの構造が分からいので何とも言えないところはあるのですが、htmlファイルとcssファイルの記述はこれで全てでしょうか?
もし他にも記述があるのであれば、別のcssのコードが邪魔をしている可能性も考えられます。

投稿2021/02/11 09:18

ryuuji_n

総合スコア10

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

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

0

ディレクトリ構造はどうなっていますか?

パスが間違っているものと思われますので、ディレクトリがどうなっているか分かればみなさん回答がしやすいと思います。

投稿2020/12/20 02:25

rinrin1137

総合スコア87

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

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

0

ご提示いただいたコードで、サンプルサイトを作りました。
正常に動作しましたよ。

https://ki-hi-ro.com/sample/css-not-apply

ソースコードのダウンロードはこちらからできます。
https://github.com/ki-hi-ro/css-not-apply
イメージ説明

投稿2020/11/23 10:05

編集2020/11/23 10:06
khiro

総合スコア43

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

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

0

ファイルの拡張子が表示されていなくて別のファイル形式になっているとか。

【Windows10 - ファイルの拡張子を表示/非表示にする - PC設定のカルマ】
https://pc-karuma.net/windows-10-show-explorer-file-name-extension/

【Macでファイル名拡張子を表示する/非表示にする - Apple サポート】
https://support.apple.com/ja-jp/guide/mac-help/mchlp2304/mac

投稿2020/04/21 08:57

kei344

総合スコア69583

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

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

0

<link rel="stylesheet" href="test1.css"> hrefのファイルを相対パスで指定してあげると読み込むと思われます。

htmlファイルとcssが同階層であれば

href="./test1.css"

階層が一つ変わったら

href="../test1.css"

投稿2020/04/21 08:00

koinoue

総合スコア7

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

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

PGPGPG25

2020/04/21 08:07

回答ありがとうございます。 原因はこれではないようです。 CSSが適用されませんでした。。。
koinoue

2020/04/21 08:14

考えられるのはファイル名かファイルパスですね。 どうしても読み込まないのならheadタグ内にCSSを記載する方法もあります。
PGPGPG25

2020/04/21 08:22

回答ありがとうございます。 今調べました。 そうみたいですね。。。 ただいまは基礎を勉強している段階なので、 できれば、このまま適応できるようにしていきたいと考えています。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問