- 締切済み
ファイルの参照について
以下のコード全体を１つのファイルに格納して <link rel="stylesheet" type="text/css" href="サンプル.拡張子"> のような、１行で指すことはできないでしょうか。 よろしくお願い申し上げます。 ファイル名： sample.拡張子 ----------------------------------------- <style type="text/css"> @import url(URL); </style> <div class="＊＊＊"> <div class="cse-branding-form"> <form action="＊＊＊＊"> <div> <input type="＊＊＊＊＊＊＊＊> <input type="text" > <input type="submit" name="＊＊" /> </div> </form> </div> </div> ----------------------------------------- ＊パラメータ部分はダミーです
- moto039
- お礼率23% (138/594)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
CSSファイルにHTMLを置いてどうするのでしょうか？
- yyr446
- ベストアンサー率65% (870/1330)
もしかして何か大きな勘違いしていませんか？ <div class="＊＊＊"> <div class="cse-branding-form"> <form action="＊＊＊＊"> <div> <input type="＊＊＊＊＊＊＊＊> <input type="text" > <input type="submit" name="＊＊" /> </div> </form> </div> </div> を外部ファイルにしてたりして.... そおいうのはSSI(サーバーサイドインクルード)っていいます。 （最近はSSIみかけませんが）
- zxcv0000
- ベストアンサー率56% (111/196)
普通は、ご質問に書かれた link タグでできるんじゃ無いかと思います。 試してダメだったのなら、その状況を詳しく書かれた方が良いと思いますよ。 当てずっぽうで思い付くのは... ・ href に指定するURLは大丈夫？ スペルミスとか、非ASCII文字の使用とか、相対パス誤りとか。 ・外部ファイルの中身は大丈夫？ <style>なんで書いませんね？ シンタックスエラーは無いですか？
関連するQ&A
- ブログのHTMLを、教えてください。
私のブログのHTMLを、評価ソフトでチェックしましたら、下記の２点を重大なミスと指摘されました。 どのように、修正すればいいのか分かりませんので、お分かりでしたら教えてください。 (1)下記につきまして、「</meta>に対応する開始タグ<meta>が見つかりません」と指摘されました。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /></meta> (2)下記につきまして、「<style>を<div>～</div>内に書くことはできません」と指摘されました。ご存知のように <style type="text/css">以下は グーグルアドセンス ですから、分解はできないと思います。 <div class="side">もし何かお調べ事がありましたら、下記より検索して下さい</div> <div class="kensaku"> <style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <div class="cse-branding-bottom" style="background-color:#999999;color:#000000"> <div class="cse-branding-form"> <form action="http://www.google.co.jp/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-5204993401304693:kui1sxf5o9l" /> <input type="hidden" name="ie" value="Shift_JIS" /> <input type="text" name="q" size="25" /> <input type="submit" name="sa" value="検索" /> </div> </form> </div> 尚、ここHTMLの範囲ではご判断できないようでしたら、著作権で保護されいると思われますので、個別にご必要な限りお知らせいたします。 宜しくお願いいたします。
- 締切済み
- その他(ソフトウェア)
- 背景色を指定したのに反映されません。
CSSは外部ファイルに記述しています。 画像のように色をつけたいのですが、うまくいきません。 上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。
- ベストアンサー
- CSS
- Google 自サイト検索結果 オーバーレイ表示で検索実行をjsからsubmitしたい
Googleの提供する検索窓を自サイトに設置しWEB2.0風にページ上に オーバーレイさせて結果を表示する"カスタム検索"について質問です。 以下がそのサービスが吐き出すコードです。（idっぽいのは一部XXXとかにしています） <form action="" id="searchbox_XXX:XXXcwe" onsubmit="return false;"> <div> <input type="text" name="q" size="40"/> <input type="submit" value="検索"/> </div> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_cwe&lang=ja... <div id="results_xxx:xxxcwe" style="display:none"> <div class="cse-closeResults"> <a>× 閉じる</a> </div> <div class="cse-resultsContainer"></div> </div> <style type="text/css"> @import url(http://www.google.com/cse/api/overlay.css); </style> <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=xxx-xxx... type="text/javascript"></script> <script src="http://www.google.com/cse/api/overlay.js" type="text/javascript"></script> <script type="text/javascript"> function OnLoad() { new CSEOverlay("xxx:xxx", document.getElementById("searchbox_xxx:xxx"), document.getElementById("results_xxx:xxx")); } GSearch.setOnLoadCallback(OnLoad); </script> これで"検索"をクリックするとオーバーレイ表示されます。 これを"検索"ボタンクリックではなくjavascriptのsubmitで実行したいのです。 例えば <script language="javascript"> function submitG() { document.myForm.submit(); } </script> ↑submitG()を実行しても検索結果を表示してくれません。 submit自体は実行しているようなのですが。。 どなたか分かる方お願いします。
- ベストアンサー
- JavaScript
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- CSS : IEとFirefoxの表示差異を改善したい
grandswellと申します。 よろしくお願いいたします。 サンプルをIE、Firefoxそれぞれで見ていただけると わかっていただけると思うのですが、Firefox側が 意図した通りのレイアウトになっていません。 サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような 工夫が必要でしょうか。 ぜひご教示くださいますよう、お願いいたします。 以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------
- ベストアンサー
- CSS
- googleのカスタム検索
googleのカスタム検索をホームページに設置しようと思っています。 アカウント取得して、設置しようとしているのですが、 ボタンを画像にしたり、ボックスの幅を変更できないのでしょうか？ <div id="cse-search-form" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl('011829881965112279581:kkxhjvjwxl4'); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); var options = new google.search.DrawOptions(); options.enableSearchboxOnly("http://xxx.com"); customSearchControl.draw('cse-search-form', options); }, true); </script> <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> 色々調べたのですが、イマイチ要領を得ることができませんでした。 教えてくださいお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- 外部css定義したｃｌａｓｓをhtmlで引き継ぎ別名で定義する方法
いつもお世話になります。 外部cssで、例えば xyz.css div.abc{ font-size:13px; width:100px; height:120px; border:solid; border-width:2px; border-color:#460675; } などと定義し、 htmlで <link rel="stylesheet" href="xyz.css" type="text/css"> <style type="text/css"><!-- div.def{ ここで、class abc の内容の一部のみ変更、追加をしたいんですが、 その記載方法がわかりません。 } --></style> 次のようにしてもできますが、 <div class="abc" style="ここに記載" ・・・・ JavaScriptで、classを切り替えて使用したいので、 cssで定義したclassを基に新たなclassを新たな名前でそれぞれのページでできないものかと調べています。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ＣＳＳ今度は外部ファイル！
前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○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> をつけてみたのですが、ダメでした
- ベストアンサー
- その他（インターネット・Webサービス）
- ２個のFormを横並びにしたい
HTML(5)で以下のソースに対して <form> <input type="text" id="1"> <input type="text" id="2"> </form> <form> <input type="text" id="3"> <input type="text" id="4"> </form> CSS form {display:inline} input {display:block} と書いた場合に、縦二列、横二列の表示が得られると期待したのですが 全て縦に並んでしまいました。 期待は左の列にid=1, 2が縦に並び、id=3, 4がその横に並ぶ感じです。 1 3 2 4 何か基本的な理解が抜けている気もしているのですがちょっとわからずお力を貸していただけないでしょうか。 なぜこうなってしまうのか仕組みも知りたいので理由を加えて教えていただけると助かります。 簡易的なサンプルコードを記載いたします。 <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <form> <input type="text" id="1"> <input type="text" id="2"> </form> <form> <input type="text" id="3"> <input type="text" id="4"> </form> </body> </html> css form{display:inline;} input{display:block;} 関係あるかわかりませんがchrome21とFirefox14を使っています。 よろしくお願いします。
- ベストアンサー
- CSS
- 外部ファイルを読み込んだhtmlをinclude
外部ファイルを読み込んだhtmlをincludeしたいです。 ディレクトリの階層は、 index.php style.css /pic/picture.html /pic/css/style1.css /pic/css/style2.css : /pic/css/style13.css /pic/js/jquery1.js /pic/js/jquery2.js : /pic/js/jquery15.js : （画像などが他にもいっぱい） となっています。 ----- picture.html内には <link rel="stylesheet" type="text/css" href="css/style1.css"> <link rel="stylesheet" type="text/css" href="css/style2.css"> : <link rel="stylesheet" type="text/css" href="css/style13.css"> <link rel="stylesheet" type="text/css" href="js/jquery1.js"> <link rel="stylesheet" type="text/css" href="js/jquery2.js"> : <link rel="stylesheet" type="text/css" href="js/jquery15.js"> : と書かれています。 ---- このときindex.phpのbody内に <?php include('./picture.html'); ?> とした場合、相対パスによる記述なのでpicture.html以外のcssやjsは適用されませんよね。 しかし/pic/内にあるすべてのpicture.htmlに関係するファイルは非常に数が多いので、これらすべてをincludeするのは厳しいです。 すべての外部ファイルを読み込んだ状態のpicture.htmlをbody内に表示したいのですが、そんなことは可能でしょうか。 どなたかご教示ください。どうかよろしくお願いします。
- ベストアンサー
- PHP
お礼
早速ありがとうございます。 ★<link rel="stylesheet" type="text/css" href="＊＊＊.css"> でやったところできなかったのです。 コードを格納したファイルの拡張子を何にするか？ それを指す記述★ を知りたいと思っています。