• ベストアンサー

CSSの外部ファイルの件ですが・・・

私はPC始めてちょうど2年になります。 全くの我流です、PC教室に行ってませんので基礎をしらない中年です。 最近自作のホームページを作りたくてCSSを「とほほ」で勉強していますがPC用語が苦手で難しいです それでもメモ帳から作りたくて頑張ってます、gooのサイトで自分でページを作ってはアップしたりしてますが 簡単なhtmlタグで作ったものです、技量としてはそのくらいです。 CSSの質問ですが外部(別)ファイルのの事ですが h1{font-size:16pt; color:red; bockground-color:#33ccff; width:320px; } このようなスタイルシートを別のフォルダに保存してホームページ制作の時にこのabc.cssファイルから呼び込むと言うものですか このファイルにh2,h3と幾つも作って保存するのですか 又このファイルはFFFTPにアップするのですか <html> <head> <title>スタイルシートの勉強</title> <style type="text/css"><!-- @import url(abc.css); --></style> </head> <body> <h1>スタイルシートの勉強</h1> </body> </html> 質問書いて自分で分からなくなりましたが此れで解るでしょうか？ 解った方回答お願いします

noname#47823
noname#47823

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

  • ベストアンサー
  • fab76
  • ベストアンサー率59% (327/548)
回答No.2

私は（勉強不足なので^^;）@import規則を用いずhrefを使うようにしています、記述がちと面倒なのと極少数なのですが古いブラウザでの対応が出来ない理由です。 この辺を参考に 【@import規則】 http://hp.vector.co.jp/authors/VA022006/css/cascade.html#at-import-rule http://www6.plala.or.jp/go_west/nextcss/ref/slctr/at_rule.htm 記述が少なければhead内に直接記述でもかまわないのですが、外部ファイルとして管理するなら例えばcssというディリクトリ（フォルダですね）で管理したほうがスマートです（別に同階層に置いてもかまいません、散らばっていなければ、ということです） >このファイルにh2,h3と幾つも作って保存するのですか そういうことになりますが複数ページに共通なCSSと特定のページ、特定のセレクタに分けて読み込ませるのも管理上の方法となります。 /* --- htmlの記述 cssディリクトリのaaaとbbbを読み込む--- */ <head> <link href="css/aaa.css" rel="stylesheet" type="text/css"> <link href="css/bbb.css" rel="stylesheet" type="text/css"> <head/> aaa.css /* 基本デザイン用CSS */ body { margin: xpx; padding:x0px; text-align: left; ～続く } h1 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: xem; ～続く } bbb.css /* 特定のページ用CSS */ #ccc { margin: xpx auto; padding xpx; text-align: left; ～続く } #ddd { margin: xpx auto; padding: xpx; ～続く } といった感じです >又このファイルはFFFTPにアップするのですか FFFTPで、だと思いますが当然アップロードします、FFFTPは単なるクライアントです

その他の回答 (1)

  • orange001
  • ベストアンサー率32% (83/253)
回答No.1

＞別のフォルダに保存 書かれたソースを拝見すると、同じ階層にあるような記述になっておりますので、 フォルダは同じもののほうが良いでしょう。 ＞このファイルにh2,h3と幾つも作って保存するのですか そうですね。 ＞このファイルはFFFTPにアップする FFFTP「で」アップします。 アップする前に、ローカルでも表示の確認をなさってくださいね。

noname#47823
質問者

補足

早速の回答ありがとうございます。 思っていた通りのようです 1つ聞いて宜しいですか？同じ階層にない場合でも呼び込めますか？ またホームページを制作する度にCSSファイルを作るのですか？ すみません確信＆自信がないもので・・・

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連する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
  • ＣＳＳ今度は外部ファイル！

    前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! 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> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名　hp-name.css ○ＨＴＭＬファイル <! 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"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか？ それとも、外部ファイルの書き方がいけないのでしょうか？ 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした

  • 外部ＣＳＳをかくには。

    ＨＰのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部ＣＳＳでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY { 　letter-spacing:7px; 　line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。

    • ベストアンサー
    • HTML
  • 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ファイルを 入れてその後ブラウザ表示をすると文字がきちんと赤になっていたり 意味がわからず、ずっと悩んでいます。 分かりにくい質問ですいませんどうすればそうならないのか教えていただければ幸いです。 また、毎回アイコンをグーグルクロームのブラウザへドロップして検証するのが めんどうになってきたので、そうせずにブラウザへ直で表示できる方法も教えていただけると嬉しいです。

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

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

    • ベストアンサー
    • HTML
  • 外部スタイルシートが読み込めない

    こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 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

    ホームページ作成しています。 ど素人なりに頑張っていますが、内容が増えていくにつれ、だんだん動作が遅くなってきました。 そこで、最近「外部にスタイルシートを作る」ということを学びましたが、「div」あたりになると、さっぱり理解できず、結局「body」や「A」などのCSSを外部にするという段階にとどまっています。 もうすでに、レイアウトやデザインは決まっているので、今ある「manu」や「head」などを外部CSSに固定すれば、あとは記事を書くだけでページが作れると思うのですが…。 CSSのサイトはいろいろ拝見したのですが、レイアウトの段階になると、途中でわからなくなってしまいます。 ホームページビルダー付属のスタイルシートでは、デザインが合いません。そこで、素人にもわかりやすい、レイアウト枠としての外部CSS作成法をご指導ください。また、そのようなフリースタイルシートのソースなどがあればご紹介ください。 とにかく、外部CSSで、レイアウトを固定したいのです。 よろしくお願いいたします。

  • PHPファイル内でCSSが反映されない

    php5&MySQL5&XPでプログラム作成中です。 phpファイル内のhtmlの中に簡単なスタイルシートを埋め込んでいるのですが、 スタイルシートの部分が反映されません。 ご教授いただけると幸いです。 --haikei.css p.sample1 {background-color: #f8dce0; margin-top: 50px;} p.sample2 {background-color: #f8dce0; margin-bottom: 50px;} --login.php <?php --phpのプログラム ?> <html> <head> <link rel="stylesheet" href="haikei.css" type="text/css"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html>

    • ベストアンサー
    • PHP
  • HPビルダーでCSSを使ってフレームごとにデザイン変更

    HPビルダー8でフレームを使って左、右下(メイン)、右上での3画面でHPを作成中です。 左・右上・右下でそれぞれ違う背景を違うデザインで使いたいと思っています。 スタイルシートを利用中なのですが調べてもよく理解できずわかりません。 今はビルダーのスタイルシートの細かい指定方法がわからないので直接 手打ちでCSSファイルにメインページのデザインを入れて、 左・右上のフレームページはheadタグ内に個別に入れています。 できれば作業が簡易化できるようにフレームごとに違うデザインのCSSを それぞれ適用させたいとおもうのですが具体的な方法を教えていただけますか？ CSSファイルなどを直接いじる方法でもHPビルダーの機能を使う方法でもどちらでもかまいません。 CSS系のサイトは一通り見てみたのですがさっぱりわからないので 具体的に記述例を教えてくれると大変ありがたいです。よろしくおねがいします。 CSSファイルの記述(一部) body{background-image : url(../○○.jpg);} 左ページの記述 <head> <STYLE type="text/css"> <!--body{background-color:#ffffff}--> </style> </head> 右上ページの記述 <head> <STYLE Type="text/css"> <!--body{background-color:#808080}--> </style> </head>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する