リンクを使って複数ページへCSSを設定する方法

前へ 次へ
このQ&Aのポイント
  • 「超初心者のためのホームページ講座」で行き詰っている方へのCSS設定方法について解説します。
  • HTMLファイルとCSSファイルをリンクさせる方法について紹介します。
  • 記事では、CSSファイルの作り方やリンク方法について詳しく説明しています。
回答を見る
  • ベストアンサー

リンクを使って複数ページへCSSを設定する方法？

お世話になります。「超初心者のためのホームページ講座」（http://park16.wakwak.com/~html-css/css/index.html）「CSS設定方法その３」で行き詰っています。 （1）「スタイルを適用したいHTMLファイルのソース」のIEアイコンをデスクトップに作り、開くとリンク前のテキスト文字が出ます。これは操作ミスはないと思います。 （2）CSSファイルは「style_1.css」の名前でデスクトップに作りました。マウスをあてると「カスケードスタイルシートドキュメント　style_1.css」と馴染みの無いアイコンが出来ました。 　（1）（2）を1つのフォルダに入れましたが、リンクしません。文字の色、サイズ、太字等反応がありません。CSSファイルの作り方に何か問題があるのでしょうか？リンク方法に問題？十分満足なな質問が出来ず申し訳ありませんが、何しろ超初心者です。理解できる範囲でご回答いただけると大変幸せです。よろしくお願い申し上げます。以上

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

  • ベストアンサー
  • qualheart
  • ベストアンサー率41% (1451/3486)
回答No.1

HTMLファイルに外部CSSファイルをリンクするには、スタイルを適用したいHTMLファイル内にCSSファイルへのリンク記述をする必要があります。 具体的には「CSS設定方法その３」に載っている、以下の記述になります。 <link rel="stylesheet" href="style_1.css"　type="text/css"> これを、CSSを適用したいすべてのHTMLファイルに記述する必要があります。 記述を追加する場所は、「CSS設定方法その３」に載っているように<head>～</head>の間ならどこでも構いません。 この説明で分かりますでしょうか？ 分からなければ、その旨補足ください。 ご参考まで。

tommy0313
質問者

お礼

