• ベストアンサー

エクセルファイルにCSSを読み込ませる方法

HPを作成しているのですが フレーム付きのHPでエクセルの表を挿入すると スクロールさせた場合 全体の背景の統一が取れなくなってしまいます。 CSSファイルを別に用意して body { background: #ffffff url('img001.gif') repeat fixed -200px 100%;} と記述してるのですが エクセルから保存したhtmに 自分で用意したCSSを読み込ませる術はありませんでしょうか？ 良いお知恵を拝借頂ければ幸いです。

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

>この複数のファイルが各ページであると思うのですが >タグを挿入する場合、.fileの中の.htmか中の.htmでしょうか？ なるほど、そうですね。（シートが）複数有る場合というのを全然考えてませんでした。ｏｒｚ もちろん、それぞれのｈｔｍファイルに＃１の様にスタイルシートの読み込みを書いてもいいのですが、面倒なので、 複数のシートが複数のｈｔｍファイルになっている場合 ～.filesフォルダの中に stylesheet.css というデフォルトのスタイルシートができていると思います。 これが、それぞれのシートにスタイルとして読み込まれるので、 stylesheet.cssの中の先頭部分に @import url('book.css'); と書けば、自作外部スタイルシートをデフォルトのスタイルシートに読み込ませることができますので、これでどうでしょうか？ ※@importは、古いタイプのブラウザでは機能しない場合があります。

schwarzwald000
質問者

お礼

会社でお返事を打ってたので日本語がおかしい所がありました（滝汗) 的確なご指摘感謝です。 @importの解決方法ありがとうございます。 活用したいと思っております

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

エクセルで保存したhtmファイルをエディタで開いて <head>～</head>の部分に <link rel="stylesheet" href="book.css" type="text/css"> を挿入すればいいです。 ※book.cssは、自分で用意したＣＳＳファイル名 <link rel="…の並びに入れればいいと思います

schwarzwald000
質問者

補足

お返事ありがとうございます。 ほんと基本ですよね(汗) すっかり忘れていました。 相手がエクセルと言うことで 多少、敷居が高く感じているのかもしれません。 追加で質問なのですが .xlsファイル内に複数のページを作成しております。 すると.file内にも.htmが作成されており この複数のファイルが各ページであると思うのですが タグを挿入する場合、.fileの中の.htmか中の.htmでしょうか？

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. オフィス系ソフト

