- ベストアンサー
スタイルシートを使用したWEBの作成
現在、スタイルシート（CSS）を使用してHTMLファイルを作成しております。そこで、CSSの記述でわからない部分があります。 ul#policy li a:hover の記述はどのような意味を示しているのでしょうか？ ↓ ul#policy li a:hover { text-indent: -9988px; outline: none; } おそらく、大変基本的なことだと思いますが、ご教授頂ければ幸いです。
- sha-akaisuisei
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 こちらの記述は html記述では以下 <ul id="policy"> <li><a href="#">サンプル</a>←ココ</li> </ul> ココと書いてある部分のaタグ、つまりリンクに、 カーソルが触れたときに、何をするか、が書いてあります。 この記述では 文字の始まり位置を-9988pxする、と書いてあるので、 文字が左寄せで書いてある場合、消えます。 outline:none;はリンクしてある要素の外側に線を出したりすることができるのですが、 それを表示させないようにしてあります。 というわけでザックリいうと、上記に書いたＨＴＭＬのような部分にあるリンクは、 カーソルをのせると消える、といったカンジですね。 ですが、aタグにただtext-indent:-9988px;と記述していても、消えてしまうことはないので、 消してしまいたい場合には同様に ul#policy li a に display:block;と記述してあることが条件となります。 何かなさりたいことがあったりする場合には、ぜひ どうなっていて、どうしたいのかをこちらに教えていただけると答える側としても助かりますが、 今回は意味をお知りになりたいとのことだったので、以上で失礼いたします。 勉強がんばってください。 おせっかいかもしれませんが、勉強に役立ちそうなサイトをお教えしますね。 http://www.tagindex.com/
関連するQ&A
- スタイルシートでのメニュー作成で
今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでマウスオーバーを作成しています。
CSSでマウスオーバーを作成しています。 /**CSS内**/ #test { margin: 0; padding: 0; list-style-type: none; } #test li { text-indent: -9999px; width: 200px; height: 400px; margin: 0; padding: 0; background: url(aaa_ov.bmp) no-repeat -200px 0; ----- マウスオーバー時 } #test a { text-decoration: none; display: block; width: 200px; height: 400px; margin: 0; background: url(aaa.bmp) no-repeat 0 0; ----- 最初 } #test a:hover { text-decoration: none; background-color: transparent; background-image: none; } /**HTML内**/ <link rel="stylesheet" href="style.css" type="text/css" /> </HEAD> <BODY> <div align="center"> <ul id="test"> <li><a href="***.html">Home</a></li> </ul> </div> </BODY> としているのですが最初の画像も出ずうまくいきません。 画像パスも間違っていませんでした。 どのようにすればいいんでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- リスト項目でのメニュー作成
リスト項目を使いcssでメニューを作成しているのですが、下記のような記述でメニュー1の部分だけ違う色を指定したい場合、どのように記述すればよいのでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu li { list-style-type: none; float: left; padding: 0px; line-height: 22px;font-size:14px;width: 110px; margin-left: 2px;} ul#menu li a { text-decoration: none; display: block; / padding: 5px; color: #black; background-color: #8BCFDE } ul#menu li a:hover { background-color: #ff9999; color: #black; } </style> </head> <body> <ul id="menu"> <li><a href="#/">メニュー1</a></li> <li><a href="#/">メニュー2</a></li> <li><a href="#/">メニュー3</a></li> <li><a href="#/">メニュー4</a></li> <li><a href="#/">メニュー5</a></li> <li><a href="#/">メニュー6</a></li> </ul> </body> </html>
- ベストアンサー
- HTML
- メニューをスタイルシートで設定
画像を使用したメニューをULタグとLIタグで作成し、 スタイルシートで余白等の設定しましたが、画像の下に余白が入ってしまいます。 背景色をつけたところ、LIタグに余白がついていることは 確認できたのですが、これをなくす方法が分からずにいます。 HTML----------------------------------------------------- <UL> <LI><IMG src="img/img1.gif" width="265" height="21"></LI> <LI><IMG src="img/img2.gif" width="265" height="21"></LI> <LI><IMG src="img/img3.gif" width="265" height="21"></LI> </UL> CSS----------------------------------------------------- UL { list-style-type:none; margin:0px; padding:0px; } LI { padding:0px; margin:0px; } アドバイスを頂けると助かります。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- CSSでポップアップメニューを作成したがIEだけメニューが表示されません。
下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするには どのようにすればよいのでしょうか？（JavaScriptは未使用で作成） <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
- スタイルシート・・・borderが適用されない
横並びのメニューを作っていますがなぜかborderが適用されません。 多分余計な記述があるためだと思いますが分からなくなってしまいました。どなたか助けて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header-menu"> <ul class="sample"> <li><A href="#">メニュー１</A></li> <li><A href="#">メニュー２</A></li> <li><A href="#">メニュー３</A></li> <li><A href="#">メニュー４</A></li> </ul> </div> </body> </html> .header-menu { width: 400px; overflow: hidden; } ul.sample{ margin-top:20px; font-size:12px; padding-left:0; margin-left:0; } ul.sample li{ display: inline; } ul.sample li a{ width:85px; text-decoration:none; color: #fff; background-color: #FF7F50; padding:3px 0 3px 0; margin-right:7px; width:85px; float:left; border-width:1px; border-color:#CCCCCC; text-align: center; } ul.sample li a :hover { background:none; }
- ベストアンサー
- HTML
- CSSで外部ファイルのスタイルが読み込めません
不思議なことに<style>で囲った場合は、うまくいき、外部ファイル(link href)でcssを読み込んだときは、一部のレイアウト指定が乱れてしまいます。 HTML部分は <ul id="menu_bar"> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> </ul> CSS 部分は #menu_bar { width: 100%; height: 45px; padding: 0; margin: 0; margin-bottom: 2px; list-style-type: none; background: #ff7400; position: fixed; bottom: 0px; left: 0px; box-shadow: 0px -3px 15px rgba(0,0,0,0.4); // ボックス上に影をつける } #menu_bar li { width: 20%; float: left; padding: 0; margin: 0; text-align: center; border-spacing: 2px 2px; border-collapse: separate; } #menu_bar li a { width: auto; color: #fff; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 0; text-decoration: none; display: block; } #menu_bar li a:hover { background: #ffa443; } です。 外部ファイルと直接<style>で記述するときに違いが出るのは初めてです。考えられる原因が何かありますか？どのようにレイアウトが異なるかを画像添付しました。よろしくお願いします。
- ベストアンサー
- CSS
- リストとスタイルシートを利用してリンクボタンを作成しているのですが・・・。
ＨＰＢｖ１０を利用してＨＰを作成している初心者です。 参考ページ（http://www.wsb.jp/hpb/css/dan00.htm）を利用して「ボタン」を作成しようとしているのですが、ボタン縦方向に配置するのは出来たのですがこのページの下にあるボタンを 「横方向に配置する」方法が分かりません button.cssの編集で「位置」-->「回り込み」-->「左」にしているのですがボタンが階段状になり「横一列」に表示されません。 おわかりになる方いましたらご教授宜しくお願いします。 ★html file★ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title></title> <LINK rel="stylesheet" href="button.css" type="text/css"> </head> <body> <ul> <li><A href="page1.html">Menu1</A> <li><A href="page2.html">Menu2</A> <li><A href="page3.html">Menu3</A> </ul> </body> </HTML> ------------------------------------------------------------- ★css file★ P{ color: #000099; } A{ color : #3d3d3d; background-color : #bce9bc; text-decoration : none; text-align : center; padding-top : 3px; width : 100px; height : 30px; border-width : 5px; border-style : outset; border-color : #66cc66; display : block; font-size : 0.8em; font-family : Arial; float : left; } a:visited{ color : #3d3d3d; } A:HOVER{ <!--マウスが上にあるリンク --> background-color : #66cc66; border-width : 5px; border-style : inset; border-color : gray; text-decoration : none; font-style : italic; font-weight : bold; color : fuchsia; } A:ACTIVE{ color: #000000; text-decoration: underline; } UL{ list-style-type : none; padding-top : 0px; margin-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; float : left; position : normal; clear : none; } TH{ color: #FFFFFF; background-color: #3366FF; } TD{ color: #000099; background-color: #CCDDFF; } OL{ float : left; list-style-type : decimal; }
- ベストアンサー
- ホームページ作成ソフト
- IEの時に空白ができてしまします。
CSSを使ってホームページ制作をしはじめたのですが、まだまだ勉強不足の為修正の仕方がわかりません。申し訳ございませんがどなたか詳しいかた教えて頂けないでしょうか。 内容はと言いますとリモートロールオーバーを設定している際にＩＥで#Content01 ul li#menu01～03 aの背景画像の下に空白ができてしまうのです。FireFoxでは思い通り表示できているのですが。。。 ---ＨＴＭＬ--- <div id="Content01"> <!- コンテンツ01 -!> <ul> <li id="menu01"><a href="#"><span>あああああ</span></a></li> <li id="menu02"><a href="#"><span>いいいいい</span></a></li> <li id="menu03"><a href="#"><span>ううううう</span></a></li> </ul> </div> ---ＣＳＳ--- /* コンテンツ01 */ #Content01{ position:relative; background:url(../.jpg) no-repeat right top; width:800px; height:300px; } #Content01 ul li#menu01 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li#menu02 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li#menu03 a{ display:block; width:200px; height:100px; background:url(../.jpg) no-repeat left top; } #Content01 ul li{ position:relative; margin:0px; right:40px; top:0px; } #Content01 ul li a span{ display:none; } #Content01 li{ list-style:none; } #Content01 ul li#menu01 a:hover span{ position:absolute; top:0px; right:-40px; display:block; width:600px; height:300px; text-indent:-9999px; } #Content01 ul li#menu02 a:hover span{ position:absolute; top:-100px; right:-40px; display:block; width:600px; height:300px; text-indent:-999px; } #Content01 ul li#menu03 a:hover span{ position:absolute; top:-200px; right:-40px; display:block; width:600px; height:300px; text-indent:-999px; } #Content01 ul li#menu01 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 ul li#menu02 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 ul li#menu03 a:hover span{ background:url(../.jpg) no-repeat; } #Content01 a:hover{ border:none; } このような記述を致しております。 色んなサイトを見ながら作りましたので不適切な箇所も多いとは思いますがどうか宜しくお願い致します。
- ベストアンサー
- レンタルサーバ・ASP
- スタイルシート２
１．スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか？ <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ！！ といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような（くどい＾＾）気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ ２．さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル（省略できない）。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか＾＾ リンクできるのは、見やすく便利ですが・・・
- ベストアンサー
- その他（プログラミング・開発）
お礼
こんにちは。、 わざわざ、サイトまで教えて頂き感謝しております。 解決済みにしてしまって申し訳ありませんが、実はCSSを使用したWebサイトを突然作成することになり、非常に困っています。 HTMLファイルはそのまま文字を流し込むということで、理解できているのですが、CSSを使用するHTMLファイルを作成するとなると皆目解らない事だらけで質問させていただきました。 そもそも、HTMLファイル上でCSSとリンクさせる場合、CSSファイルとHTMLファイルがCドライブのルート上に存在する場合はどのように、記述するのか？ また、以下のHTMLファイルとCSSファイル存在する場合はどのような記述が適切なのかご教授して頂ければ幸いです。 →以下はhtmlファイルです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link rel="stylesheet" type="text/css" href="common/css/styles-site.css" /> <title>エントリー方法</title> </head> <body> <div id="container"><!-- 全部 --> <div id="header"><!-- 会社logo--> <h1> <a href="http://www.xxxx.co.jp"><img src="common/images/xxxx_logo.jpg" alt="XX" width="214" height="37" border="0" /></a><a href="./index.html"><img src="common/images/sinsotsu.jpg" alt="XXページ" width="130" height="37" border="0" /></a></h1> <ul> <li id="side01"><a href="http://www.xxxx.co.jp"><img src="common/images/corporate_top.jpg" alt="Corporate Top" width="105" height="15" border="0" /></a></li> <li id="side02"><a href="http://www.xxxxx.co.jp/xxxxx/index.html"><img src="common/images/recruit_top.jpg" alt="Recruit Top" width="86" height="15" border="0" /></a></li> </ul> </div> →以下はCSSファイルです。 @charset "UTF-8"; /* entry.html -----------------------------------------------------------*/ ul#policy { margin: 0px 0px 0px 10px; background: url(../images/entry_btn_back01.gif) no-repeat left top; } ul#policy li { margin: 0px 0px 12px 0px; } ul#policy li img { vertical-align: top; } ul#policy li a { display: block; width: 528px; height: 26px; } ul#policy li a:hover { text-indent: -9988px; outline: none; } div.about { margin: 30px 0px 30px 0px; } div.about p { margin: 20px 0px 20px 10px; } 以上、恐縮ですがよろしくお願い致します。