回答編集履歴

2 ソース修正

ruuusaamarki

ruuusaamarki score 457

2017/03/06 12:14  投稿
こんな感じでいかがでしょうか。
```html
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="css/style.css" type="text/css">  
   <title>リンクメニュー</title>
   <style type="text/css">
       /*背景色*/
       body {
           background-color: #f6c0d1;
           border-color: #f6c0d1;
           color: #000000;
           text-shadow: 0 1px 0 #eeeeee;
       }
       /*タイトル*/
       h1 {
           font-size: 1.1em;
           letter-spacing: 0.1em;
           border-bottom: 3px dotted #aaa;
           padding-bottom: 10px;
           margin-bottom: 1.5em;
       }
       /*ボタンレイアウト＆デザイン*/
       a.css3button {
           font-family: Arial, Helvetica, sans-serif;
           /*font-size: 16px;*/
           color: #ffffff;
           padding: 10px 20px;
           background-color: #FFFFFF;
           background: -moz-linear-gradient( top, #FFFFFF 0%, #FFFFFF);
           background: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));
           border-radius: 5px;
           -moz-border-radius: 5px;
           -webkit-border-radius: 5px;
           border: 1px solid #04346c;
           -moz-box-shadow: 0px 1px 8px rgba(000, 000, 000, 0.7), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
           -webkit-box-shadow: 0px 1px 8px rgba(000, 000, 000, 0.7), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
           text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3);
           text-decoration: none;
           display: block;
           margin: 20px;
       }
       
       ul.rap {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-around;
       }
       /*ボタンサイズ*/
       li.btn {
           margin-top: 1em;
           margin-bottom: 3em;
           text-align: left;
           line-height: 0%;
           width: 50%;
           /*btnの数×widthの％が100%以下に設定しないと縦に並ぶ。*/
           list-style: none;
       }
   </style>
</head>
<body>
   <h1>スタイルシートを使う</h1>
   <p>テスト</p>
   <ul class="rap">
       <li class="btn">
           <a href="http://www.xxx.co.jp/" class="css3button" target="_blank"><img src="img/test1.png"></a>
       </li>
       <li class="btn">
           <a href="http://www.aaa.co.jp/" class="css3button" target="_blank"><img src="img/test2.png"></a>
       </li>
   </ul>
</body>
</html>
```
あと画像で指定している部分<img src="img/test1.png" alt="img使う場合はaltも指定するといいです">は
<a href="http://www.xxx.co.jp/" class="css3button" target="_blank">テスト１</a>
などとすると検索エンジンにわかりやすくなるかもしれません。
その際aタグやliタグにbackground等で画像を指定もできます。
参考までに。
1 ソースのインデントを修正しました

ruuusaamarki

ruuusaamarki score 457

