- ベストアンサー
HTML 矢印（画像）の向きについて
ong_aの回答
- ong_a
- ベストアンサー率33% (11/33)
質問の意味を取り違えていなければ，次のように → ← をそのまま文字として書けばいいように思いますが．．． <a href="../＊＊/＊＊.html">← 前のページ （全角スペース）</a> <a href="../＊＊/＊＊.html">次のページ →</a>
関連するQ&A
- HTMLについて
HTML 矢印（画像）の向きについて よくHPの下にある 『 ← 前のページ 次のページ → 』 を表示させたいのですが、どのようにすればよいのかわかりません。 （矢印は画像） 現在の私のHTMLは <div id="go"><a href="../＊＊/＊＊.html">前のページ（全角スペース）</a> <a href="../＊＊/＊＊.html">次のページ</a> </div> CSSは #go a{ padding-left: 30px; background: url(../img/＊.gif) no-repeat left; } となっているので『 → 前のページ → 次のページ 』 と表示されてしまいます。 矢印が同じ向きに表示されるのはわかるんですが、divタグを別にしてCSSで矢印の向きを それぞれ指定しようとすると 『 ← 前のページ 次のページ → 』 となり改行されてしまいます。 同じ行に矢印の向きを別にして表示させるにはどのようにしたらよいのでしょうか？（矢印は画像で表示させたいです。） 誰か教えていただけると助かります。宜しくお願いします。
- ベストアンサー
- Windows XP
- 文字の両側に画像を配置するCSSのやり方
●AAAAA● ●BBBBB● ●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div> CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。 もうひとつ重ねればとおもい <div class=R>の中に<div class=R2>なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。 右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか？
- ベストアンサー
- CSS
- Chrome だと、画像が少し下にずれてしまう
こんにちは！ CSS初心者で、今回初めてＣＳＳを利用してホームページを作っています。 制作中に、行き詰ってしまい質問をさせていただきました。 メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています（ナビは、リストをfloatで横並びに表示しています）。 ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 元凶を、探してみたんですが、なかなか見つけられません。 わかる方がいらっしゃったら、教えていただけないでしょうか。 お粗末なＣＳＳコードですが（多分、無駄なコードがいっぱいありそう・・・） のせさせていたたきました。 よろしくお願いします。 CSS -------------------------------------------------------------- @import url(base.css); body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(images/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; height : 100%; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } #com_back{ background-image : url(images/bg_green.png); background-repeat : repeat-x; } #g_navi_back{ width : 100%; height : 80px; text-align : center; background-repeat : repeat; background-image : url(images/bg_g_navi.png); } #g_navi{ overflow : hidden; width : 900px; margin 0 auto; margin-left : auto; margin-right : auto; background-repeat : no-repeat; background-image : url(images/navi_base.png); height : 80px; } #g_navi ul{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #g_navi li{ text-align : center; width : 180px; float : left; border-collapse : collapse; background-position : left center; top : 50%; bottom : 50%; letter-spacing : 1px; line-height : 18px; } #g_navi li a{ display : block; padding-top : 20px; } #g_navi ul li a:link{ text-decoration : none; color : black; } #g_navi ul li a:hover{ background-image : url(images/navi_hover_g.png); background-repeat : no-repeat; background-position : center center; height : 80px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-repeat : repeat; height : auto; background-image : url(images/bg_white.png); } html ------------------------------------------------------------------------------ <!--外枠--> <div id="wrap"> <!--ロゴ--> <div id="com_back"><div id="com" ></div></div> <!--ナビ--> <div id="g_navi_back"> <div id="g_navi"> <UL style="list-style-type : none"> <LI><a href="index.html">ホーム</a></li> <LI><a href="**********">ご案内</a></li> <LI><a href="**********">ご利用方法</a></li> <LI><a href="**********">イベント詳細</a></li> <LI><a href="**********">アクセス</a></li> </UL></div> </div><!--ナビ_end--> <div class="clear"><hr /></div><!--ナビfloatクリア--> <div class="inner"><!--インナー-->
- ベストアンサー
- CSS
- 背景画像がつられてのびていくのはどうして？
お世話になります。 画像ファイルがno-repeatと指定しているのに bの画像が下だけどんどん長くなっていくのが不思議なんですけど これはどういうことなんでしょうか？ 教えてください。お願いします。 'HTML <div id="1"> <div id="2"> <div id="3"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </div> </div> 'css #1{ width: 900px; margin: 0 auto 0 auto; padding: 0 0 0 0; border-style: none; text-align: left; } #2 { width: 900px; padding: 0 0 0 0; border-style: none; background: #000 url("a.jpg") repeat-y; text-align: left; } #3 { width: 900px; padding: 0 0 0 0; border-style: none; background: url("b.jpg") no-repeat; text-align: left; }
- ベストアンサー
- HTML
- 制作したHTMLとCSSがうまく表示されません・・
3日間色々いじってますが、解決法がわからないため助けてください。 素人なもので、状況説明がわかりづらくてすいません。 WinVistaを使用して、無料テンプレート（配布元：http://pondt.com/内おすすめテンプレート左上 ビルガラス画像のものNo.18を使用）をKompozerで加工しました。 外部cssも使用してますが、フォルダからhtmlを開くと、IEでは正常に表示されますが、firefoxではうまく表示されません。 FFFTPでアップしたHPでは、IE・firefoxそれぞれ違った形に崩れてしまい、うまく表示されません。 （URL http://i.gmobb.jp/aki_enyce/） トップページはまだまともに表示されてますが、他ページが崩れています。 外部cssの一部を抜粋して記載します。 本当に困っています。どなたかお教えいただけますでしょうか。 よろしくお願い致します。 ≪CSS 各ページ共通部≫ div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.8; } div#wrapBg{ border-top: 1px #dedede solid; background: url(../../../images/haikeimain.jpg) no-repeat top; } div#header{ width: 960px; height: 79px; margin: 0 auto; text-align: left; background: url(../../../images/haikeiheader.jpg) no-repeat top; } div#header h1{ float: left; width: 116px; margin: 0px 0px 0px 0px; padding: 0px 0 0 0px; } div#header h2{ float: left; margin-left: 30px; margin-right: 10px; padding-top: 20px; } div#footer{ text-align: center; margin-top: 30px; padding-top: 5px; padding-bottom: 5px; background-color: #D3B688; } ≪トップページ以外の共通ページ（ヘアカタログページを除く）≫ div.wrapBox{ width: 960px; margin: 0 auto; padding: 30px 0; } div#mainContents{ width: 700px; float: right; } /*---- hair catalog画像 ----*/ div#mainContents div.topicsBox{ float: left; margin-left: 20px; margin-bottom: 40px; } div#mainContents div.firstItem{ float: left; margin-left: 30px; margin-bottom: 40px; } /*---- map 画像 ----*/ div#mainContents div.mapBox{ background: url(../../../images/illure/map.png) no-repeat; width: 695px; height: 425px; } div#leftContents{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: url(../../../images/baner/shiroki.gif) no-repeat top; width: 200px; float: left; padding: 0px; font-size: 15px; font-weight: bold; }
- ベストアンサー
- HTML
- HTMLのborderについてです
このHTMLとCSSを見てください HTML部分 <div id="frame"> <h2>Bookmark</h2> <ul> <li><a target="_blank" href="">ブログ</a></li> <li><a target="_blank" href="">google</a></li> </ul> </div> CSS部分 #frame { border-style:solid; border-width:1px; border-color:black; width: 200px; padding:0 1px; } h2{ background-image: url("ex05_titlebg.png"); background-repeat: repeat*20; border: #808080 2px solid; padding: 0 7px 0 } ul>li>a { text-decoration: none; } これで表示したときに上下の線と内容の間に隙間があいてしまいますこの隙間を埋めるにはどうしたらいいでしょうか？ あとliのところが左側に寄ってくれてなくて左側の線と間があいてしまっているのでこちらの間も埋めたいです 調べてみましたが分からず周りに詳しい知り合いもいないので質問しました もしこういう質問に特化した掲示板などがあるならそちらも合わせて教えていただきたいです
- ベストアンサー
- HTML
- 画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 htmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML
- 背景画像にロゴを重ねる方法を教えてください。
ＣＳＳで背景画像にロゴを重ねる方法を教えてください。 現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。 ご教授いただける方何卒宜しくお願いします。
- ベストアンサー
- HTML
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <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" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
お礼
アドバイス有り難うございます！！ しかし、私は画像で矢印を表示させたいんです！！ わかりますか？？