このテーマは、iPhone App用にボタンをサクッと作るためのテンプレートです。
サンプルとして3種類用意する。
| クラス名 | width | height | font size |
|---|---|---|---|
| .bsz2 | 137px | 137px | small |
| .bsz3 | 88px | 88px | small |
| .bsz4 | 64px | 64px | x-small |
buttonを生成用関数は、
def Button_(btn,clas,id='id'):
Hn="{0}"
return "".join(["<button class='{0}' id='{3}{2}'>{1}</button>"
.format(clas,Hn.format(x),i,id) for i,x in enumerate(btn)])
btnは、ボタンラベルの配列
clasは、bootstrap4のクラスを定義する。
idは、idのラベルを定義する。
通常のBootstrap4を用いない例
def normalButton():
return "".join(["<input type='button' value='Normal:{0}'/>"
.format(i) for i in range(12)])
このようにbootstrap4を用いると絵心ない人でもきれいなUIを作れます。
HTMLは、CSSを用いて大きさや並べ方指定して構成します。
iPhoneなどのスマートフォンなどでButton UIを作成するためには、ボタンのサイズとボタン間のマージンを設定することで見栄えのするUIを構築できます。
基本的な色は、
| 青 | 灰 | 緑 | 赤 | 黄 | 水 | 白 | 黒 |
|---|---|---|---|---|---|---|---|
| primary | secondary | success | danger | warning | info | light | dark |
Color Button Sample 139種類
一方HTMLによく使われる カラーデータは、以下の通りです。
sColor=["lightsalmon","salmon","darksalmon","lightcoral","indianred","crimson","firebrick","red","darkred","coral",
"tomato","orangered","gold","orange","darkorange","lightyellow","lemonchiffon","lightgoldenrodyellow","papayawhip","moccasin",
"peachpuff","palegoldenrod","khaki","darkkhaki","yellow","lawngreen","chartreuse","limegreen","lime","forestgreen",
"green","darkgreen","greenyellow","yellowgreen","springgreen","mediumspringgreen","lightgreen","palegreen","darkseagreen","mediumseagreen",
"seagreen","olive","darkolivegreen","olivedrab","lightcyan","cyan","aqua","aquamarine","mediumaquamarine","paleturquoise",
"turquoise","mediumturquoise","darkturquoise","lightseagreen","cadetblue","darkcyan","teal","powderblue","lightblue","lightskyblue",
"skyblue","deepskyblue","lightsteelblue","dodgerblue","cornflowerblue","steelblue","royalblue","blue","mediumblue","darkblue",
"navy","midnightblue","mediumslateblue","slateblue","darkslateblue","lavender","thistle","plum","violet","orchid",
"fuchsia","magenta","mediumorchid","mediumpurple","blueviolet","darkviolet","darkorchid","darkmagenta","purple","indigo",
"pink","lightpink","hotpink","deeppink","palevioletred","mediumvioletred","white","snow","honeydew","mintcream",
"azure","aliceblue","ghostwhite","whitesmoke","seashell","beige","oldlace","floralwhite","ivory","antiquewhite",
"linen","lavenderblush","mistyrose","gainsboro","lightgray","silver","darkgray","gray","dimgray","lightslategray",
"slategray","darkslategray","black","cornsilk","blanchedalmond","bisque","navajowhite","wheat","burlywood","tan",
"rosybrown","sandybrown","goldenrod","peru","chocolate","saddlebrown","sienna","brown","maroon",]
Visual studio 2019 を使ってcodingしているなら。
Web Compilerを用いれば簡単にscssからbootstrapを再コンパイルすることができます。
$theme-colors:(
"lightsalmon":#FFA07A,
"salmon":#FA8072,
"darksalmon":#E9967A,
"lightcoral":#F08080,
"indianred":#CD5C5C,
"crimson":#DC143C,
"firebrick":#B22222,
"red":#FF0000,
"darkred":#8B0000,
"coral":#FF7F50,
"tomato":#FF6347,
"orangered":#FF4500,
"gold":#FFD700,
"orange":#FFA500,
"darkorange":#FF8C00,
"lightyellow":#FFFFE0,
"lemonchiffon":#FFFACD,
"lightgoldenrodyellow":#FAFAD2,
"papayawhip":#FFEFD5,
"moccasin":#FFE4B5,
"peachpuff":#FFDAB9,
"palegoldenrod":#EEE8AA,
"khaki":#F0E68C,
"darkkhaki":#BDB76B,
"yellow":#FFFF00,
"lawngreen":#7CFC00,
"chartreuse":#7FFF00,
"limegreen":#32CD32,
"lime":#00FF00,
"forestgreen":#228B22,
"green":#008000,
"darkgreen":#006400,
"greenyellow":#ADFF2F,
"yellowgreen":#9ACD32,
"springgreen":#00FF7F,
"mediumspringgreen":#00FA9A,
"lightgreen":#90EE90,
"palegreen":#98FB98,
"darkseagreen":#8FBC8F,
"mediumseagreen":#3CB371,
"seagreen":#2E8B57,
"olive":#808000,
"darkolivegreen":#556B2F,
"olivedrab":#6B8E23,
"lightcyan":#E0FFFF,
"cyan":#00FFFF,
"aqua":#00FFFF,
"aquamarine":#7FFFD4,
"mediumaquamarine":#66CDAA,
"paleturquoise":#AFEEEE,
"turquoise":#40E0D0,
"mediumturquoise":#48D1CC,
"darkturquoise":#00CED1,
"lightseagreen":#20B2AA,
"cadetblue":#5F9EA0,
"darkcyan":#008B8B,
"teal":#008080,
"powderblue":#B0E0E6,
"lightblue":#ADD8E6,
"lightskyblue":#87CEFA,
"skyblue":#87CEEB,
"deepskyblue":#00BFFF,
"lightsteelblue":#B0C4DE,
"dodgerblue":#1E90FF,
"cornflowerblue":#6495ED,
"steelblue":#4682B4,
"royalblue":#4169E1,
"blue":#0000FF,
"mediumblue":#0000CD,
"darkblue":#00008B,
"navy":#000080,
"midnightblue":#191970,
"mediumslateblue":#7B68EE,
"slateblue":#6A5ACD,
"darkslateblue":#483D8B,
"lavender":#E6E6FA,
"thistle":#D8BFD8,
"plum":#DDA0DD,
"violet":#EE82EE,
"orchid":#DA70D6,
"fuchsia":#FF00FF,
"magenta":#FF00FF,
"mediumorchid":#BA55D3,
"mediumpurple":#9370DB,
"blueviolet":#8A2BE2,
"darkviolet":#9400D3,
"darkorchid":#9932CC,
"darkmagenta":#8B008B,
"purple":#800080,
"indigo":#4B0082,
"pink":#FFC0CB,
"lightpink":#FFB6C1,
"hotpink":#FF69B4,
"deeppink":#FF1493,
"palevioletred":#DB7093,
"mediumvioletred":#C71585,
"white":#FFFFFF,
"snow":#FFFAFA,
"honeydew":#F0FFF0,
"mintcream":#F5FFFA,
"azure":#F0FFFF,
"aliceblue":#F0F8FF,
"ghostwhite":#F8F8FF,
"whitesmoke":#F5F5F5,
"seashell":#FFF5EE,
"beige":#F5F5DC,
"oldlace":#FDF5E6,
"floralwhite":#FFFAF0,
"ivory":#FFFFF0,
"antiquewhite":#FAEBD7,
"linen":#FAF0E6,
"lavenderblush":#FFF0F5,
"mistyrose":#FFE4E1,
"gainsboro":#DCDCDC,
"lightgray":#D3D3D3,
"silver":#C0C0C0,
"darkgray":#A9A9A9,
"gray":#808080,
"dimgray":#696969,
"lightslategray":#778899,
"slategray":#708090,
"darkslategray":#2F4F4F,
"black":#000000,
"cornsilk":#FFF8DC,
"blanchedalmond":#FFEBCD,
"bisque":#FFE4C4,
"navajowhite":#FFDEAD,
"wheat":#F5DEB3,
"burlywood":#DEB887,
"tan":#D2B48C,
"rosybrown":#BC8F8F,
"sandybrown":#F4A460,
"goldenrod":#DAA520,
"peru":#CD853F,
"chocolate":#D2691E,
"saddlebrown":#8B4513,
"sienna":#A0522D,
"brown":#A52A2A,
"maroon":#800000);
@import "./scss/bootstrap";
詳しい解説は、
このような金銀銅も可能です。
<div class="d-inline-block p-5 bg-dark text-white">
<button class='bsz2 btn btn-gold m-1 rounded-pill'><h3><b>gold</b></h3></button>
<button class='bsz2 btn btn-silver m-1 rounded-pill'><h3><b>silver</b></h3></button>
<button class='bsz2 btn btn-bronze m-1 rounded-pill'><h3><b>bronze</b></h3></button></div>