iphoneらしいスタイルシート(iphone.css)

iPhoneページを作っている時に、拾ってきたもの。

「あ！いかにも・・！！」っていうCSS。

[css]

html {  background-color: #c5ccd3;}
body {  -webkit-text-size-adjust: none;  font-family: HiraKakuProN-W3;  line-height: 1.25;}
/** * iPhoneらしいグレーの背景を利用するには、このクラスを使います。 */.iPhoneBody {  background-color: #c5ccd3;}
/** * iPhoneアプリのタイトルなどで使われています * h1要素などに使うとよいでしょう。挿入バーからも利用できます。 */.iPhoneHead {  height: 36px;  padding: 8px 3px 0;  border-top: 1px solid #cdd5df;  border-bottom: 1px solid #2d3642;  background-image: -webkit-gradient(linear, left top, left bottom, from(#b0bccd), to(#6d84a2));  background-color: #b0bccd;  width: 320px;}.iPhoneHead h1 {  font-family: HiraKakuProN-W6;  font-size: 18px;  color: #fff;  text-align: center;  text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

/** * アドレス帳などで「A」「B」などのインデックスに使われる見出しです。 * h2要素などに使うとよいでしょう。挿入バーからも利用できます */.iPhoneListTitle {  height: 20px;  line-height: 20px;  padding: 0px 10px;  font-family: HiraKakuProN-W6;  font-size: 14px;  color: #fff;  text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;  border-top: 1px solid #a5b1ba;  border-bottom: 1px solid #989ea4;  background-image: -webkit-gradient(linear, left top, left bottom, from(#909faa), to(#b8c1c8));  background-color: #909faa;  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;}
/** * アドレス帳のようなリストや、設定画面などの定義リストを構築できます * 文字数に制限があるので気をつけましょう */.iPhoneUL,.iPhoneDL {  margin: 9px 9px 16px;  border: solid 1px #a9abae;  -webkit-border-radius: 8px;  background-color: #fff;}
.iPhoneUL li,.iPhoneDL dd {  list-style-type: none;  height: 43px;  border-bottom: solid 1px #a9abae;  line-height: 43px;}

.iPhoneUL li:last-child,.iPhoneDL dd:last-child {  border-bottom: none;}
.iPhoneUL li {  padding: 0 10px;}
.iPhoneULIndex li {  border-bottom: solid 1px #d9d9d9;  overflow: hidden;  background-color: #fff;}
.iPhoneDL dt {  font-family: HiraKakuProN-W6;  width: 70px;  padding: 12px 5px 0 10px;  font-size: 14px;  clear: both;  width: 6em;}
.iPhoneDL dd {  padding: 0 10px 0 5px;  overflow: hidden;  text-overflow: ellipsis;  font-size: 14px;  white-space: nowrap;  margin-top: -30px;  text-align: right;  color: #385387;}

.iPhoneUL a,.iPhoneULIndex a,.iPhoneDL a {  text-decoration: none;  color: black;  -webkit-tap-highlight-color: rgba(2, 109, 236, 0.9);  display: block;  padding: 15px 0;}
a {  -webkit-tap-highlight-color: rgba(2, 109, 236, 0.9);  // タップ時の反転色}
/* ボタンスタイル */.iPhoneButton,.iPhoneButtonBlack {  margin: 0 auto;  width: 300px;
border: solid 3px #2d3137;  -webkit-border-radius: 10px;  box-shadow: 0 1px 2px rgba(0,0,0,.2);  padding: 2px;  text-align: center;}.iPhoneButton {  background: -webkit-gradient(linear, left top, left bottom, from(#eeefef), to(#bdbfc2));  background-color: #bdbfc2;}.iPhoneButtonBlack {  background: -webkit-gradient(linear, left top, left bottom, from(#6b6e74), to(#282e37));  background: #282e37;}.iPhoneButton a,.iPhoneButtonBlack a {  -webkit-border-radius: 5px;  display: inline-block;  text-align: center;  padding: .5em 0;  text-decoration: none;  font-weight: bold;  width: 300px;}.iPhoneButton a {  color: #000;}.iPhoneButtonBlack a {  color: #fff;}
/*戻るボタン*/.btnBack {  background: url(../images/bg_button_back.png) right center no-repeat;  padding-right: 5px;  height: 31px;  float: left;  margin-right: 5px;}.btnBackInner {  background: url(../bg_button_back.png) left center no-repeat;  height: 28px;  padding-left: 17px;  padding-top: 3px;}.btnBack a {  color: #fff;  font-size: 80%;  text-decoration: none;  text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;}

[/css]