Kaleidoscope このページをアンテナに追加 RSSフィード

2011-02-09

izit_kosuke2011-02-09

PCサイトをスマホ対応 CSSテク自己まとめ(1・2回まとめ)

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

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

■第1回 メニュー編

■記事はこちら 

f:id:izit_kosuke:20110130014951p:image


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

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--viewportの指定-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--/viewportの指定-->
<!--メディアクエリでPC用・スマホ用CSSを振り分け-->
<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" />
<!--/メディアクエリでPC用・スマホ用CSSを振り分け-->

<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回 HTMLCSSで画像を操る編(前編)

■記事はこちら

f:id:izit_kosuke:20110207210143p:image


1.要素の取捨選択

要らない要素はdisplay:none;

    <!--header-->
      <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><!--/header-->
#headerMain{
	display:none;
}

2.HTMLCSSだけで画像を振り分ける

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

    <!--header-->
      <div id="header">
        <div id="logo">
        <h1>
          <a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" /><!--PC時のロゴ class=logo_pcを指定-->
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" /><!--スマートフォン時のロゴ class=logo_iを指定-->
            </a>
          </h1>
        </div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
      </div><!--/header-->

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回 HTMLCSSで画像を操る編(後編)

■記事はこちら

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サイトをスマホ対応する」っていうことだな〜と気づきました(笑)

篠田麻里子画像篠田麻里子画像 2011/02/09 16:43
同意しますが、何が基礎なのか正確に知らないと、やったつもりで終わると思います。

izit_kosukeizit_kosuke 2011/02/09 17:27 >篠田麻里子画像さま
コメントの意味がよくわからないのですが…
基礎ができてないようでしたら、ご教授ください。

モンクレールモンクレール 2011/09/05 18:23 http://www.monkureru.comようこそ。
弊社はモンクレール商品通販を主な業務にして、海外の取引関係を運営しております。お客様にもっとも専門的、もっとも完璧的なモンクレール製品を提供して差し上げるように力を入れております。

モンクレールモンクレール 2011/09/07 14:20 http://www.monkureru.infoようこそ。
弊社はモンクレール商品通販を主な業務にして、海外の取引関係を運営しております。お客様にもっとも専門的、もっとも完璧的なモンクレール製品を提供して差し上げるように力を入れております。

モンクレールモンクレール 2011/09/08 17:31 http://www.monkureru.orgようこそ。
弊社はモンクレール商品通販を主な業務にして、海外の取引関係を運営しております。お客様にもっとも専門的、もっとも完璧的なモンクレール製品を提供して差し上げるように力を入れております。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/izit_kosuke/20110209/1297206708