BUTTONデザイン

エンジニアに駆け出してから、まもなく10ヶ月になります。

振り返るとトライアンドエラーを繰り返し、少しずつではありますが、成長を感じています。

スタートの頃は、配列をひたすらデータ数分を記述していたのが、少し懐かしいです。

今となれば、数行で記述できることも成長の証かと思います。

本題に入ります！

<script language="javascript" type="text/javascript">

var btnhtml = ["", "<button class='b1'>BUTTON</button>", "<button class='b2'>BUTTON</button>", "<button class='b3'>BUTTON</button>", "<button class='b4'>BUTTON</button>"];

var btncss = ["", ".b1 {\nfont-size:20px;\ndisplay: inline-block;\npadding: 5px 15px;\ntext-decoration: none;\ncolor: #008080;\nborder: solid 2px #008080;\nborder-radius: 3px;\ntransition: .4s;\nmargin: 5px;\n}\n\n.b1:hover {\nbackground: #008080;\ncolor: white;\n}\n", ".b2 {\nfont-size:20px;\ndisplay: inline-block;\npadding: 5px 15px;\ntext-decoration: none;\ncolor: #000;\nborder: solid 2px #000;\nborder-radius: 3px;\ntransition: .4s;\nmargin: 5px;\n}\n\n.b2:hover {\nbackground: #000;\ncolor: white;\n}\n", ".b3 {\nfont-size:20px;\ndisplay: inline-block;\npadding: 5px 15px;\ntext-decoration: none;\ncolor: blue;\nborder: solid 2px blue;\nborder-radius: 3px;\ntransition: .4s;\nmargin: 5px;\n}\n\n.b3:hover {\nbackground: blue;\ncolor: white;\n}\n"];

for(var i=1; i<=5; i++){
function btnClick(i) {
btnTarget = document.getElementById("btn-output");
btnTarget.innerHTML = "<button class='b" + i +"'>BUTTON</button>";

htmlTarget = document.getElementById("html-output");
htmlTarget.innerHTML = "<input class='inBtn' type='button' value='html' onclick='OnButtonClick(" + i +");'/>";

cssTarget = document.getElementById("css-output");
cssTarget.innerHTML = "<input class='inBtn' type='button' value='css' onclick='OnButtonClick2(" + i + ");'/>";

copyTarget = document.getElementById("copy-output");
copyTarget.innerHTML = "<button class='inBtn' onclick='copy(" + i + ")'>Copy</button>";
	}

function OnButtonClick(i) {
htmlText = document.getElementById("output");
htmlText.innerHTML = btnhtml[i];
	}
	
function OnButtonClick2(i) {
csstarget = document.getElementById("output");
csstarget.innerHTML = btncss[i];
	 }
 
 //コピー機能
 function copy(i) {
 var copyTarget = document.querySelector("#output");
copyTarget.select();
document.execCommand("Copy");
alert("コピーできました！");
	}

 }//forend
</script>
 
<style>
body {
  font-size: 100%;
  font-family: 'Hiragino Maru Gothic ProN';
  background-color: #fff;
}

a {
color: #6a5acd;
font-weight: 900;
text-decoration:none;
}

#top {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}

#output {
border:solid 1px #000;
padding:10px;
width:80%;
height:40%;
border-radius:10px;
text-align:left;
font-size:11px;
}

.b1 {
font-size:20px;
display: inline-block;
padding: 5px 15px;
text-decoration: none;
color: #008080;
border: solid 2px #008080;
border-radius: 3px;
transition: .4s;
margin: 5px;
}
.b1:hover {
background: #008080;
color: white;
}

.b2 {
font-size:20px;
display: inline-block;
padding: 5px 15px;
text-decoration: none;
color: #000;
border: solid 2px #000;
border-radius: 3px;
transition: .4s;
margin: 5px;
}
.b2:hover {
background: #000;
color: white;
}

.b3 {
font-size:20px;
display: inline-block;
padding: 5px 15px;
text-decoration: none;
color: blue;
border: solid 2px blue;
border-radius: 3px;
transition: .4s;
margin: 5px;
}
.b3:hover {
background: blue;
color: white;
}

.inBtn {
margin:10px 5px 30px 5px;
font-size:14px;
}
</style>
</head>
<body>
<div id="top">
<center><h3>■■■ BUTTONデザイン ■■■<br>サンプルサイト</h3>
<hr>

<?
for($i=1; $i<=5; $i++){
echo "<input class='inBtn' type='button' value='D{$i}' onclick='btnClick({$i});'/>";
}
echo "<div id='btn-output'></div>";
echo "<br>";
echo "<div style='display:inline-flex'>";
echo "<div id='html-output'></div>";
echo "<div id='css-output'></div>";
echo "<div id='copy-output'></div>";

?>

<br>
</div>

 <textarea id="output" readonly></textarea>
    
 </center>
</div></body>

まだまだ途中ですが、html部分の記述を少なく書けるようになったのは、大きな進歩かなと。

それではまた。

BUTTONデザイン