スマートフォン用のCSS設定いろいろ

/*画像を使わないリンクボタン*/
a {
display: block;
width:300px;
font-size:20px;
padding:5px 20px 5px 20px;
text-decoration:none;
color:#000;
border:1px solid #000;
background-color: #dcdcdc;

/*テキストの影・RGBで半透明の白*/
text-shadow: 2px 2px 0px rgba(255,255,255,0.5);

＊・・・rgba(R,G,B,透明度);
/*ボックスの影・RGBで半透明の黒*/
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

background: -webkit-gradient(linear, left top, left bottom,from(#fff), to(#dcdcdc));
　background: -webkit-linear-gradient(top,#fff,#dcdcdc);
　background: -moz-linear-gradient(top,#fff,#dcdcdc);
background: linear-gradient(top,#fff,#dcdcdc);

/*タップカラー(iPhoneのみ)・RGBで半透明の黄色*/
-webkit-tap-highlight-color:rgba(256, 256, 0, 0.5);

タップ・・・カーソルを上に乗せた時の色
/*文字があふれた時の3点リーダー*/
text-overflow: ellipsis;
省略符号(３点リーダー)
overflow: hidden;
はみ出し部分を非表示
white-space: nowrap;
段落内を折り返ししない

————————————————————————-

.topimg{
background:url(img/topimg3.jpg) no-repeat bottom right;
background-size:cover;
padding:10px;
height:120px;
}

background-size:cover;

↑画面サイズに合わせて可変させるための指定
.topimg img{
width:60%;
}

@media only screen and (min-width: 571px) {
#wrapper{
max-width:960px;
}
.topimg{
background:url(img/topimg4.jpg) no-repeat bottom right;
background-size:cover;
padding:20px;
height:200px;
}
.topimg img{
width:auto;
}
}

↑幅が571px以上の時は画像を大きいサイズに変え、高さも120pxから200pxに変えています。