2017/03/06 12:13  投稿
こんな感じでいかがでしょうか。
```html
 
<!DOCTYPE html>
<html>
   <head>
       <link rel="stylesheet" href="css/style.css" type="text/css">
       <title>リンクメニュー</title>
       <style type="text/css">
       /*
背景色
*/
body{
   background-color: #f6c0d1;
   border-color: #f6c0d1;
   color: #000000;
   text-shadow: 0 1px 0 #eeeeee;
}
/*
タイトル
*/
h1{
   font-size:1.1em;
   letter-spacing: 0.1em;
   border-bottom:3px dotted #aaa;
   padding-bottom:10px;
   margin-bottom:1.5em;
}
/*
ボタンレイアウト＆デザイン
*/
a.css3button {
   font-family: Arial, Helvetica, sans-serif;
/*
   font-size: 16px;
*/
   color: #ffffff;
   padding: 10px 20px;
   background-color:#FFFFFF;
   background: -moz-linear-gradient(
       top,
       #FFFFFF 0%,
       #FFFFFF);
   background: -webkit-gradient(
       linear, left top, left bottom,
       from(#FFFFFF),
       to(#FFFFFF));
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #04346c;
   -moz-box-shadow:
       0px 1px 8px rgba(000,000,000,0.7),
       inset 0px 0px 2px rgba(255,255,255,0.7);
   -webkit-box-shadow:
       0px 1px 8px rgba(000,000,000,0.7),
       inset 0px 0px 2px rgba(255,255,255,0.7);
   text-shadow:
       0px -1px 0px rgba(000,000,000,0.4),
       0px 1px 0px rgba(255,255,255,0.3);
   text-decoration:none;
   display: block;
   margin: 20px;
}
ul.rap{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
}
/*
ボタンサイズ
*/
li.btn{
   margin-top: 1em;
   margin-bottom: 3em;
   text-align: left;
   line-height: 0%;
   width: 50%;/*btnの数×widthの％が100%以下に設定しないと縦に並ぶ。*/
   list-style: none;
}
       </style>
   </head>
   <body>
       <h1>スタイルシートを使う</h1>
       <p>テスト</p>
<ul class="rap">
 <li class="btn">
     <a href="http://www.xxx.co.jp/" class="css3button" target="_blank"><img src="img/test1.png"></a>
 </li>
 <li class="btn">
     <a href="http://www.aaa.co.jp/" class="css3button" target="_blank"><img src="img/test2.png"></a>
 </li>
</ul>
   </body>
<head>
   <link rel="stylesheet" href="css/style.css" type="text/css">
   <title>リンクメニュー</title>
   <style type="text/css">
       /*背景色*/
       body {
           background-color: #f6c0d1;
           border-color: #f6c0d1;
           color: #000000;
           text-shadow: 0 1px 0 #eeeeee;
       }
       /*タイトル*/
       h1 {
           font-size: 1.1em;
           letter-spacing: 0.1em;
           border-bottom: 3px dotted #aaa;
           padding-bottom: 10px;
           margin-bottom: 1.5em;
       }
       /*ボタンレイアウト＆デザイン*/
       a.css3button {
           font-family: Arial, Helvetica, sans-serif;
           /*font-size: 16px;*/
           color: #ffffff;
           padding: 10px 20px;
           background-color: #FFFFFF;
           background: -moz-linear-gradient( top, #FFFFFF 0%, #FFFFFF);
           background: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF));
           border-radius: 5px;
           -moz-border-radius: 5px;
           -webkit-border-radius: 5px;
           border: 1px solid #04346c;
           -moz-box-shadow: 0px 1px 8px rgba(000, 000, 000, 0.7), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
           -webkit-box-shadow: 0px 1px 8px rgba(000, 000, 000, 0.7), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
           text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3);
           text-decoration: none;
           display: block;
           margin: 20px;
       }
       
       ul.rap {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-around;
       }
       /*ボタンサイズ*/
       li.btn {
           margin-top: 1em;
           margin-bottom: 3em;
           text-align: left;
           line-height: 0%;
           width: 50%;
           /*btnの数×widthの％が100%以下に設定しないと縦に並ぶ。*/
           list-style: none;
       }
   </style>
</head>
<body>
   <h1>スタイルシートを使う</h1>
   <p>テスト</p>
   <ul class="rap">
       <li class="btn">
           <a href="http://www.xxx.co.jp/" class="css3button" target="_blank"><img src="img/test1.png"></a>
       </li>
       <li class="btn">
           <a href="http://www.aaa.co.jp/" class="css3button" target="_blank"><img src="img/test2.png"></a>
       </li>
   </ul>
</body>
</html>
 
```
あと画像で指定している部分<img src="img/test1.png" alt="img使う場合はaltも指定するといいです">は
<a href="http://www.xxx.co.jp/" class="css3button" target="_blank">テスト１</a>
などとすると検索エンジンにわかりやすくなるかもしれません。
その際aタグやliタグにbackground等で画像を指定もできます。
参考までに。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る