関連するQ&A

  • CSSでIE6だけ出る隙間をなくしたい

    お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSでドロップシャドウ

    CSS で写真の周りにふちと影を付けたいのですが Firefox1.5 だとうまくいくのですが、 IE6 だと padding: 4px; が反映されず、ふちの無い写真になってしまいます。どなたかコツを教えていただけないでしょうか？ --HTML-- <div class="img-shadow"> <img src="./1.jpg" alt="" width="200" height="150" /> </div> --CSS-- .img-shadow { float:left; background: url(shadowAlpha.png) no-repeat bottom right !important; background: url(shadow.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .img-shadow img { display: block; position: relative; background-color: #ffffff; border: 1px solid #999999; margin: -6px 6px 6px -6px; padding: 4px; ←ここが怪しい }

  • CSSで背景画像を一番下にもってきたいのですが・・・

    依頼されたページを作成中ですが、 bodyに指定したbackground画像を一番下にもってくるにはどうしたら良いか分からず、困っております。 #loginの背景に指定した「top_haikei.jpg」は、 position: fixed ; bottom:0; と指定することで一番下にもってくることに成功しましたが、 bodyの背景に指定している「haikei_bottom.gif」を一番下に持ってくる方法が分かりません。 CSS初心者の為、詳細にご教示頂ける方のご回答をお待ちしております！ よろしくお願い致しますm(u_u)m ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■CSS *{ margin:0px; padding:0px; } html { scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } body { margin:0 auto 0; background-color: #FFFFFF; font-family:sans-serif; font-size:8pt; background-image: url(../img/haikei_bottom.gif); background-repeat: repeat-x; background-position: center bottom; } form { margin:0px; scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } input { font-size:12px; } #container { width:950px; margin:0 auto 0; background-color:#FFFFFF; } #logo{ margin-left:80px; height:180px; } #box1{ text-align:center; line-height:20px; height:150px; } #login{ height:250px; background-image: url(../img/top_haikei.jpg); background-repeat: no-repeat; background-position: center bottom; position: fixed ; bottom:0; } #login_left{ float:left; margin-top:120px; margin-right:50px; line-height:20px; width:700px; } #login_right{ float:left; margin-top:100px; width:200px; }

  • CSSでの画像メニューの設定について

    現在CSSの勉強中です。 外部CSSで画像を使用してリンクメニューを作ったのですが、 やり方があっているか確認をお願いしたいのですが。 off時の画像（白）、ページのin時の画像（赤）、hover（青）の画像を用意しています。 CSS部分▼ .navi01 a{ width:102px; height:43px; background-image:url(common/img/navi_top_off.gif); background-repeat:no-repeat; } .navi01_on a{ width:102px; height:43px; background-image:url(common/img/navi_top_on.gif); background-repeat:no-repeat; } .navi01 a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } .navi01_on a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } HTML部分▼ <li class="navi01_on"><a href="index.html" title="トップページ"><span class="none">トップページ</span></a></li> <li class="navi02"><a href="work.html" title="仕事内容"><span class="none">仕事内容</span></a></li> CSSの講座のページなどを見ると、設定がもうすこし少なくても うまく動いていたりして、無駄な部分があるのではと思っています。 今の私の知識ではどこが悪いのか分からないので、 教えて頂けると幸いです。 （もし良い講座のページ、本がありましたら教えて頂ければと思います。） 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • CSS、どこが間違っている？

    友人の話によると、以下のCSSをネット上のチェックプログラムにかけると、エラーがあるといわれるらしいのですが、私にはどこが間違っているのかわかりません。 そのプログラムがそんなに信頼できるのかも謎ですが、「専門家じゃないから私にはわからんよ」といっても「なんとかしてくれ」の一点張りです。 他人様に頼るのもどうかと思うのですが...「なんとかして」頂きたいです。 よろしくお願いします。 BODY{background: #ffffff; url(top.gif) no-repeat fixed 50% 50%; color:#000000; line-height:1.2em; cursor:default;} INPUT,TEXTAREA,SELECT{background-color: #ffffff; color:#000000; border: #000000 1px solid;} a:link{background-color: #ffffff; text-decoration:none; color:#0000A0; cursor : default;} a:visited{background-color: #ffffff; text-decoration:none; color:#707070; cursor : default;} a:active{background-color: #ffffff; text-decoration:none; color:#0000A0; cursor : default;}

  • CSSについて教えて下さい

    ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側（上下位置は中間）に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>

  • CSS初心者です。至急お願いします！

    現在CSSでHP制作に挑戦しています。 自分なりに調べながら制作していたのですが、どうしても２点だけ上手くいきません。 ●サイト全体を中央表示 （widthを指定して左右のmarginをautoにすればブロック要素をセンタリング出来る、というのは理解しています。） ●SCCでロールオーバー表示 この2点です。 文章が下手くそなので、キャプチャを貼らせていただきました。 現在の作業画像です。 見にくいので… 【HTML】 <head> <link href="main_box.css" rel="stylesheet" type="text/css"> </head> <body topmargin="0"> <div id="bg"> <div id="head">熊本県でお風呂のリフォーム・修理をお考えの方はお気軽にご相談ください。</div> <div id="rogo"></div> <table width="1024" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="menutop"></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </div> </body> 【CSS】 #head { font-size: 12px; color: #FFFFFF; background-color: #000000; background-position: center top; text-align: left; margin: 0px; padding: 10px; height: 32px; width: 1024px; } #rogo { background-repeat: no-repeat; height: 70px; width: 1024px; background-image: url(img/rogo.gif); margin: 0px; background-position: center top; margin-left:auto; margin-right:auto; } .menutop { background-image: url(img/top.gif); background-repeat: no-repeat; display: block; height: 37px; width: 78px; position: static; } .menutop a:hover{ background-image:url(img/top2.gif) } #bg { margin: 0 auto; margin-top: 0px; background-color: #FFFFFF; width: 1024px; background-position: center top; } です。 情けない事に、どこが間違っているのか全くわかりません。 アドバイスをいただけると幸いです。 現在Macromedia Dreamweaver MXを使用しています。 ちゃんと保存しているのですが、もしかしたら、修正後のCSSがHTMLに反映されていないだけ…？ そんな時はどうやったら反映されるでしょうか？ ちなみにコチラのサイト様を参考にさせていただいています。 http://hac-design.com/ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで組んだメニューのセンターへの設置が出来ません

    初めてトピックを立てさせていただきます。宜しくお願いします。 CSSを使い、横型でオーバーフローするメニューを作っています。 ベースとなるバー画像の上に各コンテツへのリンクメニュー画像を バー画像の中心に置きたいのですが、「中心に置く」これが うまく行きません。丁度この教えて！gooのメニューバーと同じ様に したいのです。各コンテツンツ画像の幅を一定にした場合の設置、 バー幅一杯にメニューを配置した場合の方法は検索するとヒット するのですが、今回の様な場合の例となるサイトが無かったので この場をお借りしました。 JSという手もあるとは思うのですが、今回はCSSでの設置を したいと思っていますのでご協力お願いします。 動作環境 Mac OS 10.4.11 Safari 3.2.1 Firefox 2 ■ボディー部■ <ul id="menu"> <li><a href="./about.html" class="m_01">01</a></li> <li><a href="./about.html" class="m_02">02/a></li> <li><a href="./about.html" class="m_03">03/a></li> </ul> ■CSS部■ ul#menu{ background:url(img/m_off.gif) no-repeat; list-style:none; width:800px; height:30px; } ul#menu li{ list-style:none; float:left; } ul#menu a{ display:block; height:30px; text-indent:-100px; overflow:hidden; } /**//*/ overflow:auto; /**/ /*------off*/ a.m_01 { background:url(img/m_01.gif) no-repeat; width:101px;} a.m_02{ background:url(img/m_02.gif) no-repeat; width:108px;} a.m_03{ background:url(img/m_03.gif) no-repeat; width:80px;} /*------hover*/ a:hover.m_01{ background:url(img/m_01.gif) no-repeat 0px -30px;} a:hover.m_02{ background:url(img/m_02.gif) no-repeat 0px -30px;} a:hover.m_03{ background:url(img/m_03.gif) no-repeat -0px -30px;}

    • ベストアンサー
    • HTML
  • IE6でのみCSSの背景が見えない

    度々すみません。 CSSで見出しの設定をしているのですがなぜか<h2>見出し2の背景画像だけIE6で見えません。 Nescape,safari,firefoxでは問題ありません。 しかも他の見出しは同じ手順で作成、記述しているのに全て見えています。すごく不思議です。 記述は下記の通りです。 //-----css #main h2 { font-size: 9px; color: #FFFFFF; background:no-repeat; margin: 10px 0px; padding: 0px; height: 44px; width: 595px; font-size: 9px; color: #FFFFFF; height: 44px; width: 595px; margin: 8px 0px 0px; } .PROFILE { background:url(../image/ttitle_company.gif)} .COUNSUL { background:url(../image/ttitle_con.gif)} .PRODUCTS { background:url(../image/ttitle_products.gif)} .BACKGROUND { background:url(../image/ttitle_company.gif)} .CASESTUDY { background:url(../image/ttitle_case.gif)} //-----HTML <h2 class="PROFILE"><em>会社情報</em></h2> 的確なご意見以外にも何か疑われる事があれば教えて下さい。 よろしくお願い致します。

  • ＣＳＳでの背景の指定について質問いたします。

    ＣＳＳでの背景の指定について質問いたします。 background: url(../img/bg.gif) 0 -36px repeat-y; この場合の、0　-36px　はどのような意味ですか？ 背景画像の位置の指定なのでしょうが、具体的にどのように指定しているものなのか 教えていただけませんか？ よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する