• ベストアンサー

スタイルシートを取り込みたい

CSSファイルを作成して、それをHTML内に取り込みたいのですが、うまくいきません。 ベクターにある「ABStyle」なるソフトを使用して、CSSファイルを作成しました。 （ファイル名は「sf01」スタイル名も「sf01」です） これを新規のHTMLに取り込むようにしたいのですが、いろいろなHPを見てやってみるのですが、なにかがおかしいらしく、ちっとも読み込んでいないようです。 新規のHTMLの <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>無題 標準ページ</title> </head> <body bgcolor="#FFFFFF"> </body> </html> ここの、どこに、どうやって、すればいいのかお教えください。。。。 新規HTMLは「safety」というファイルにありまして、CSSファイルも同じフォルダーに入っております。 CSSの場所を指定すればいいと思うのですが、具体的な記述方法をお教えいただければ幸いです。（すみません、超初心者です） 当方W98,FPEは2.0です。 宜しくお願い申し上げます。

  • CSS
  • 回答数5
  • ありがとう数3

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

  • ベストアンサー
  • yuizuian
  • ベストアンサー率42% (103/245)
回答No.4

こんばんは、＃２の者です。 少し気になったんで… sf01 { 　FONT-FAMILY : ＭＳ Ｐゴシック, Osaka ; 　FONT-SIZE : 12pt ; FONT-STYLE : oblique ; 　FONT-WEIGHT : 太字 ; 　COLOR : #400080 ; 　LINE-HEIGHT : 12pt ; 　BACKGROUND-COLOR : #FF8080 } となっていますが、 sf01はクラスなので、「.sf01」が正しいですよね。 それから、これは読み込むだけではなくて <SPAN CLASS="sf01">スタイルシート！</SPAN> 等として、スタイルシートを適応させてやらないといけませんよ？ ところで↓これですが… FONT-WEIGHT : 太字 ; ここって日本語記述OKでしたっけ？（＾＾；

yukiko5
質問者

お礼

再度ご回答、本当にありがとうございました。うれしかったです。 No3の方への内容通り、問題は解決いたしました。 本当にありがとうございました。 >FONT-WEIGHT : 太字 ; >ここって日本語記述OKでしたっけ？（＾＾； コレです！いろいろな参考HPをぐるぐるまわっているうちに、 「日本語～？？」と、気づきました。 詳しいことはわかりませんが、とりあえず、別のソフトで。。。。 と、やってみたら、問題はあっさり解決です。 もちろん、皆様にお教えいただいた通り、LINKタグは入れてあります！ 本当にありがとうございました。お手数おかけ致しました。

その他の回答 (4)

  • shiba1
  • ベストアンサー率41% (10/24)
回答No.5

/*コメント*/ スタイルシートのコメントは、/*と*/（複数行も可。） ですから、著作権表示部分に問題はないです。 yuizuianさんの回答のように、 sf01というのは、クラス名だと思われるので、 「.」ドットをつけて、 .sf01という風にして、 <span class="sf01"></span> <div class="sf01"></div> の様にして（htmlファイルの記述にドットは付けません）使います。 スタイルシートを適応させたい範囲がページの全体であれば sf01の部分を body,td,th {スタイルの記述} と書き換えれば、classを使わなくても適応されます。 太字にしたいときは、 font-weight : bold ; ですよね^^;

yukiko5
質問者

お礼

ご回答ありがとうございました。 問題は他の方々へのお礼へ書いたように、解決いたしました。 しかしながら皆様のご指導は大変、役に立ちました。 本当にありがとうございました。 >font-weight : bold ; >ですよね^^; ですよね！！ （すみません。本当はわかっていないのですが、 　とりあえず解決したのと、皆様のご好意にテンションあがってます） 今後はソフトに頼らず、自分でも記述できるように、 またLINKタグもちゃんと理解できるように努力いたします。 その勉強は、みなさまのこちらへの書込みを参考にさせていただきます。 本当にありがとうございました。

  • kanzaki
  • ベストアンサー率55% (11/20)
回答No.3

んー。一応、全て色んな方のカキコとそのレスを読ませていただきました。 スタイルシートの記述（埋め込みＨＴＭＬ）に関しては皆さんの仰る通りだと思いますが。 今までのを読んだところ、元のＣＳＳファイルに /* Copyright(C)You name. Original CSS File. */ /* ---------------------------------------------- --Style Sheet-------------------------------*/ が入っている状態でしょうか？ 大元のスタイルシートに関してですが。 いつも自分が仕事で使っている場合。即内容を書き込んでいます。 <main.cssの内容> BODY{ font-size : 12px; color : gray; } A{ font-size : 12px; color : black; text-decoration : none; } <これでｃｓｓファイル終了> 大体これで要点のみ、で仕事では通していますし。ＨＰでも稼動しています。 ｃｓｓも読み込みで時間がかかりますし。ヘッダの関係かも、とは その様な記述方法を一度も行ったことが無いので。イマイチ自信はありませんが ちょっと必要部分のみで記述しては如何でしょう？

yukiko5
質問者

お礼

おはようございます。 ご回答、ありがとうございます。 初心者でして、自分で記述するのが自信なく、フリーソフトで書き出してもらった結果です。 実はきちんとCSSの結果が反映されるようになりました。 皆様のおっしゃる通りにしてるにもかかわらず、さっぱりできないので、別のフリーソフトで試したら、あっさりできました。 皆様、大変ご迷惑をおかけいたしました。 しかし今回の件で、少々のことくらいは自分で記述できるようにならなければ、と、深く反省いたしました。 皆様、本当にご助力ありがとうございました。

  • yuizuian
  • ベストアンサー率42% (103/245)
回答No.2

<HEAD>～</HEAD>の中に <LINK REL=STYLESHEET TYPE="text/css" HREF="スタイルシートの場所" TITLE="任意の名前"> と書けば良いですよ。 例えば、スタイルシートとHTMLが同じ場所にあるなら、 <LINK REL=STYLESHEET TYPE="text/css" HREF="./sf01.css" TITLE="sf01"> です。

参考URL：
http://tohoho.wakusei.ne.jp/www.htm
yukiko5
質問者

補足

<head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>index2</title> <link rel="STYLESHEET" type="text/css" href="./sf01.css" title="sf01"> </head> こうですよねー（泣）　なぜ、できないのでしょう。。。 参考URLは既に確認済みです。 よろしければ、NO１の方の補足に入れました、 CSSファイルの方も見ていただければ幸いです。 これはCSSファイルがおかしいのでしょうか？ 申し訳ありませんが、宜しくお願い申し上げます。。。

  • UKY
  • ベストアンサー率50% (604/1207)
回答No.1

<LINK rel="stylesheet" type="text/css" href="sf01.css"> というタグを、</HEAD>の直前の行に追加してみてください。 CSSを読み込むには、<HEAD>タグの中で<LINK>タグで指定します。 LINKタグの中のhrefの値がCSSファイルの名前です。 (FrontPageって外部CSSに対応してましたっけ？)

yukiko5
質問者

補足

ありがとうございました。 頂いたタグをそのまま貼りつけたのですが、なにも変わらないです。 （IEでチェックしても、です） どうしてなのでしょう？ もとのCSSファイルがおかしいのでしょうか？ /* Copyright(C)You name. Original CSS File. */ /* ---------------------------------------------- --Style Sheet-------------------------------*/ sf01 { FONT-FAMILY : ＭＳ Ｐゴシック, Osaka ; FONT-SIZE : 12pt ; FONT-STYLE : oblique ; FONT-WEIGHT : 太字 ; COLOR : #400080 ; LINE-HEIGHT : 12pt ; BACKGROUND-COLOR : #FF8080 } /*-------------------------------------------- ---------------------------End Style Sheet--*/ /* ABStyle Ver.0.1.0β */ ちなみに色などは、とりあえずどんなものか試したかったので、 てきとーにハデ色を入れてあります。 よろしければこちらも見ていただければ幸いです。 尚。外部CSSに対応しているのか？は、 http://www.susono.com/~tkzw4a/makefpe/stepup/s_style.htm こちらでみた感じですと、対応していると、思います。 申し訳ございませんが、宜しくお願い申し上げます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ホームページビルダー８でスタイルシートを使いたい。

    HTML初心者です。ホームページビルダーは簡単ですが何度か経験があります。ホームページビルダー８で他のサイトからのスタイルシートというものを使って簡単に作成したいのですが・・ http://wbakibaki.id25.com/ こちらのサイトでテンプレートをダウンロードさせて頂きました。 ですがその先が分かりません^^； 解凍はできたのですが開けると何個もフォルダがでてきてしまってその中のcssというフォルダの中のstyleという所を開けるとカスケードスタイルシートドキュメント（cssファイル）であるのですがそれを全部コピーしてHPBのHTMLソースに張り付けるのでしょうか？ ちなみにHPBの白紙のページのHTMLソースが <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY></BODY> </HTML> とあるのですがどこの部分にいれるのですか？ 色々自分なりに調べましたがイマイチ分かりません・・ それでいれられたとしたらテンプレートで見た物とまったく同じような画面がでてきてそれを編集するのでしょうか？どなたか初心者でもわかるように教えていただけませんでしょうか？ なにか間違っていたり、補足が必要ならいたしますので宜しくお願いします！

    • ベストアンサー
    • HTML
  • 背景画像を貼り付けるhtmlコードはどこに貼り付ければいいんですか？

    コードはわかるんですが、どこに貼り付けたらいいのか教えてください。 ようするに最初は <html> <head> <meta http-equiv="content-type" content="text/html; charset=EUC-JP"> <title>無題</title> <meta name="generator" content=" 6.0.0.49"> </head> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> <p style="line-height:150%;">&nbsp;</p> </body> </html> となっているんですが、このなかのどこに挿入したらいいのかおしえていただきたいです。

  • スタイルシートに関して教えてください！本当に困っています！

    超初心者で悪いのですが、スタイルシートの記述方法がよく分かりません。確か記述方法は３つあると思うのですが、ＣＳＳファイルを利用して記述する方法が分からない(できない)のです。ここからは実際に自分が今使っているホームページ作成サイト(初心者)に書かれていて理解できない(実際にやってみたがうまくいかない)所をここに書きます。 ３、ＣＳＳファイル利用により記述する方法 テキストエディターで”スタイルを適用する対象名 {　～　}”として記述し、 ファイル保存するときに、拡張子が”.css”というＣＳＳファイルを作ります。 そして、ＨＴＭＬファイル内にはＣＳＳファイルを参照しなさいという指示である、<LINK href="ＣＳＳファイル名.css" type="text/css" rel=stylesheet> をヘッダー部分に記述します。 ＜＜　ＣＳＳファイルデータ例（下記のデータだけを記述して.cssファイルを作成　＞＞ ＜　ファイル名＝style.css　＞ p { color:blue } ＜＜　HTMLデータ例（.cssファイルと同じフォルダ内に作成する）　＞＞ <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> ＜＜　ブラウザ表示　＞＞ スタイルシート 分かりずらかったらここを参照してください。(たぶん削除されると思うが) http://homepage-how.com/hp/hp-css2.html まず、３に書いてあるとおりにＣＳＳファイルを作成しました。 次からがよく分からないのです。３に書いてあるとおりにＨＴＭＬファイルを作成しようと思ったのですが、なぜか、ホームページの基本構造ではないのです。 こういう事です 　　↓ <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> 見ても分かるとおり、タイトルの部分がないのです。 タイトルがなくても良いのですか？ あと、このＨＴＭＬデータを.ＣＳＳファイルと同じフォルダ内に作成するという意味が分かりません。 本当に超初心者で悪いのですが、本当に困っています。誰か分かりやすく教えてくれる方はいないでしょうか？お願いします。

  • FrontPage2000について

    FrontPageで作ったHPをMacのパソコンで見ると、見れない場合があるような事を聞きました。 余分なタグが付く為とありましたが、HEAD部分に書かれる下記の部分は影響しないのでしょうか？ <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=shift_jis"> <META NAME="GENERATOR" CONTENT="Microsoft FrontPage 4.0"> <META NAME="ProgId" CONTENT="FrontPage.Editor.Document"> <TITLE>新しいページ 1</TITLE> </HEAD> 現在、HTML&CSS&Javascrput辞典を買い、余分なタグを消したりして、HPを手直ししています。 上記の部分がわからないため、Mac PCやIE以外のブラウザに影響があるのか、ないのか、教えて下さい。よろしくお願い致します。

  • ファイヤーフォックスでは、フレームが表示されません。

    タイトル通りで、当方のホームページビルダーＶ６．５で作ったＨＰのフレームがファイヤーフォックスでは、表示されません。どうしたらいいか教えてください。 ＜フレームページ＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY></BODY> </HTML> ＜インデックスページ＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <FRAMESET cols="15%,85%"> <FRAME src="newpage2.htm"> <FRAME src="newpage3.htm"> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> よろしくお願いします。

  • 外部スタイルシートでのスクロールバー

    Dreamweaver MX 2004でサイトを作成しています。 外部スタイルシートでスクロールバーの色を変更したいのですが 適用されなく困っています。 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="pro1"> -------------------------------------------------- 外部スタイルシート（style.css) body { scrollbar-base-color:#efefbd; scrollbar-arrow-color:#efefbd; scrollbar-darkshadow-color:#efefbd; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; } ------------------------------------------------- わかる方がいらっしゃいましたら、お願いいたします。

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

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

  • これは何を意味しますか？

    <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <img src="./image/2151.jpg"> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • IEのQuickTime Plugin で、.mp4動画を再生したいのです。

    よろしくお願いします。 今まで.movをHTMLに動画挿入したページを作成して、それをIEで開いて動画再生できていました。 それと同じソースで.mp4動画を指定すると、再生できません。IEで開くと画面が出るべき部分が何も写らない状態になってしまいます。 QuickTimeの設定でファイルの関連づけをして見たら、エクスプローラ上ではアイコンの絵がQuickTimeの絵になりましたが、それだけでした。 どうすれば.movと同じようにIE上で再生できるようになるのか、教えていただけるとたいへん助かります。 IEのver.は 6.0、QuickTimeは 6.5.2 です。 実際のHTMLソースを添付します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>mov01</title> </head> <body background="../../kabe_21.jpg" bgcolor="#FFFFFF" bgproperties="fixed"> <p align="center"> <img dynsrc="RISU.mov" start="fileopen"> ※↑ここが.MP4だと再生できない。 </p> </body> </html> よろしくご回答お願いします。

  • googleに飛べない

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> <meta http-equit="refresh"content"0;http://www.google.co.jp/"> </script> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 13.0.4.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title> </title> </head> <body> <noscript> <br>JavaScriptを有効にして下さい<br> </noscript> </body> </html> googleに飛べないのですがどこの記述が間違っているのでしょうか？ ご教示お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する