CSSの外部ファイル使用に関する疑問
- CSSの外部ファイル使用に関しての疑問について
- ビスタorEMエディターを使用してCSSファイルを作成し、ブラウザ上で表示されない問題が発生
- CSSの適用結果が予想と異なる状況で、原因と解決策についてのアドバイス求む
- ベストアンサー
CSSの外部ファイル使用に関して。
ビスタorＥＭエディターを使用しています。 ～～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; } このようにテキストエディタも２つに分けて編集しデスクトップへ 保存してブラウザ上へ出力させたのですが文字の色が表示できません。 表示できないというよりもblueで組んだ際にはblueとなりblueをredにした際には 黒になったり、デスクトップ画面上で新規にフォルダをつくそこにhtmlファイルを 入れてその後ブラウザ表示をすると文字がきちんと赤になっていたり 意味がわからず、ずっと悩んでいます。 分かりにくい質問ですいませんどうすればそうならないのか教えていただければ幸いです。 また、毎回アイコンをグーグルクロームのブラウザへドロップして検証するのが めんどうになってきたので、そうせずにブラウザへ直で表示できる方法も教えていただけると嬉しいです。
- to-ya-blog
- お礼率3% (5/153)
- SE・インフラ・Webエンジニア
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
デスクトップに保存する時に、専用のフォルダを作ってHTMLファイルとCSSファイルをその同じ フォルダに格納すればちゃんと表示されるようになります。 （画像を入れる場合も同じフォルダに入れる） また、別々に保存する場合は <link rel="stylesheet" type="text/css" href="mystyle.css">の[href="]の後ろにCSSファイルの パス（格納場所）を書き込んでやればCSSを反映した表示ができるようになります。 グーグルクロームが既定のブラウザになっていれば、HTMLファイルをダブルクリックするだけで 表示されるはずです。
関連するQ&A
- 外部cssがうまくできません。
外部cssがうまくできません。 よろしくお願いいたします。 ホームページ作成初心者です。 Mac OS X Snow Leopardです。 デスクトップに Homepageというフォルダを作成しました。 そのHomepageフォルダの中に、 index.htmというファイル -----------以下内容------- <html> <head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> 背景を青くしたい </Body> </html> ----------------------------------- とstyle.cssというファイル ---------以下内容----------- body {background-color: blue} ----------------------------- を テキストエディットで作成しました。 背景を青くしたいのですが、なりません FirefoxでもSafariでもなりません。 何が間違っているのでしょうか？ 教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- Mac
- 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
- 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
- 外部CSSがうまく表示されません
下記ファイル(index.html・sld01.html・sld02.html） について相互にリンクし、外部CSSで制御したいのですが、うまくできません。 1.index.html→sld01.html（CSS反映せずdefault表示）さらにsld02.htmlへはリンク切れとなる。 2.sld01.html→sld02.htmlの場合、sld01.htmlでの文字色が a:visitedになりsld02.htmlジャンプでCSS反映せずdefault表示となりindex.htmlへはリンク切れとなります。 どなたかご教授いただけませんでしょうか？ index.html <html> <head>省略 <link href="/styles-site.css/navi.css" rel="stylesheet" type="text/css"> <link href="/styles-site.css/waku.css" rel="stylesheet" type="text/css"> </head> <body> <table>省略 <div> <a href="index.html">top</a> </div> <div> <a href="../sldset/sld01.html">gallery</a> </div> </table> </body> </html> sld01.html・sld02.html(slid.01へ) <html> <head>省略 <title>gallery</title> <link href="/css/base.css" rel="stylesheet" type="text/css"> </head> <body> <TABLE> <TBODY> <TABLE> <TBODY> 省略（java) <font size="-1"> <a href="/contents/sldset/sld02.html">slid.02へ</a></font> </TBODY> </TABLE> <font size="-1"> <a href="/contents/index/index.html">元のページに戻る</a></font> </TBODY> </TABLE> </body> </html> base.css(一部省略） a:link { color: #FFCC33; text-decoration: none; } a:visited { color: #CCCCCC; text-decoration: none; } a:hover { color: #66CCFF; text-decoration: none; } a:active { color: #FF3366; text-decoration: none; }
- ベストアンサー
- その他（プログラミング・開発）
- 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
- 外部ファイルによるCSSにおいて
参照側の <link rel="stylesheet" type="text/css" href="x.css" title="xxxx"/> においてtitleをつける意味と使い道を教えてください
- ベストアンサー
- HTML
- CSSを外部ファイル
CSSを外部ファイルで作成して <link rel="stylesheet" href="○○○.css" type="text/css">で参照したいのですが外部ファイルは H1{color : #000000;} を反映させたいときこれだけ書けばいいのでしょうか。サイトの説明を読んでもよくわかりません。
- ベストアンサー
- その他([技術者向] コンピューター)
- 外部のスタイルシートが働かない
HTML文書に外部からのスタイルシートを持って来て使いたいのですが、全く働きません。 スタイルシートは次のようなもので、"mystyle.css" としてHTMLと同じフォルダーに入れてあります。 <style> body{ background-color:gray; color:black; } .title{ font-size:14pt; color:blue; } a{ color:yellow; } .prompt{ color:pink; } </style> そしてHTML内では <link rel="stylesheet" href="mystyle.css"> としてリンクさせています。 <body> も <a>も class="title" としてクラス名を付けたものも、全く影響されていません。 何処がおかしいのか、詳しい方、ぜひ教えてください。お願いします。 ちなみに、このスタイル部分をHTMLの<head>内に貼り付けると期待通りになります。
- ベストアンサー
- HTML
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
- 外部ファイルのCSSを適用するには？
CSS超初心者です。 ぜひ教えてください。 現在作成しているhtmlに簡単な背景をcssで外部ファイルとして読み込むようにしたいのですが本を見ながらやっているのですがうまくできません。 勉強が足りないといったらそれまでなのですがどうか教えてください。 背景にはbackground.gifという小さな画像を敷き詰めたいのですが このソースだけでいいのでしょうか？ ●cssソース（back.css） body {background : url("http://fiesta2.com/background.gif") ; background-repeat : repeat; } 続いてback.cssを読み込ませたいhtmlのソースです。 ●htmlソース <html> <head> <link rel"stylesheet" href="back.css" type="text/css"> <meta http-equiv="content-type" content="text/html;charset=x-sjis"> <meta name="generator" content="Adobe GoLive 5"> <title>Welcome to FIESTA!</title> </head> <body> <div align="center"> <table cool width="489" height="758" usegridx usegridy showgridx showgridy gridx="16" gridy="16" border="0" cellpadding="0" cellspacing="0"> ～中略～ </div> </body> </html> 専門家の方にはささいな質問かもしれませんが 超初心者のためよろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
お礼
なぜかできました。 ありがとうございます。