この記事のURLをスマートフォンに送る この記事のURLをスマートフォンに送る

PCサイトをスマホ対応するという記事を1・2回と続けてみて、意外とボリューム満載になってしまったので、

一旦ここまでのCSSテクについてまとめます。

■第1回 メニュー編

■記事はこちら 

f:id:izit_kosuke:20110130014951p:image

タグでViewportの設定。メディアクエリによるCSS振り分け。

スマホサイトを作る上で欠かせない準備。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link media="only screen and (min-device-width:481px)" href="css/main.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width:480px)" href="css/imain.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" type="text/css" rel="stylesheet" />

★#containerブロックのリキッド化。overflow:hidden化。

ページの横幅より内部要素がハミ出して、無駄な横スクロールが発生するのを防ぐ。

iPhoneではかなり有効。Androidでは内部要素の横幅が親要素より上回らないように気をつける。

#container{
margin:0 auto;
/*スマホ向け*/
width:100%;
overflow:hidden;
/*/スマホ向け*/
}

★グローバルメニューの縦並び化&リキッド化。

PCサイトで横並び(float:left; width:固定)となっているのを、

float:none; width:100% とすることで実現。

#globalNav li{
margin:0;
/*スマホ向け*/
 float:none;
clear:both;
width:100%;
text-align:left;
padding:10px 0 10px 20px;
/*/スマホ向け*/
border:1px #999 solid;
background-color:#CCC;
display:block;
}

■第2回 HTMLとCSSで画像を操る編(前編)

■記事はこちら

f:id:izit_kosuke:20110207210143p:image

1.要素の取捨選択

要らない要素はdisplay:none;

<div id="header">
<div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
<div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div> 
</div>
#headerMain{
display:none;
}

2.HTMLとCSSだけで画像を振り分ける

HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none;

<div id="header">
<div id="logo">
<h1>
<a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" />
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" />
            </a>
</h1>
</div>
<div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
</div>

main.css(PC用CSS)→ .logo_i を display:none;

imain.css(スマホ用CSS) → .logo_pc をdisplay:none;

main.cssに追記

/*↓PCでは不可視にする↓*/
.logo_i{
display:none;
}
/*↑PCでは不可視にする↑*/

imain.cssに追記

/*↓スマホでは不可視にする↓*/
.logo_pc{
display:none;
}
/*↑スマホでは不可視にする↑*/

■第2回 HTMLとCSSで画像を操る編(後編)

■記事はこちら

f:id:izit_kosuke:20110208020129p:image

3.CSS3グラデーションの活用&疑似要素を使ったカスタマイズ

画像の代わりにCSS3グラデーションを使う。疑似要素beforeとafterを活用する。

※この記事はぜひとも本文を読んでほしいです(笑)

まず、メニューの要素構成のイメージです。

イメージのように、CSSの疑似要素を活用することでHTMLを書き換えずに、

デザインを構成することができます。

f:id:izit_kosuke:20110209223434p:image

グラデーション

#globalNav li{
/*↓スマホ向け (第1回 -メニュー編-)↓*/
margin:0;
float:none;
clear:both;
width:100%;
text-align:left;
/*/↑スマホ向け(第1回 -メニュー編-)↑*/
/*↓スマホ向け (第2回 -画像編-)↓*/
padding:0;
border:1px #4294E6 solid;
border-bottom:0px;
/*画像どおりのグラデーション
    background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#79b3e6),
		color-stop(0.50, #0066cc),
		color-stop(0.50, #003399),
		color-stop(0.69, #2e63b8),
		to(#4793d1));
	*/
/*グラデーション*/
background: -webkit-gradient(
linear, left top, left bottom,
from(#6d95fc),
to(#374ec4));
display:block;
/*テキストにドロップシャドウ*/
text-shadow:
0px 1px 1px rgba(0,0,0,1),
0px -1px 0px rgba(255,255,255,0.3);
/*/↑スマホ向け(第2回 -画像編-)↑*/
}

擬似要素でメニュー内容を表示。

/*aタグをブロック要素に*/
#globalNav li>a{
display:block;
width:100%; /*リキッドに*/
height:auto; /*リキッドに*/
padding:10px 0; /*paddingを上下に指定することで、少し高さを持たせる*/
color:#333;
text-align:left;
text-decoration:none;
}
/*aタグ内の先頭に、疑似要素を追加。aタグのtitle属性の内容を表示させる */
#globalNav li>a:before{
content:attr(title); /*aタグのtitle属性を表示*/
width:100%; /*リキッドに。*/
font-size:18px;
font-weight:bold;
padding-left:10px;
color:#FFF;
display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
vertical-align:middle; /*縦方向の中央寄せ。*/
}

擬似要素で「>」を表示。

/*矢印画像の追加*/
#globalNav li>a:after{
content:url(../images/arrowR.png); /*矢印画像URI*/
font-size:18px;
font-weight:bold;
padding-right:10px;
color:#FFF;
display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
vertical-align:middle; /*縦方向の中央寄せ。*/
}

まとめだけでも随分長くなってしまった。。。

ソース書かなきゃいいのかな。

追記:連載のタイトル変えました。この連載の主旨って、「PCサイトをスマホ対応する」っていうことだな~と気づきました(笑)

他の人気エントリ

新着エントリ

ノルウェー絵本「KUBBE(キュッパ)」映像化の音楽を作りました
Unityが使える方を探しています
デザイナーさん・イラストレーターさんを募集しています
Flash終了でアプリは消えないと思うよ?