- ベストアンサー
リストを利用してリンクボタンを作成
ＨＰＢｖ１０を利用してＨＰを作成している初心者です。 参考ページ（http://www.wsb.jp/hpb/css/dan00.htm）を利用して「ボタン」を作成しようとしているのですが、ボタン縦方向に配置するのは出来たのですがこのページの下にあるボタンを 「横方向に配置する」方法が分かりません button.cssの編集で「位置」-->「回り込み」-->「左」にしているのですが横に表示されません。 おわかりになる方いましたらご教授宜しくお願いします。
- yoshiki3
- お礼率30% (27/88)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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さん「この回答への補足」で書き忘れたのですが「位置」-->「回り込み」-->「左」にしたらボタンが階段状に左下がりに配置されます、横１列になりませんでした。
補足
tenderfeelさん回答有り難う御座います。 button.cssのＡ要素にはdisplay : block;の１行は追加しているのですが・・・これはボタンサイズが反映されないとありますが「横方向に配列」と関係あるのでしょうか？。 お手数掛けますがもう少し教えて頂けないでしょうか？ 宜しくお願いします。
関連するQ&A
- スタイルシートのリストを利用してリンクボタンを作成
超初心者で、ＨＰＢｖ１０を使用しています。 「スタイルシートのリストを利用してリンクボタンを作成する」という下記のサンプルページ http://www.wsb.jp/hpb/css/dan00.htm# の「ボタン」を作成したいのですが、ソースをコピペしてプレビューしても「ダメ」でした そのままでは出来ないってことですか？とりあえずボタンが押された様な形になる htmlサンプルソースを教えて下さい。うまく表現（記述）出来ないですが宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- リストとスタイルシートを利用してリンクボタンを作成しているのですが・・・。
ＨＰＢｖ１０を利用してＨＰを作成している初心者です。 参考ページ（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; }
- ベストアンサー
- ホームページ作成ソフト
- オプションボタンを矢印キーで順序を決めて移動するには？
AccessVBAでの開発をしています。（Access2003） フォーム上にフレームを配置し、フレーム内にオプションボタン（ラジオボタン）を配置しています。 通常の動作として、オプションボタンはキーボードの矢印キーで移動できますが、 この順序を設定することは可能なのでしょうか？ オプションボタンは、縦５列、横５列の計２５個配置しており、 一番左の縦方向に移動後、その隣の列の縦方向・・・といった具合に 移動させたいのです。 縦１列で２５個並べたところ、上から下へ配置順に移動できるのですが、 列が複数で行も複数となると、意図した順に移動できなくなります。 何か良い方法をご存知の方、教えて下さい。 宜しくお願いします。
- ベストアンサー
- オフィス系ソフト
- リンクエラーの修正法を教えて下さい
ホームページビルダーで作成したリンクエラーの修正法を教えてください。 ホームページビルダーで作成したサイトを「サイトビュー」でみると 全てのページのリンクエラーを示す「×」印がついています。 確認してみると 「./sitetheme/hpb9htm10 1.css」 という「箇所？」がリンクエラーのようなのです。 HTMLソース画面で見てみると <title> ××××××× TOP</title> <link href="../sitetheme/hpb9tm10_1.css" rel="stylesheet" type="text/css"> </head> という個所がありました。 原因箇所がわかったのですが、これをエラーが出ないように修正する方法がわかりません… ｃｓｓを利用したサイトを作ろうとし、ｃｓｓのテンプレートを開いて作成したのですが、挫折し、結局ｃｓｓは使用していません。 topページを作成し、すべてのページをtopの複製から作成したので、すべてのページでエラーが表示されます。 特にサイト先などないと思うのですが、エラーが出ないようにすればどうすればいいのでしょうか? どのように修正すればいいのか教えていただけないでしょうか? よろしくお願いいたします。 ＊<title> ××××××× TOP</title>の「×」の個所は、私が作成したｈｐの名前が入ります。 補足
- 締切済み
- ホームページ作成ソフト
- submitボタンを横一列複数リンクするには?
自分のHP作成中に困っています。 OSはWindowsME，ブラウザはIE5.5です。 body内に設定したformの複数のsubmitボタンに それぞれリンクを張って、ページ中央に 横一列に並べたいのですが、以下のpにCSSで p { text-align:center; white-space:nowrap; } と設定しても、ボタンが中央に縦一列に 並んでしまいます(リンクは張れたのですが)。 <p> <form action="index.html"> <input type="submit" value="top"> </form> <form action="about.html"> <input type="submit" value="about"> </form> ： </p> ※実際のHTMLは<p>から全て改行無しで並べて います。全部で5個のボタンです。 CSSをやめて<p>の後のHTMLに<nobr>を書いても だめでした。縦一列だと場所も取るし、見栄えも 悪いのです。 当初はinputのtypeを"button"にして <input type="button" onclick="location.href='index.html'"> の様にして複数並べてみたのですが、このHPは PCと同時に出来れば携帯(i-modeだけでも)対応に したいので、上記の方法だとPCではOKでも 携帯(i-mode)からだとボタンを押しても何も 変わらないのです(docomoサイトで調べた所、inputで "button"は未対応なのと、携帯はJavaScript未対応 だからなのでしょうか?)。 submitボタンで上記の希望を満たせれば、携帯でも PCのデザイン的にもOKかな?と思うのですが、 どうしてもボタンを横一列に並べられず、困っています。 こういった事は不可能なのでしょうか? どなたかお教え下さいます様、お願い致します。
- 締切済み
- HTML
- リンク画像の配置。
ジオクリエーターでホームページを作っているんですが、 http://www.geocities.jp/tomo_totsukawa/index.html 下のほうで いろいろのボタンと、無地のボタン(まだページ無し)があるのですが、横にに配置になってます このボタンを縦に配置したいのですが、どうすればよいですか？ いろいろの下に 無地のボタンを配置したいのですが。
- 締切済み
- レンタルサーバ・ASP
- 複数のボタンを等間隔に、かつ中央に配置する
ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、 さらにその3つがちょうどページの中央に表示されるようにしたいです。 cssをどのように記述すればいいですか？ ↓下記のようなイメージにしたいです。 -------------------- -------------------- □ □ □ ←これがボタンです ↓htmlファイルです↓ <div class="button"> <input type="submit" value="＜＜ 戻る ＜＜" /> </div> <div class="button"> <input type="submit" value="選択リセット" /> </div> <div class="button"> <input type="submit" value="＞＞ 進 む＞＞" /> </div> ↓CSSファイルです↓ div.button { padding-right:35px; float:left; } 上記設定で、ボタンの左右間隔はいい感じにあいたのですが 全体的に左に寄ってしまってます。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ＨＰＢでの階層メニュー作成
ＨＰＢ１１でホームページを作成しています。メニュー項目が多くなったので、縦に大カテゴリーメニュー（ＨＯＭＥ・紹介・案内のボタンなど）を配置し、そこにカーソルをのせると小カテゴリー（メニュー・ジャンプ先・・・活動・問い合わせなど）の表示がされ、クリックすると、そのページに行くようにしたいのですが、検索等をしてもいいものが見つかりません。初心者の私にも分かりやすい「良いサイト」か、「実例集」があれば、ご教示ください！<m(__)m>
- ベストアンサー
- ホームページ作成ソフト
- レポート作成について その１
一度作成したレポートのレイアウトを変更することは 可能でしょうか？ 実は、印刷の向きを変更しようと「ページ設定」の 画面で、縦方向から横方向へ変更しても、用紙そのものは、縦向きに変わっても、実際のデータは、縦方向に 設定されたままのレイアウト。。 レポートでも表示形式を作成中や完成してからでも変更できるのでしょうか？（オートフォーマットなどでの利用が できるのか？）
- 締切済み
- オフィス系ソフト
- マクロ 複数のボタン作成
使用しているのは2010です。 ボタンを１シート上に２９個作りたいと思います。 そのボタンの大きさや文字をすべて同じにし、 横一列にきれいに並べて配置したいと思っています。 どのようにしたら、同じ大きさのボタンを作成できますか？ また、きれいに並べることができますか？
- ベストアンサー
- オフィス系ソフト
補足
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; }