<!doctype html>
<html>
<head>
<meta http-equiv="content-language" content="ja"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>表示の切り替えをJSでする</title>
<style type="text/css">
/*
CSSメモ
・calcはOpera Mini 2019年シェア168人 割合0%で使用できない
・Flexboxのブラウザ対応状況は基本的にどのブラウザも最新バージョンではFlexboxに対応
ただし、下記のブラウザには注意が必要。
IE 6-9 非対応
IE 10 ベンダープレフィックス(-ms-)が必要
Safari 6.1-8 ベンダープレフィックス(-webkit-)が必要
Android 2.1-4.3 ベンダープレフィックス(-webkit-)が必要
iOS Safari 7-8.4 ベンダープレフィックス(-webkit-)が必要
IEのシェア
Internet Explorer 8.0 0.39%
Internet Explorer 10.0 0.19%
Internet Explorer 9.0 0.18%
この事から、android向けならFlexboxを使用しても問題ない。
PCサイトなら用相談
*/
/*ボタンの形状*/
.usually_btn a {
display: inline-block;
font-family: 'Open Sans', sans-serif;
text-align: center;
text-decoration: none;
outline: none;
box-shadow: 0 0 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
box-sizing: border-box;
}
.usually_btn a:hover {
text-decoration: underline;
opacity: 0.8;
}
/*ボタンの大きさ*/
.xx-small_size{
width: 180px;
padding: 0 10px;
font-size: 12px;
font-weight: 400;
line-height: 45px;
border-radius: 7px;
}
.x-small_size{
width: 220px;
padding: 0 10px;
font-size: 14px;
font-weight: bold;
line-height: 41px;
border-radius: 6px;
}
.small_size{
width: 320px;
padding: 0 10px;
font-size: 18px;
font-weight: 400;
line-height: 54px;
border-radius: 5px;
}
.medium_size{
}
.large_size{
}
.x-large_size{
}
.xx-large_size{
width: 100%;
padding: 10px;
font-size: 1.5em;
font-weight: bold;
line-height: 1em;
border-radius: 5px;
}
/*ボタンの色*/
.bgcolor_green{
background: #0399a9;
color:#fff;
}
.bgcolor_white{
background: #fff;
color:#666;
}
.bgcolor_orange{
background: #f96700;
color: #fff;
}
.bgcolor_gray {
background: #414040;
color: #fff;
}
.bgcolor_red {
background: -webkit-linear-gradient(#ec0924 28%, #e0002a 100%);
background: -o-linear-gradient(#ec0924 28%, #e0002a 100%);
background: linear-gradient(#ec0924 28%, #e0002a 100%);
color: #fff;
}
</style>
</head>
<body>
<div class="btn_location">
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-small_size bgcolor_green" href="
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn mB--10"><!-- 位置margin調節 -->
<a class="x-small_size bgcolor_white" href="#"><!-- 大きさ、色、形 -->
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn mB--10"><!-- 位置margin調節 -->
<a class="small_size bgcolor_orange" href="
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn mB--10"><!-- 位置margin調節 -->
<a class="x-small_size bgcolor_gray" href="#"><!-- 大きさ、色、形 -->
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn mB--10"><!-- 位置margin調節 -->
<a class="x-small_size bgcolor_red" href="
<span>メンバー会員の方はこちら</span>
</a>
</div>
<hr>
<style type="text/css">
/* 縦並び */
.vertical_line {
width:80%;
max-width:600px;
margin:0 auto;
}
.vertical_line .usually_btn {
margin-bottom:15px;
}
/* 横並び */
.said_line {
margin: 0 auto;
max-width: 600px;
}
/* inline-block */
.said_line .usually_btn {
display: inline-block;
width: calc(50% - 10px);
box-sizing: border-box;
font-size:14px;
}
.said_line .usually_btn:not(:last-child) {
margin-right:14px;
}
/* float: left; */
.said_line2 {
overflow: hidden;
margin:0 auto;
max-width: 600px;
}
.said_line2 .usually_btn {
float: left;
width: calc(33% - 10px);
box-sizing: border-box;
font-size:12px;
}
.said_line2 .usually_btn:not(:last-child) {
margin-right:15px;
}
/* flexbox */
.said_line3{
display: -webkit-box;
display: -webkit-flex; /*Android2.3~*/
display: -ms-flexbox; /*IE9~用*/
display: flex; /*最新のブラウザのみであればflexだけでもよいかも*/
max-width: 600px;
margin: 0 auto;
}
.said_line3 .usually_btn {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
font-size:12px;
width: 33%;
}
*::-ms-backdrop, .said_line3 .usually_btn {
width: 33.33%; /* IE11 */
}
.said_line3 .usually_btn:not(:last-child) {
margin-right:10px;
}
</style>
<!-- 縦並び -->
<div>縦並び100%</div>
<div class="vertical_line">
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="#"><!-- 大きさ、色、形 -->
<span>メンバー会員の方はこちら</span>
</a>
</div>
</div>
<!-- 横並びinline-block -->
<div>横並びinline-block</div>
<div class="said_line">
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="#"><!-- 大きさ、色、形 -->
<span>メンバー会員の方はこちら</span>
</a>
</div>
</div>
<!-- 横並びfloat -->
<div>横並びfloat</div>
<div class="said_line2">
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="#"><!-- 大きさ、色、形 -->
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="
<span>メンバー会員の方はこちら</span>
</a>
</div>
</div>
<!-- 横並びflex -->
<div>横並びflex（IE9を考慮しなくてよい場合はこの方法がベスト）</div>
<div class="said_line3">
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="#"><!-- 大きさ、色、形 -->
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="
<span>メンバー会員の方はこちら</span>
</a>
</div>
<div class="usually_btn"><!-- 位置margin調節 -->
<a class="xx-large_size bgcolor_green" href="#"><!-- 大きさ、色、形 -->
<span>メンバー会員の方はこちら</span>
</a>
</div>
</div>
</div>
</body>
</html>
