質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4308閲覧

htmlとcssでのボタン横並び表示について

kumakumatan

総合スコア213

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/03/06 02:48

htmlとcssを利用してメニュー画面を作成しようとしています。
現在だと、縦並びにボタンが表示されます。それを横並び(間にスペース)に
するにはどうしたらいいでしょうか?
下記にソースを記述するのでご教示、宜しくお願いします。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <link rel="stylesheet" href="css/style.css" type="text/css"> 5 <title>リンクメニュー</title> 6 </head> 7 <body> 8 <h1>スタイルシートを使う</h1> 9 <p>テスト</p> 10 <div class="btn"> 11 <a href="http://www.xxx.co.jp/" class="css3button" target="_blank"><img src="img/test1.png"></a> 12 </div> 13 <div class="btn"> 14 <a href="http://www.aaa.co.jp/" class="css3button" target="_blank"><img src="img/test2.png"></a> 15 </div> 16 </body> 17</html>

css

1/* 2背景色 3*/ 4body{ 5 background-color: #f6c0d1; 6 border-color: #f6c0d1; 7 color: #000000; 8 text-shadow: 0 1px 0 #eeeeee; 9} 10/* 11タイトル 12*/ 13h1{ 14 font-size:1.1em; 15 letter-spacing: 0.1em; 16 border-bottom:3px dotted #aaa; 17 padding-bottom:10px; 18 margin-bottom:1.5em; 19} 20/* 21ボタンレイアウト&デザイン 22*/ 23a.css3button { 24 font-family: Arial, Helvetica, sans-serif; 25/* 26 font-size: 16px; 27*/ 28 color: #ffffff; 29 30 padding: 10px 20px; 31 background-color:#FFFFFF; 32 33 background: -moz-linear-gradient( 34 top, 35 #FFFFFF 0%, 36 #FFFFFF); 37 background: -webkit-gradient( 38 linear, left top, left bottom, 39 from(#FFFFFF), 40 to(#FFFFFF)); 41 border-radius: 5px; 42 -moz-border-radius: 5px; 43 -webkit-border-radius: 5px; 44 border: 1px solid #04346c; 45 -moz-box-shadow: 46 0px 1px 8px rgba(000,000,000,0.7), 47 inset 0px 0px 2px rgba(255,255,255,0.7); 48 -webkit-box-shadow: 49 0px 1px 8px rgba(000,000,000,0.7), 50 inset 0px 0px 2px rgba(255,255,255,0.7); 51 text-shadow: 52 0px -1px 0px rgba(000,000,000,0.4), 53 0px 1px 0px rgba(255,255,255,0.3); 54 text-decoration:none; 55 display: block; 56 margin: 20px; 57} 58 59/* 60ボタンサイズ 61*/ 62div.btn{ 63 margin-top: 1em; 64 margin-bottom: 3em; 65 text-align: left; 66 67 line-height: 0%; 68 width: 70%; 69 70}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんな感じでいかがでしょうか。

html

1 2<!DOCTYPE html> 3<html> 4<head> 5 <title>リンクメニュー</title> 6 <style type="text/css"> 7 /*背景色*/ 8 body { 9 background-color: #f6c0d1; 10 border-color: #f6c0d1; 11 color: #000000; 12 text-shadow: 0 1px 0 #eeeeee; 13 } 14 /*タイトル*/ 15 h1 { 16 font-size: 1.1em; 17 letter-spacing: 0.1em; 18 border-bottom: 3px dotted #aaa; 19 padding-bottom: 10px; 20 margin-bottom: 1.5em; 21 } 22 /*ボタンレイアウト&デザイン*/ 23 a.css3button { 24 font-family: Arial, Helvetica, sans-serif; 25 /*font-size: 16px;*/ 26 color: #ffffff; 27 padding: 10px 20px; 28 background-color: #FFFFFF; 29 background: -moz-linear-gradient( top, #FFFFFF 0%, #FFFFFF); 30 background: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF)); 31 border-radius: 5px; 32 -moz-border-radius: 5px; 33 -webkit-border-radius: 5px; 34 border: 1px solid #04346c; 35 -moz-box-shadow: 0px 1px 8px rgba(000, 000, 000, 0.7), inset 0px 0px 2px rgba(255, 255, 255, 0.7); 36 -webkit-box-shadow: 0px 1px 8px rgba(000, 000, 000, 0.7), inset 0px 0px 2px rgba(255, 255, 255, 0.7); 37 text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3); 38 text-decoration: none; 39 display: block; 40 margin: 20px; 41 } 42 43 ul.rap { 44 display: flex; 45 flex-wrap: wrap; 46 justify-content: space-around; 47 } 48 /*ボタンサイズ*/ 49 li.btn { 50 margin-top: 1em; 51 margin-bottom: 3em; 52 text-align: left; 53 line-height: 0%; 54 width: 50%; 55 /*btnの数×widthの%が100%以下に設定しないと縦に並ぶ。*/ 56 list-style: none; 57 } 58 </style> 59</head> 60<body> 61 <h1>スタイルシートを使う</h1> 62 <p>テスト</p> 63 <ul class="rap"> 64 <li class="btn"> 65 <a href="http://www.xxx.co.jp/" class="css3button" target="_blank"><img src="img/test1.png"></a> 66 </li> 67 <li class="btn"> 68 <a href="http://www.aaa.co.jp/" class="css3button" target="_blank"><img src="img/test2.png"></a> 69 </li> 70 </ul> 71</body> 72</html> 73

あと画像で指定している部分<img src="img/test1.png" alt="img使う場合はaltも指定するといいです">
<a href="http://www.xxx.co.jp/" class="css3button" target="_blank">テスト1</a>
などとすると検索エンジンにわかりやすくなるかもしれません。
その際aタグやliタグにbackground等で画像を指定もできます。
参考までに。

投稿2017/03/06 03:10

編集2017/03/06 03:15
ruuusaamarki

総合スコア468

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kumakumatan

2017/03/06 04:14

ありがとうございます。 素晴らしいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問