リストとスタイルシートを利用してリンクボタンを作成する方法
- 初心者がHTML/CSSを使ってリンクボタンを作成する方法をまとめました。参考ページを利用してボタン縦方向に配置する方法や、ボタンを横方向に配置する方法についても説明しています。
- HPBv10を利用してHPを作成している初心者が、リストとスタイルシートを使ってリンクボタンを作成しようとしています。参考ページを利用してボタン縦方向に配置することはできたが、ボタンを横方向に配置する方法がわかりません。
- 初心者がHPBv10を使ってHPを作成している際に、リストとスタイルシートを利用してリンクボタンを作成しようとしています。参考ページでボタンを縦方向に配置する方法を理解できましたが、横方向に配置する方法がわかりません。お助けください。
- ベストアンサー
リストとスタイルシートを利用してリンクボタンを作成しているのですが・・・。
ＨＰＢｖ１０を利用してＨＰを作成している初心者です。 参考ページ（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; }
- yoshiki3
- お礼率30% (27/88)
- ホームページ作成ソフト
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
参考ページのURLは見えなくなっているので、参考にしたもとの記述がわかりませんが、ULだけでなく、ULが囲むリストアイテムLIにも指定が必要だと思います。 あと、marginやpaddingなどでtop/left/right/bottomの四辺すべてに指定をするときは、いちいち記述しなくても、margin:0; とか padding:0; のように1行で済みますよ(^^; button.cssのUL { }の部分を下記に差し替えてみてください。 ---------- UL { list-style-type : none; margin: 0px; } UL LI { margin: 0px; float: left; } --------------- あとCSSやタグの意味を知りたい時、私が頻繁に使っているサイトがありますのでご紹介しておきますね。ある程度慣れてくるととても役立つと思います。
関連する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
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- Dreamweaverでリストを作成するとボックスからずれてしまいます
DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- スタイルシートのリンクの色
HPを作成していて、スタイルシートを利用してリンクの設定をしました。 a:link{color:#0066ff} と書いて色が変更できるだろうと思いきや、何度やっても紫色（オフィシャルの色？）にしかならないのですが、何がわるいのでしょうか？ 原因がわかりません。 ちなみに、<a href="">～</a>とつながってない設定には反応するみたいでちゃんと色が変更されます。 対応するファイルがあると反応して紫色になるみたいです。 なんか変な設定とかしてるんでしょうか？ 一応スタイルシートを全部載せておきます。 よろしくお願いいします。 <style type="text/css"> <!-- body { background-image : url(img/9ron/c-koutarou.jpg); background-position: 100% 100%; background-repeat:no-repeat; background-attachment:fixed; color:#336666; margin:0px; } A:link {color:#0066ff; text-decoration:none } table.head { width:100%; height:100%;} td.head1 { font-size:40px; font-family:'Comic Sans MS'; margin-bottom:10px; background-image : url(icon/bg/bg3.gif) ;} td.head2 { font-size:20px; font-family:'Arial Black'; background-image : url(icon/bg/bg3.gif) ;} h1 {font-size:14px; text-align:left; border-style:dashed; color:#336666; width:400px; margin:10px ;} --> </style>
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシート・・・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でサイドナビをつくっています。 リストをたてにし、1項目づつボーダーでかこっています。 IE でも ファイアーフォックスでもきれいに表示されるのですが、 ドリームウィーバー上では、左に余白ができる分、右に飛び出し、 その横のボックスが下にずれるということが起こっています。 ご指導お願いします。 ～html <div id="sidenavi"><img src="img/sidenavi.jpg" width="180" height="165"> <ul> <li> AAAAAAA</li> <li class="menu">BBBBBB</li> <li class="menu">CCCCCCC</li> <li class="menu">DDDDDDD</li> <li>HTML</li> <li>プログラム</li> </ul> </div> ～CSS #sidenavi { float: left; height: 600px; width: 180px; margin: 0px 0px 0px 2px; padding: 0px; background-color: #FFFFFF; background-image: url(img/rose.jpg); background-repeat: repeat-y; } ul { padding: 5 0 0 0px; margin: 0px; list-style-type: none; background-position: left; text-align: left; } li { width: 180px; height:25px; margin: 0 0 0 0px; padding: 5 0 0 10px; background-color: #DD041A; text-align: left; font-size: 14px; font-family: "ＭＳ Ｐゴシック", "Osaka"; border-top: 1px solid #CC0099; border-right: 1px none #CC0099; border-bottom: 1px solid #CC0099; border-left: 1px none #CC0099; color: #FFFFFF; font-weight: bold; } .menu{ margin-left: 0px; padding-left:19px; background-color: #ffffff; width: 180px; font-weight: normal; color: #333333; }
- ベストアンサー
- ホームページ作成ソフト
- リンクのスタイルシートについての質問
スタイルシートを作成しています。 リンクにアクションをつけたのですが 思うような動作にならずに、悩んでします。 ちなみに動作確認はIE６で行っています。 ◆現在の動き リンクにマウスをのせると箱が上下に動いてしまう。 ◆どうしたいか リンクにマウスののせても箱が上下に動かないようにしたい。 固定したいとうことです。 以下に作成したソースをのせておきますので わかる方いましたら教えていただけると幸いです。 a.menu01{ text-decoration:none; text-align: center; border:#FFF solid 1px; background-color:#DACD96; width:280px; font-size:15px; font-weight:bold; color:#FFF; padding:5px; display:block; letter-spacing: 5px; margin-bottom:10px; } a.menu01:active { margin-bottom:10px; } a.menu01:visited{ margin-bottom:10px; text-decoration:none; } a.menu01:hover { text-decoration:none; color:#AA8B62; background-color:#FFFFFF; margin-bottom:10px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSの継承について...
CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li で使った背景画（矢印）・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます） 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか？ それとも根本的な何かを履き違えしているのでしょうか？ 宜しくお願い致しますm(_ _)m
- 締切済み
- デザイナー・クリエイティブ職
お礼
HEERINGさん早速の回答有り難う御座いました。 CSSファイルを書き換えて実行したら正常に横一列に並んで表示されました。 それに「ＨＴＭＬクイックリファレンス」のページはビギナーな私には非常に参考になりそうです、まだまだ見栄えのいいページ作りは出来ていませんが勉強して頑張りたいと思います。 本当に有り難う御座いました。 ps 事後になりましたが参考ページのurl間違っていましたスミマセンhttp://www.wsb.jp/hpb/css/dan00.htm