システム開発ブログ

スマートフォン向けサイトのデザイン

山田

山田 (2011年9月14日 09:33)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / iPhone

こんにちは。

今回はスマートフォン向けのサイトで使用できるデザインについてです。

スマートフォンサイト作成では、HTML5とCSS3を使用し作成しますので 今まで画像を使用しなければ表現できなかったデザインもCSSで対応できるようになりました。

たとえば、下のようなグラデーションのバーをつくるとします。 1-iphone.jpg

photoshopのグラデーション情報をそのままソースへもってきて

* header { 
  position: relative; 
  border-bottom: 1px solid #273750; 
  border-top: 1px solid #ccd6e2; 
  height: 42px; 
  background: -webkit-gradient(linear, left top, left bottom, 
    from(#c142a4), 
    color-stop(0.48, #c146a2), 
    color-stop(0.52, #ad027a), 
    to(#d831a2) 
  ); 
}

というようにCSSを指定します。

また、文字に影を付けたい場合は、 

*h1 { 
  position: absolute; 
  top: 0; 
  margin: 0; 
  width: 100%; 
  color: #fff; 
  font-size: 20px; 
  font-weight: bold; 
  line-height: 42px; 
  text-align: center; 
  text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0; 
}

このように記述します。

ブラウザで見た場合です。画像を使わないでも綺麗にデザインすることができます。 3-iphone.jpg

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できますシステム診断・システムリフォームのお申し込みはこちらから。

システム開発ブログ

Twitterでilovex_officialをフォローしてください

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

ページのトップ