　ご回答有難うございました。解決しました。有難うございました。ご説明を参考にHTMLファイルを見直したところミスタイプを発見しました。見事にリンクしました。有難うございました。ブログを始めるに当たり、HTML/CSSの知識の必要性を感じ、横道にそれています。でも面白くなり、もう少し続けてゆくつもりです。わからないことがあればまた質問しますので、ご助力いただけると嬉しいです。よろしくお願いいたします。まずは御礼まで。

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • 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：スタイルシートでテキストリンク

    教えてください！！ 外部ファイルのスタイルシート（ＣＳＳ）を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 ＩＥ6.0では問題なく起動していますが、ＮＳ7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか？ ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のＣＳＳの記述】 .menu { font-family: "ＭＳ Ｐゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

  • cgiの中にcssリンクを入れたい

    現在自分の掲示板を持ってます。 デザインはＣＳＳで行っており、ＣＧＩの中に書き込んでますが、このＣＧＩを外部ファイルにしてリンクしたいです。 ＨＴＭＬであればＣＳＳのリンクは簡単にできますが、ＣＧＩにＣＳＳのリンクをすることができません。 誰かお知恵を貸してください。 ＨＴＭＬによる外部ファイルによるスタイル設定は以下の通りです。これをＣＧＩ用にするには・・・ 教えてください<(_ _)> <link rel="stylesheet" href="default.css" type="text/css" />

    • 締切済み
    • CGI
  • CSSの複数使用について、（一つのページで）

    CSSの複数使用について、（一つのページで） <head> <META http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./table2.css" type="text/css"> <link rel="stylesheet" href="./table.css" type="text/css"> </head> <body> <div style='width:35%'> <span class="roundcorner_box"> <span class="roundcorner_box1"><span></span></span> <span class="roundcorner_box2"><span></span></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box5"></span> </span> <div class="roundcorner_box_content"> ここに文字 </div> <span class="roundcorner_box"> <span class="roundcorner_box5"></span> <span class="roundcorner_box4"></span> <span class="roundcorner_box3"></span> <span class="roundcorner_box2"><span></span></span> <span class="roundcorner_box1"><span></span></span> </span> </div> このようなソースで、（外部ファイルは略）として、外部ファイルと「table」と「table2」にしたときに、 二つ指定する方法が分かりません。どうしたらいいですか？ 外部ファイルのtableとtable2の内容は別になっている。

    • ベストアンサー
    • HTML
  • ＣＳＳファイルのアイコン表示についての質問です。

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

  • Dreamweaver CS5 外部CSSのリンク

    Dreamweaver　CS5です。 HTMLファイル内に、外部CSSファイルへのリンクについての質問です。 【CSSスタイル】パネルの「スタイルシートを添付」ボタンでCSSファイルをリンクさせますが、HTML内のhead内、titleタグの後の行に記述されます。JavaScriptの記述があると、さらにその後の行に記述されます。 <link rel=******～>の記述を、たとえば、先にクリックしておいてその位置にカーソルを移動しておくなどして指定の場所に書き出してもらうことはできないのでしょうか。 外部CSSファイルはいつも手入力で書き込んでいましたが、Dreamweaverを使ってみたら思ったところに書いてくれません。記述後、指定の位置にドラッグでもして移動すればどうということはないのですが。 文字コードなどは、日本語が表記されているtitleタグより前に記述すること、なんて聞いたことがありますが、外部CSSへのリンク記述にもtitleタグの後ろのほうがいいというようなことがあるのでしょうか。

  • ベーシック認証　CSSリンク

    Basic認証でアクセス制限をかけたディレクトリにあるファイルから、Basic認証でアクセス制限がかかっていないディレクトリにあるCSS（スタイルシート）にリンクさせることはできるのでしょうか？ やはり、Basic認証でアクセス制限をかけたディレクトリにあるファイルから、Basic認証でアクセス制限がかかっていないディレクトリにあるファイルにリンクを張るのは、無理ですかね? 例： ディレクトリ構造： [Web]（ホームページデータ格納用ディレクトリ） [Web]フォルダーには、以下のファイルとフォルダが格納されています。 index.html [css](cssフォルダの中身：example.css) [basic]（basicフォルダの中身:.htaccess 、.htpasswd 、.data1.html ） 上記のディレクトリで、data1.htmlの<head></head>タグ内に下記HTMLコードを記述すれば、data1.htmlからexample.cssにリンクさせることは、できるのでしょうか？ HTMLコード： <link href="../css/example.css" rel="stylesheet" type="text/css"> よろしくお願いします。

    • ベストアンサー
    • HTML
  • スタイルシートの外部リンク方法は間違っていますか？

    外部ＣＳＳファイルからＨＴＭＬファイルへリンクしてみましたが 文字化けの羅列になります ページのレイアウトの枠組みなのですが homepageフォルダにindex.html style.cssの2つのファイルを作成し style.cssのファイルの中に body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .main { width:480px; float:right; } .side { width:260px; float:left; } .c-both { clear:both; } と記述しtext2.cssと名前を付けたカスケードスタイルドキュメントを入れてあります これをＨＴＭＬに <html> <herd> <link rel="styleseet" href="style.css" type="text2.css"> </herd> <div id="outline"> <div class="header"> タイトルなど </div><!-- end header --> <div class="outline-marign"> <div class="main"> メインスペース </div><!-- end main --> <div class="side"> サイド </div><!-- end side --> <div class="c-both"><br></div> </div><!-- end outline-marign --> <div class="footer"> フッターなど </div><!-- end footer --> </div><!-- end outline --> </html> のように記述しました リンク方法はこれで間違えていますでしょうか？ ブラウザで見ると文字化けの羅列です ＣＳＳをＨＴＭＬに組み込むときちんと表示されるのでブラウザの問題ではない初歩的ミスだと思うのですが 御教授お願い致します

  • yahooジオシティーズでのCSS読み込ませ方法

    こんにちは。 ジオシティーズでHP作成を試みていたのですが、style.cssを作ってジオシティーズの"EZ-アップローダー”をつかってアップしてみたところ、スタイルがファイルに反映されません。 CSSを読み込ませる特殊な方法でもあるのでしょうか? 念のためヘッダは、 <html lang="ja"> <head> <meta http-equiv="Content-style-Type" content="text/html"; charset=euc-jp> <title>:::style-test:::</title> <link rel="stylesheet"type="text/css href="style.css"media="all"> </head> です。 お分かりの方いましたら、ご教授ください。 ちなみに当方、HP作成の初心者です。

  • NNだけCSSのリンクが切れる?!

    <link href="common/top.css" rel="stylesheet" type="text/css"> 上記のようなソースで外部ファイルにリンクしてるのですが、 サーバにあげたときだけNNで見るとCSSが適用されません。（IEでは表示されます） ローカルでみれば、IEでもNNでも問題なく表示されるし、 外部ファイルをやめて、HTML内にCSSを記述すればサーバにあげても表示されます。 サーバ側に原因があるのか、ソースコードで解決できるのか どなたかこの現象の解決方法を教えて下さい！！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する