しなやか暮らし研究所パソコン処理ホームページ作成スマフォマークアップ

マークアップの定石：スマフォ用マークアップ

safariでボタンの角丸をなくす

HTML

<H2>iPhone(Safari)標準の長円ボタンを小角丸に</H2>
<FORM>
  <P>長円ボタン　無指定(標準)</P>
  <input type="button" value="入る">
  <P>小角丸ボタン　スタイルなし指定</P>>
  <input type="button" class="square"value="入る">
  </FORM>

CSS

input.square {
  -webkit-appearance: none;
}

ボタンの幅・高さ、角丸、グラデーション、シャドウ

safariの標準表示を角丸指定に先立ちキャンセルした場合

角丸指定だけだと標準表示が優先されて指定の角丸が付かない

HTML

<H2>ボタンの幅・高さ、角丸、グラデーション、シャドウ</H2>
<FORM>
  <P>幅、高さ、文字配置中心</P>
 
  <input type="button" value="入る" class="base">
  <P>角丸=10px</P>
  <input type="button" value="入る" class="base cornerR">
  <P>グラデーション</P>
  <input type="button" value="入る" class="base cornerR gradation">
  <P>文字影、枠</P>
  <input type="button" value="入る" class="base cornerR gradation shade">
  </FORM>

CSS

.base {
        width:200px;
    height:40px;>
    text-align:center;
}
.cornerR {
  -webkit-appearance: none;       /* without this this style doens't work. */
 
  border-radious: 10px;           /* CSS3*/
  -moz-border-radious: 10px;      /* Firefox */
  -webkit-border-radius: 10px;    /* Safari,Chrome */
}
.gradation {
  background: -webkit-gradient(linear, left top, left bottom, from(#060), to(#090));
  color: #FFF;
}
.shade {
  text-shadow: 1px 2px 3px #666;
  border: 3px #690 solid       /* Waku */
}

チェックボックス、ラジオボタンのクリック領域を拡大する

ボックス、ボタンの表示が拡大するとともにクリック領域がラベルの範囲を含め広がった

HTML

<form method="post" action="example.cgi">
<h4>チェックボックス</h4>
<p style="padding-left : 10px;"> チェックボックスのみクリック可(標準)
 
<input type="checkbox" name="q1" value="チェック1"> チェック1
<input type="checkbox" name="q1" value="チェック2"> チェック2
<input type="checkbox" name="q1" value="チェック3"> チェック3
</p>
 
<div class="larger">
チェックボックス領域全体をクリックできるように
 
<label onclick=""><input type="checkbox" name="q1" value="チェック4"> チェック1</label>
<label onclick=""><input type="checkbox" name="q1" value="チェック5"> チェック2</label>
<label onclick=""><input type="checkbox" name="q1" value="チェック6"> チェック3</label>
</div>
 
<h4>ラジオボタン</h4>
<p style="padding-left : 10px;"> ラジオボタンのみクリック可(標準)
 
<input type="radio" name="q2" value="はい"> はい
<input type="radio" name="q2" value="いいえ"> いいえ
<input type="radio" name="q2" value="どちらでもない"> どちらでもない
</p>
<div class="larger">
ラジオボタン領域全体をクリックできるように
 
    <label onclick=""><input type="radio" name="q3" value="はい"> はい</label>
    <label onclick=""><input type="radio" name="q3" value="いいえ"> いいえ</label>
    <label onclick=""><input type="radio" name="q3" value="どちらでもない"> どちらでもない</label>
</div>
 
<p><input type="submit" value="送信する"></p>
 
</form>

補足説明：
通常はチェックボックスやラジオボタンとその文字列を<label>～</label>で囲ってやれば、文字列をタップするとチェックが可能となるが、iOSの場合はこれが動作せず、クリック時空のイベントを呼び出すことで、無効だった、文字列のタップによるチェックが可能になる。

CSS

body {
    margin: 0;
}
 
.larger {
    padding: 10px 0 10px 10px;
}
 
.larger input[type="checkbox"] {
    margin: 5px 10px 5px 4px;
    -webkit-transform: scale(1.7);
}
 
.larger input[type="radio"] {
    margin: 5px 10px 5px 4px;
    -webkit-transform: scale(1.7);
}

補足説明：
通常のチェックボックス、ラジオボタンはスマートフォンでは表示が小さく、操作しにくい。そこでCSSでサイズを変更するがwidthとheightの指定はPCやAndroidでは無効なので、transformで指定する。

3 4 5