• 締切済み

CSSファイルの作り方

市販の書籍を参考にHTMLとCSSの練習を始めたのですが、 第一章で早速つまづいてしまいました。 書籍には、ファイル名の拡張子を「css」にするとCSSファイルになるとありますが、どうも私のPCではそうはなりません。 書籍にはCSSファイルは歯車のついたアイコンで表示されていますが、私のPCではウィンドウのアイコン(認識できないファイルのときのアイコンです)で表示されます。 拡張子は「CSS」になっています。 windows上でなにか設定しないとスタイルシートのファイルは認識されないのでしょうか? それともCSSファイルを使用するには、なにか別の特別なものが(ドライバのようなもの)必要なのでしょうか?

みんなの回答

回答No.2

そんなことはないですよ。 私は昔から2000年5月からHPを公開して、当初からCSSを使用しているのでXPのIE6でも使えるハズですよ。 例えば「a.css」とファイルを作成して中身に TD { COLOR:#FF0000; FONT-FAMILY:'MS ゴシック'; FONT-SIZE:12px; BACKGROUND-COLOR:#FFFFCC; HEIGHT: 18px;} .STRK { text-decoration:line-through;} と記述して、HTMLで <META http-equiv="Content-Style-Type" Content="text/css"> <LINK REL="stylesheet" TYPE="text/css" HREF="cssファイルのパス\a.css"> とCSSファイルをインクルードして、HTMLタグに <TD CLSS="STRK">あいう</TD>と記載してHTMLを開いてみてください。 文字色が赤で取消線の入った あいう が表示されませんか? 一応参考HTMLです。a.cssは下記HTMLと同じフォルダにあるので <LINK REL="stylesheet" TYPE="text/css" HREF="./a.css"> と記載しています <META http-equiv="Content-Type" Content="text/html;charset=Shift_JIS"> <META http-equiv="Content-Style-Type" Content="text/css"> <META http-equiv="Content-Script-Type" Content="text/javascript"> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="./a.css"> <TITLE lang="ja">おためし</TITLE> <SCRIPT type="text/JavaScript" Language="JavaScript"> <!-- function OnContextMenu() { return false; } document.oncontextmenu = OnContextMenu; --> </SCRIPT> </HEAD> <BODY> <DIV> <TABLE style="WIDTH: 560px" border="1" cellpadding="2" cellspacing="0"> <TR><TD CLASS="strk">あいう</TD></TR> </TABLE> </DIV> </BODY> </HTML> この場合TDタグの文字色はCSSファイルの TD に定義している COLOR:#FF0000; になるので、ここをCOLOR:#0000FF;としてみたら青文字にかわります。 文字色が赤で取消線の入った あいう が表示されない場合はCSSファイルのパスが間違っているか、CSSやHTMLの定義が間違っています。 CSSを使用したHPをローカルに名前をつけて保存して、参考にしてみるのも手です。 ※ 私のでも良いのですがHP名やURLを記載すると個人情報を記載することになり規約違反になってしまうため記載できません。

回答No.1

CSSファイルと言うか拡張子がCSSのファイルに関連づけされたデフォルトのアプリケーションがPCにインストールされていないだけだと思います。 →拡張子がbmpのファイルをダブルクリックしたらペイントが開くなどダブルクリックで開くアプリケーションがインストールされていない →確かMSのVisualStudioがインストールされていれば歯車アイコンになったと思います ダブルクリックで開けないだけでHTMLで <LINK REL="stylesheet" TYPE="text/css" HREF="cssファイルのパスとファイル"> と定義してあればブラウザでは問題なく認識されます(有効になります)。 私もVisualStudioをインストールしていませんが、CSSやJSはサクラエディタで開くように関連づけしてあるのでサクラエディタのアイコンになっていますが、そのCSSを参照しているHTMLをIE7.0(WinXP)でUpするまえにローカルで表示したり、レンタルサーバにアップしたあとにインターネットで表示しても有効になっています。

Annie0
質問者

補足

ダブルクリックをすればエディタが開くのですが、エディタのアイコンにはなっていませんし、HTMLで定義しても認識されないんです。 WindowXPとIE6では無理でしょうか?

関連するQ&A

  • CSSファイルのアイコン表示についての質問です。

     CSSファイルのアイコン表示についての質問です。  メモ帳やフリーソフトのTeraPadで保存するとき、拡張子が.cssで保存するときです。  そうすると、ファイルのアイコンが、歯車みたいなのがついてるアイコンになりますよね?  元々は、その歯車がついていました。  アイコンに、マウスをのせたりプロパティを見ると、カスケードスタイルシートとでていました。  「既定のプログラムを選択」 でメモ帳に選択してみたら、アイコンがメモ帳のアイコンに。  アイコンに、マウスをのせたりプロパティを見ると、CSSファイルとでます。  OSがvistaなので、「ファイル」のアイコンだけ変えるのはできないそうで、  拡張子がそのままなので、使えるとは思いますが、  歯車がついてる方がいいので、元の「歯車のファイル」にするやり方を教えてください。  お願いします。

  • スタイルシートが反映されません

    <link rel="stylesheet" href="style.css" type="text/css">で 外部スタイルシートの反映がされません。 このCSSファイルの中身をそのままHTMLファイルのHEAD部分に持っていったら反映されましたので、単純にリンクがうまくいっていないのか?と思うのですが・・・ ファイル名はあっているし、リンクもファイル名ではできなかったので 絶対パスで指定してみましたがダメでした。パスの指定ミスを防ぐためにファイルのプロパティを開いて、場所をコピペして最後のところに ¥をつけてファイル名を拡張子つきでくっつけましたがダメでした。 なにがいけないのでしょう・・・ いろいろと考えたり調べたりしているのですが、どうしてもわからないです。 CSSファイルはHTMLファイルと同一フォルダ内の同一階層にあります。(まだネット上に公開しておらずURLも持っていないので 個人のPCフォルダ内です)CSSファイルのアイコンはメモ帳に歯車のイラストのアイコンです。このアイコンになっていたらちゃんと CSSファイルだと思っていたのですがもしかしたら違うでしょうか? あ、HTMLファイルのHEAD部分の <meta http-equiv="conten-style-type" content="text/css" /> の書き込みもしてあります。 外部ファイル用の<link rel=だらだらだら>の後に </style>でしめてみたのですがダメでした。

  • CSS外部ファイルを作りましたが、加筆する際にファイル**.cssファイルが開けません

    CSS素人です。 外部ファイルからCSSを使おうと思い、ファイルを作成したいのですが、メモ帳に書き、保存する際に.cssという拡張子でファイル保存しました。 外部ファイルを書き加えようとしたところ、うまく開けませんでした。 『ファイル**.cssファイルを開くアプリケーションを指定してくださいとなってしまいます。』 なにが悪いんでしょうか。 ファイルを書く場合、直接いきなりスタイルシートを書き込んでいいのでしょうか。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSS今度は外部ファイル!

    前回「CSSが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない!」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル) .body{ color:#006666; font-size:30px; } ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは30px・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> HP名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか? それとも、外部ファイルの書き方がいけないのでしょうか? 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした

  • CSSがHTMLに反映しない

    CSSをはじめて使う者です。XPでIEを使っています。 解説サイトの最も簡単そうなプログラムをコピペし、 HTMLファイルと外部CSSファイルを同じフォルダ(デスクトップにあるtopフォルダ) に入れてHTMLを開いたのですが、CSSを全く読み込まず、HTMLのテキストしか表示されません。 ★HTMLデータ(top.html) ------------------------ <HTML> <HEAD> <link rel=stylesheet type="text/css" href="C:\Documents and Settings\Administrator\デスクトップ\top\top.css"> </HEAD> <BODY> <div class="selecter">文字が赤くなり、左に5pxの罫線が引かれます。</div> </BODY> </HTML> ★CSSデータ(top.css) ------------------------ .selecter { color:#ff0000; border-left:solid 5px #ff9900; } ・他のサイトにはHTMLファイルのstylesheetに""があったので付けてみたのですが、意味なしでした。 ・他のサイトの形が異なるCSSも試したのですが同様の状態だったので、HTMLのHEADの部分が怪しいと思い、ファイル名指定を"top.css"に変えたりしたのですが、意味なしでした。 ・CSSは最初メモ帳で書いたのですが、拡張子がどうしてもCSSになってくれなかった(top.css.txtになる)ので、ワードパッドで書いて保存したら、拡張子は正常にCSSになりました。ただ何故かアイコンが、プログラムが見つからない時に表示される奴になっています…。 スタート地点から躓いていて非常に恐縮なのですが、何卒よろしくお願いいたします。

  • CSS3について

    CSS3について初歩的というか、本当にお恥ずかしい質問を何点かさせてください。 自分で調べてみても初歩的すぎて(常識すぎて)わかりませんでした。 1、自分はHTML4.01とCSS2.1しか使ったことがないのですが、CSS3はHTML4.01にも使えるのでしょうか??(よく「HTML5&CSS3」という名目で本が並んでいるので、、、)CSS3とHTML4.01の組み合わせは一般的でなかったりするのでしょうか? 2、CSSファイルの頭に記述する文字コード?の「@charset "UTF-8";」、また、拡張子は「.css 」のままですか?もしそうなら、CSS3の文法さえ守っていさえすればCSS3ということでしょうか? 3、htmlに外部ファイルとしてリンクさせる場合の記述もCSS2.1と同じなのでしょうか? 質問がまとまってなくてすいません。どなたか教えていただけないでしょうか?? 宜しくお願いいたします!

    • ベストアンサー
    • CSS
  • ビルダー12 CSSファイルの関連付けについて

    こんにちは。 現在、ホームページビルダー12でサイトを作成しています。 外部スタイルシートを使って複数のHTMLを管理しているのですが、スタイルシートを編集する際、スタイルシートマネージャを使わずにCSSファイルをテキストエディタで開いています。 ビルダー上でCSSファイルを右クリックし、『テキストエディタで開く』を選択しているのですが、これで開くと必ずWindowsのメモ帳で開かれてしまいます。 私はテキストエディタにTerapadを使用しているのですが、なんとかこれでCSSファイルを開く方法はないでしょうか? Windowsの既定のプログラムでCSSファイルをTerapadで開くように関連づけても、ビルダーではメモ帳で開かれてしまいます。 おそらくはビルダーの方で設定する必要があるのだと思いますが、オプション等をみても項目が見当たりません。 ご存知の方、いらっしゃいましたら教えて下さい。お願いします。

  • [http://lxr.mozilla.org/mozilla/source/layout/style/html.css]のファイルを得るには

    UAごとのHTML,CSSのデフォルトスタイルシートの違いが知りたいと思って検索していたところ Firefoxのデフォルトスタイルシートは http://lxr.mozilla.org/mozilla/source/layout/style/html.css にあるらしいことが判明しました...が、これ、普通に見ると行番号のついた拡張子CSSのHTMLですよね。(行番号のない)CSS本体を入手するにはどうしたらいいのでしょうか? #IE6,IE 7 beta2,Operaのデフォルトスタイルシートのありかについても知ってたら教えていただけるとありがたいです

    • ベストアンサー
    • CSS
  • 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
  • vistaでバッチファイルを作成

    windows vista(sp2)でバッチファイルを作成しましたが、テキストファイルとしか認識しません。 作成方法は以下です。 (1)メモ帳を開いてコードを記入。 (2)拡張子を.batにして、デスクトップ上に保存 です。バッチファイルとして認識すれば、アイコンが歯車の絵になると思いますがなりません。何か間違いがあるのでしょうか。御教示よろしくお願いいたします。

専門家に質問してみよう