htmlとcssがリンクできない?原因を教えてください

このQ&Aのポイント
  • htmlを独学で学んでいますが、cssを作ってhtmlとリンクさせようとしています。しかし、うまくリンクできません。
  • 別の簡単なhtmlにもcssをリンクさせてみましたが、それでもうまくいきません。
  • h1タグの文字色を赤に変えたいのですが、ブラウザで開いても黒色のままです。原因が分かる方、ご教示ください。
回答を見る
  • ベストアンサー

htmlとcssがリンクしません

htmlを独学で学んでいます。いま、cssを作ってhtmlとリンクさせようとしているのですが、できません。もうひとつ他に簡単なhtmlをかいて、そこに簡単なcssをリンクさせようとしたのですがそれでもうまくいきません。以下がぼくが作った簡単なhtmlとcssです。 【html】 <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title> aaa </title> <link ret=“stylesheet” href=“style3.css”> </head> <body> <h1> 壁 </h1> <p> htmlとcssがうまくリンクしなくてこまっている。 </p> </body> </html> 【css】 h1{color: #ff0000;} h1のところを赤い文字にしたいのですがブラウザで開いても黒文字のままです。 なにか原因が分かる方はご指摘お願いします。

  • HTML
  • 回答数4
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • clara3
  • ベストアンサー率44% (4/9)
回答No.4

(チェック) <link rel=“stylesheet” href=“style3.css”> ○ <link rel="stylesheet" href="style3.css">

uepon_jp
質問者

お礼

解決しました!ありがとうございました!

その他の回答 (3)

  • moruwww
  • ベストアンサー率0% (0/1)
回答No.3

<link rel="stylesheet" type="text/css" href="style3.css"> で、いかがでしょうか? あとはstyle3.cssの置かれている階層とHTMLのある階層が同じかどうかもご確認ください。

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.2

<link ret=“stylesheet” href=“style3.css”> <meta charset=“utf-8”> 「"」半角になってませんよね?「"」 英数半角でShiftを押しながら2ですよ。

uepon_jp
質問者

補足

半角英数でshift+2を押しながらうってます。あと、retをrelに訂正しました。しかしまだhtmlとcssがリンクしません。

  • hitomura
  • ベストアンサー率48% (325/664)
回答No.1

× ret ○ rel

uepon_jp
質問者

補足

relになおしたのですが、まだリンクしません。

関連するQ&A

  • cssが読み込まれません。

    VScodeでhtmlの練習を始めましたが、どうやってもcssが読み込まれません。同じフォルダ内に保存してます。名前間違いもないです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法1</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>方法1:外部のCSSファイルを読み込む</p> </body> </html> CSS @charset "UTF-8"; p { color: blue; }

    • ベストアンサー
    • HTML
  • CSSが読み込めません

    今 HTML5とCSS3で個人のWebサイトを作成しており、 確認のためGoogleChromeにコピーして見てみましたが 外部CSSが全く反映されていません Windows8、保存している文字コードはどちらもUTF-8です <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" type="text/css" href="style.css"/> <meta charset="UTF-8"> <meta name="keywords" content="〇〇"> <meta name="description" content="〇〇。"> <title>〇〇</title> </head> <body> <H1>〇〇</H1> <img src="〇〇.png"> </body> </html> CSS ソース↓  body {color: red; } 何故こんな簡単なところでつまずいているのか自分でも分かりません どなたか分かる方いらっしゃいましたらご教授ください

    • ベストアンサー
    • CSS
  • phpで これは、head要素の中に、meta要

    phpで これは、head要素の中に、meta要素、title要素、link要素が入っているということなんですか? ↓ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>

    • ベストアンサー
    • PHP
  • phpでこのイコールは代入演算子ですか? <l

    phpでこのイコールは代入演算子ですか? <link rel="stylesheet" type="text/css" href="stylesheet.css"> ↑このイコールです link relにstylesheetを代入するという意味ですか? ↓他にもたくさんありますが、このイコールは代入演算子なんですか? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>

    • ベストアンサー
    • PHP
  • xhtml,css cssの取り込み

    xhtml,cssの解説書を購入し、二段にインポートする方法で「css」の取り込みをしたのですが、初心者ゆえどうもうまくいきません。下記にそのコードを載せますので、間違いをご指摘ください。 『index.html』 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html xmlns="http://WWW.W3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>test</title> <link rel="stylesheet" type="text/css" href="a.css" media="all" /> <body> <h1>秋</h1> <p> test test test </p> </body> </html> 『a.css』 @charset "Shift_JIS; @import"b.css"; 『b.css』 @charset "Shift_JIS"; h1{ text-align: center; font-size: x-large; font-family: "MS P明朝",serif; }

  • FirefoxだとCSSが利かない

    はじめまして。独学でHTMLを勉強しているのですが、"test_index.html"という 名前のファイルを作成してみました。内容は以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>TEST</title> <link href="test_style.css" rel="stylesheet" type="text/css"> </head> <body> <p class=01>TEST</p> </body> </html> CSSファイル"test_style.css"の中身に .01{color:red} とだけ書いて表示させてみましたところ、IE6とLunascapeでは問題なく赤く表示 されるのですが、Firefoxでは反映されませんでした。 低次元の質問かとは思いますが、解決策をご教示頂ければと思います。 どうぞよろしくお願いします。

  • CSSの外部ファイル使用に関して。

    ビスタorEMエディターを使用しています。 ~~index html~~ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>cssの勉強</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>見出し</h1> </body> </html> ~~mystyle.css~~ h1 { color: blue; } このようにテキストエディタも2つに分けて編集しデスクトップへ 保存してブラウザ上へ出力させたのですが文字の色が表示できません。 表示できないというよりもblueで組んだ際にはblueとなりblueをredにした際には 黒になったり、デスクトップ画面上で新規にフォルダをつくそこにhtmlファイルを 入れてその後ブラウザ表示をすると文字がきちんと赤になっていたり 意味がわからず、ずっと悩んでいます。 分かりにくい質問ですいませんどうすればそうならないのか教えていただければ幸いです。 また、毎回アイコンをグーグルクロームのブラウザへドロップして検証するのが めんどうになってきたので、そうせずにブラウザへ直で表示できる方法も教えていただけると嬉しいです。

  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • FirefoxでCSSが読み込めない。

    HPを作成中です。IEやSleipnirでは思った通りに表示されるのですが、Firefoxではスタイルシートが読み込まれていないようです。 どの部分が悪いのでしょうか。ご教示のほどをよろしくお願いいたします。 以下冒頭部分のソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title></title> </head> <body>

    • ベストアンサー
    • HTML
  • HTMLの文法チェックをするとCSS関連でエラーが出て困っています。

    http://validator.w3.org/ http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html でHTMLの文法チェックをすると, <body><style TYPE="text/css"><!-- という行があるとエラーが出ます。 実際のHTMLは外部スタイルシートを使っているのですが <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>タイトル</title> <meta name="Keywords" content="キーワード "> <meta name="Description" content="内容説明"> <link rel="stylesheet" href="./css.css" type="text/css"> </head> <body> <div id="page"> 以下略 であり,<body>タグの後ろは<div>タグなのですが,何故かそう認識されます。 スタイルシートの指定がおかしいのかと考えたのですが, いくら検索しても<head></head>間に <link rel="stylesheet" href="./css.css" type="text/css"> を入れるとしか書いてなく理由がわかりません。 ちなみにcss.cssの内容は *{} というような内容の羅列のみで,その他の情報は一切入れていません。 どこがおかしい点なのかわからず悩んでおります。 理由のわかる方いましたら是非ご教授願います。

    • ベストアンサー
    • HTML

専門家に質問してみよう