ホーム > Android

Androidのアーカイブ

CSS3でsubmitボタンとaリンクのデザイン共通化

スマートフォンサイトを制作中に、通常のリンクタグとformのsubmitボタンのデザインを共通化したい、というシチュエーションがあったので、メモ代わりに。
下図のようなデザイン統一を目指します。



まずは、ボタンのデザインをCSS3で定義します。
ここではgradient等の説明は省略します。
.button {
  background: #8fd324;
  background: -moz-linear-gradient(top, #b1e362 0%, #a2d847 50%, #8acb1f 50%, #7dbf0d 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #b1e362), color-stop(0.5, #a2d847), color-stop(0.5, #8acb1f), color-stop(1, #7dbf0d));
  border: 1px solid #5b9400;
  border-bottom: 1px solid #568a03;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: inset 0 1px 0 0 #c8eb8f;
  -webkit-box-shadow: inset 0 1px 0 0 #c8eb8f;
  box-shadow: inset 0 1px 0 0 #c8eb8f;
  color: #fff;
  font:16px "ヒラギノ角ゴ Pro W3",tahoma,arial;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #426b01;
  width: 200px;
}

.button:hover {
  background: #689b13;
  background: -moz-linear-gradient(top, #9ad055 0%, #8dc241 50%, #78b41b 50%, #6da70a 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9ad055), color-stop(0.5, #8dc241), color-stop(0.5, #78b41b), color-stop(1, #6da70a));
  cursor: pointer;
}

.button:active {
  -moz-box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  -webkit-box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  cursor: pointer;
}

submitボタン用のclass定義をします。
-webkit-appearanceはSafariのCSS3拡張プロパティで、Sarfari用のインターフェースを実現しているものなので、ここでは切っておきます。
input内ではfont指定が外れることがあるので、改めて定義しておきます。
.btn_submit {
  -webkit-appearance: none;
  font:16px "ヒラギノ角ゴ Pro W3",tahoma,arial;
}

続いてaリンク用のclass定義。
borderの解釈がinputとは違うので、左右borderの2pxを引いておきます。
.btn_alink {
  width: 198px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}


厳密に言うと、ブラウザによっては縦幅に若干誤差が出ます。
完全に同じになるのは、Google Chromeのみなので、Androidでは問題ないかと思います。


参考サイト:  スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ

iPhone/Androidサイトで文字サイズを固定する方法

AndroidやiPhone対応サイトを作る際、CSSで画像背景ボタンを作成したり、CSS3でリンクボタンを作成することがあると思いますが、
Androidのブラウザで文字サイズを変更した場合iPhoneを横に傾けた場合、リンクボタンで指定したheightの範囲を大幅に超えて文字がはみでる等、レイアウトが崩れることがあります。

CSSで-webkit-text-size-adjustのプロパティをnoneにすることで、機種やブラウザの設定に左右されず、指定したfont-sizeに固定することができます。

html,body {
  -webkit-text-size-adjust: none;
}

-webkit-text-size-adjustは、SafariやChromeで採用されているWebkit特有のプロパティで、初期値はautoです。
これにより、例えばiPhoneを横にした場合、画面の幅に合わせて文字の大きさが自動的に変わる、といった動作がおこります。

文字のサイズが変更されても問題ないサイトを制作するのが理想的ですが、レイアウトやデザイン上必要な際はこういった小技を使うこともありだと思います。


参考サイト:CSS HappyLife ZERO

ホーム > Android

検索
フィード
メタ情報

ページの上部に戻る