base hrefとlink relについての質問
- テキストエディタでHTMLを書き、外部CSSを使用している際に、<base href>と<link rel>の順序が問題になる場合があります。
- <base href>を先に指定すると、CSSが反映されなくなる可能性がありますが、<link rel>を先に指定すると文法チェックで問題が発生します。
- 解決策としては、<base href>を<meta>属性の後に指定することができます。
- ベストアンサー
base hrefとlink rel
テキストエディタでhtmlを書いています。 外部cssを使うので、 <link rel="stylesheet" href="style.css" type="text/css"> をヘッダ部に入れていますが、これより上に <base href="～"> で基準URIを指定しようとすると、cssが反映されなくなってしまいます。 先に <link rel="～ を入れてしまうと、文法チェックで引っ掛かるのですが、どうしたら良いのでしょうか？ ソースは、 <Head> <base href="絶対パス"> <link rel="stylesheet" href="style.css" type="text/css"> で、この後にmeta属性を入れています。 よろしくお願い致します。
- toatouto
- お礼率83% (492/588)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
base hrefからの相対パスで<link>を指定するか、 絶対パスか絶対URLで<link>を指定してください。
その他の回答 (3)
そもそも何の為に「base」を記述するのでしょうか？ 他に代替処置が不可能な状態なのですか？ 文法上baseの前にlinkを入れてもエラーには成らない事を言明して置きます。
補足
ありがとうございます。 テキストに書いてあったので、入れた方が良いのかと思って書いたのですが。 そもそも不要なタグなのでしょうか？ 素人ですので、 > 他に代替処置 が、よく分かりません。 申し訳ございません。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
よくわからないならbaseは書かないでおくのがいいんですがねぇ。 <base href="http://www.somewhere.com/~nobody/index.html"> と書いてあるHTMLファイルがあるとして、そのHTMLファイルの中に <link rel="stylesheet" href="style.css" type="text/css">と書 いてあったら、HTMLファイルが世界中のどこにあっても参照される スタイルシートはhttp://www.somewhere.com/~nobody/style.cssに なります。HTMLファイルと同じディレクトリを指すとは限りません ね。 というわけで、あなたのパソコン上で動作確認をしたくても、base 要素にサーバのアドレスを書いちゃったからにはサーバ上のファイ ルを探しにいきます。不毛なのでbase要素を書くのはヤメましょ う。何も書かなければ、閲覧しているHTMLファイルの場所が基準に なります。
お礼
再度、ありがとうございます。 そうですよね。初めは、それまで見えていたものが突然見えなくなってしまったので、「!?」だったのですが、落ち着いて良く考えたら、サイトアドレスを基準にしているのだから、サーバに上げない限り見られないのかな、と思いました。 当たっていたようで良かったです。 何も書かない方向でも検討してみます。 ありがとうございました。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
念のため確認ですが、linkで指定するスタイルシートのURIは、 baseで指定した基準URIを考慮したものになってますよね？ htmlファイルとcssファイルと基準URIの位置関係を図示して もらえますか。
補足
ありがとうございます。 素人ですので、 > linkで指定するスタイルシートのURIは、baseで指定した基準URIを考慮したもの が、よく分かりません。 申し訳ございません。 ファイル名を間違っていないか、と言うことでしょうか？ htmlファイルとcssファイルは、同じフォルダの中に存在します。 現在は編集中で、サーバにアップせず、動作確認をしている最中なのですが、サーバにアップする時も、ファイルをそのまま一緒に放り込む予定です。 ちなみに、基準URIとなるページのファイル名が、 index.html cssのファイル名が、 style.css で、本やサイトで調べたところ、基準ULIは（この場合）、 "絶対パス/index.html" とするようなのですが、試運転用にアップしてあるダミーのindex.htmlファイルに対して、絶対パス（サーバ提供のサイトアドレス）でブラウザからアクセスすると、アドレスバーには/index.htmlの部分が表示されませんので、<base href="絶対パス">の"絶対パス"の中身は、サーバ提供のサイトアドレスのみで、/index.htmlを挿入していません。 これは入れるのが正しいのでしょうか？ もしそうであれば初めから的外れなことをしているようで申し訳ないのですが、よろしければ教えて下さい。 どうぞよろしくお願い致します。
関連するQ&A
- link rel="stylesheet"について
htmlについて質問です。 <link rel="stylesheet" type="text/css" href="_webfonts.css?1523592274603" id="webfont-css"> こういうCSSを適用させるための記述は何を意味しているのでしょうか？ <link rel="stylesheet" type="text/css" href="_webfonts.css"> こういうような基本で学ぶような記述では駄目なのでしょうか？
- ベストアンサー
- HTML
- スタイルシートのリンクをはる時・・・
<link href="css/common.css" rel="stylesheet" type="text/css">と <link href="/css/common.css" rel="stylesheet" type="text/css">の違いを教えてください。
- 締切済み
- その他（インターネット・Webサービス）
- フォントのサイズが変わってしまいサイトが崩れる
IEとファイヤーフォックスでフォントのサイズが変わってしまい、自作サイトが崩れてしまいます。 調べたところ下記のような情報があったのですが、この方法がよいのでしょうか？ http://kudox.jp/html-css/font-size-css また上記通りにする場合下記は <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> 最優先させるのでしょうか？最優先なら下記のような感じでよいのでしょうか？ <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <link rel="stylesheet" href="page.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/css/fontsize.css" media="all" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/css/fontsize_ie.css" media="all" /> <![endif]--> またmedia="all"はとりあえずすべてにつけておいたほうがよい属性と考えてよいのでしょうか？ 教えてください。
- ベストアンサー
- HTML
- HTMLメールの外部CSSが有効になりません
HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
- 締切済み
- HTML
- CSSで、外部スタイルシートを2つ指定した場合。
たとえば、 <link href="style.css" rel="stylesheet" type="text/css"> <link href="info.css" rel="stylesheet" type="text/css"> のように２つスタイルシートを指定した場合、同じ内容のスタイルシートを書き込んだ場合どちらが優先されるのでしょうか。
- ベストアンサー
- HTML
- CSSのMETA http-equiv・・・・
<link rel="stylesheet" href="style.css" type="text/css"> と ところどころ<span>でCSSを利用していますが、 <META http-equiv="Content-Style-Type" content="text/css"> を書いたほうがいいのでしょうか。 もし、<span>を使用しなければ書かなくても良いものなのでしょうか。
- ベストアンサー
- HTML
- CSSが適応されない
ジオシティーズなどのHPにスタイルシートを適応させたいのですが、適応されず困ってます。 <meta http-equiv="content-style-type" content="text/css"> <link href="stylesheet.css" rel="stylesheet" type="text/css"> としてHPに記述してstylesheet.cssという外部ファイルを読み込ませたいのですが適応されません。 どうすればいいのでしょうか？ ご回答宜しく御願い致します。
- 締切済み
- HTML
- CSS のときのヘッダの記述
<link rel="stylesheet" href="style.css" type="text/css" /> の link rel = の ●「 rel 」って何の省略なのでしょうか？ また、 ●href は Hyper link REFerence の略でしょうか？
- ベストアンサー
- HTML
- cssのリンクをimport.cssに書きかえれないです！（@dreamweaver）
はじめまして。 今ある <link href="style.css" rel="stylesheet" type="text/css" /> を common/import.cssをリンクし、 <link href="/common/import.css" rel="stylesheet" type="text/css" /> に変更したいのですが、なぜかできません＞＜ ちなみにimport.cssの中身は @charset "shift_jis"; @import "/common/css/base.css"; @import "/common/css/contents.css"; @import "/common/css/right.css"; このような感じです。 ためしにcommon.cssにいろいろ書いたところ、反映されたので、common.cssそのものは参照できていると思うのですが・・・ ご教授いただければ幸いです。
- ベストアンサー
- HTML
- phpでこのイコールは代入演算子ですか？ <l
phpでこのイコールは代入演算子ですか？ <link rel="stylesheet" type="text/css" href="stylesheet.css"> ↑このイコールです link relにstylesheetを代入するという意味ですか？ ↓他にもたくさんありますが、このイコールは代入演算子なんですか？ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body>
- ベストアンサー
- PHP
お礼
ありがとうございます。