HTMLを書く時に使うタグを整理しておく。
wordpressで作成しているため、
wordpressのテーマのCSSがあたっており、CSSを設定していないのにデザインがそれなりに整っています。
一旦、ここではHTMLの基本だけを記載しているので、CSSが気になる場合はChromeのデベロッパーツールなどで確認してください。
入力
とりあえず入力エリア(input)
<input type=”text”>
valueで値を持たせることもできます。その場合は以下。
ボタン
inputタグでボタン
<input type=”button” class=”sample-button” value=”ボタン”>
input[type=”button”].sample-button {
width: 200px;
border-radius: 2px;
background-color: #99CCFF;
color: black;
border: 1px solid black;
cursor: pointer;
}
buttonタグでボタン
typeは、button、submit、resetが設定できる
<button type=button class=”sample-button”>ボタン</button>
button[type=”button”].sample-button {
width: 200px;
border-radius: 2px;
background-color: #99CCFF;
color: black;
border: 1px solid black;
cursor: pointer;
}
チェックボックス
特に装飾とかしてないので、雑ですがとりあえず。
<div class=”customCheck”>
<input type=”checkbox” for=”chk1″ id=”chk1″>
<label for=”chk1″>A</label>
<input type=”checkbox” for=”chk2″ id=”chk2″>
<label for=”chk2″>B</label>
</div>
.customCheck {
display: flex;
align-items: center;
}
.customCheck input {
margin-right: 5px;
}
.customCheck label {
width: 50px;
margin-right: 10px;
}
ラジオボタン
特に装飾とかしてないので、雑ですがとりあえず。
<div class=”customCheck”>
<input type=”radio” name=”rdo” id=”rdo1″>
<label for=”rdo1″>A</label>
<input type=”radio” name=”rdo” id=”rdo2″>
<label for=”rdo2″>B</label>
</div>
.customCheck {
display: flex;
align-items: center;
}
.customCheck input {
margin-right: 5px;
}
.customCheck label {
width: 50px;
margin-right: 10px;
}
テキストエリア
<textarea rows=”5″></textarea>
スライダー
スライダーに関しては、こちらも参考にしてもらえると嬉しいです。
HTMLのrangeを使ってスライダーを作ってみようと思います。 まずはinputタグでrangeを使ってみる まずは単純にinputタグのtypeをrangeで作成。 min、max、stepを指定してあげただけのシン …
inputタグでスライダー
<input type=”range” value=”1″ min=”0″ max=”100″ step=”1″>
