- ベストアンサー
リストを利用してリンクボタンを作成
HPBv10を利用してHPを作成している初心者です。 参考ページ(http://www.wsb.jp/hpb/css/dan00.htm)を利用して「ボタン」を作成しようとしているのですが、ボタン縦方向に配置するのは出来たのですがこのページの下にあるボタンを 「横方向に配置する」方法が分かりません button.cssの編集で「位置」-->「回り込み」-->「左」にしているのですが横に表示されません。 おわかりになる方いましたらご教授宜しくお願いします。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
よく考えたらaのdisplay:blockは関係なかったです。すみません…。 display : block;はブロック要素にするという意味で、 本来インライン要素であるAタグをブロック要素にすることで、 高さや横幅など指定してボタンっぽい見た目にすることが出来ます。 実際に横並びにしているのはliに対する「位置」-->「回り込み」-->「左」の指定です。 これでliにfloat:leftが追加されるのだと思います。 階段状ってのが再現できないので、原因などについては CSSとHTMLを見せていただいた方が回答しやすいです。
その他の回答 (1)
- tenderfeel
- ベストアンサー率56% (215/379)
そのサイトに書いてありますよ。 ※ホームページビルダー10以前のバージョンをご利用の場合はソースへ直接書き込む操作が必要です。 HTMLソースを開き、display : block; をA要素に対して追加します。これを追加しないとボタンサイズとなる幅と高さが反映されません。 (例)HTMLソースを開き、次のように追加します。 A{ text-decoration : none; background-color : #66cc66; width : 100px; height : 30px; display : block; <!--この行を追加する--> }
お礼
tenderfeelさん「この回答への補足」で書き忘れたのですが「位置」-->「回り込み」-->「左」にしたらボタンが階段状に左下がりに配置されます、横1列になりませんでした。
補足
tenderfeelさん回答有り難う御座います。 button.cssのA要素にはdisplay : block;の1行は追加しているのですが・・・これはボタンサイズが反映されないとありますが「横方向に配列」と関係あるのでしょうか?。 お手数掛けますがもう少し教えて頂けないでしょうか? 宜しくお願いします。
補足
tenderfeelさん回答有り難う御座います、お言葉に甘えてファイルを添付します、宜しくお願いします。 ★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 BODY{ background-image : url(fish_k.gif); } H1{ color: #FFFFFF; background-color: #3366FF; background-image : url(../スタイルシート/ボタンの作成/sky1.gif); text-align: center; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } H2{ color: #FFFFFF; background-color: #3366FF; background-image : url(../スタイルシート/ボタンの作成/sky1.gif); text-align: center; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; } H3{ color: #FFFFFF; background-color: #3366FF; background-image : url(../スタイルシート/ボタンの作成/sky1.gif); text-align: center; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; } 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; } TH{ color: #FFFFFF; background-color: #3366FF; } TD{ color: #000099; background-color: #CCDDFF; } OL{ float : left; list-style-type : decimal; }