ravenz weblog: 簡易レスポンシブwebサイトの作り方

前回の「レスポンシブウェブサイトの簡単な説明」に引き続き、

意味不明なwebの説明です。

今回は、本当にただの(恐ろしく適当な)tipsなので、
興味の無い方はすっとばしてくださいね！

というわけで今回は、

簡易レスポンシブwebサイトの作り方

をご紹介したいと思います。

レスポンシブwebサイトって何？は
こちら: 前回分をご確認ください。

ちなみに以下

HTML, CSSがある程度理解できる
Javascriptを使用しない、簡易なもので良い
IE旧バージョン非対応かもしれないが、とりあえずやってみたい

な方を対象とさせて頂きます。

※独学で対処した部分が多いので、間違ってる表記があればごめんなさい。

レスポンシブWEBデザインといっても
人によって様々な仕様があると思うのですが、

ひとまずサンプルページ

１

私のやり方では、まずPC用のデザインでコードを記入していきます。

以下一例 [responsive.html] *<body>部分のみ抜いています。

<!-- 以下より始まり -->
<div id="BigWrapper">
 <div id="wrapper">
  <h1>レスポンシブのテスト。(PCとモバイル向け)</h1>
  
  <div id="header"> 
   <div id="banner">
    ここは、#header(上部)の#banner(内側)です。here is #banner(inside of #header).
   </div>
  </div><!-- end #header -->

  <div id="container">
   <div id="contents">
    <div class="content">
     ここは、#contents(左側部分)の#content(上部)です。here is #content(insdie of #contents).
    </div>
    <div class="content">
     ここは、#contents(左側部分)の#content(下部)です。here is also #content(inside of #contents).
    </div>
   </div><!-- end #contents -->

   <div id="sides">
    <div class="side">
     ここは、#sides(右側部分)の#side(上部)です。here is #side(inside of #sides).
    </div>
    <div class="side">
     ここは、#sides(右側部分)の#side(下部)です。here is also #side(inside of #sides).
    </div>
   </div><!-- end #sides -->
  </div><!-- end #container -->

  <div id="footer">
   <div id="footinner">
    ここは、#footer(下部)の#footinner(内側)です。here is #footinner(inside of #footer).
   </div>
  </div><!-- end #footer -->

 </div><!-- end.wrapper -->
</div><!-- end.BigWrapper -->

サンプルページと上記のhtmlを比較をして、
まず位置関係を確認して下さい。

続いてPC用デザインのCSSを記述していきます。

以下一例 [responsive.css]　*記述の仕方が汚くてすいませんね。

@charset "UTF-8";

/******************************************************
ベースの設定
******************************************************/

*{margin: 0; padding: 0; text-align: center;}

html, body{width: 100%; height: 100%;}

html {font-size: 62.5%;}

body { 
 font-family: Verdana,Arial,Meiryo,メイリオ,"MS Pゴシック",Sans-serif;
 color:black;
 font-size: 1.4rem;
 line-height: 1.7;
 }

span{color: #777;}

h1{font-size: 3rem;}

p{margin-top: 30px;}

/******************************************************
ページの大枠
******************************************************/
#BigWrapper{width: 940px; margin: 0 auto;}
 #BigWrapper #wrapper{width: 900px; margin: 0 auto;}
 
/******************************************************
ヘッダー(上部)
******************************************************/

#header{
    height: 260px;
    margin: 0 auto 20px;
    padding: 20px;
    background: #ccc;
    }

 #header #banner{
    height: 260px;
    border: 1px solid black;
    background: #eee;
    }

/******************************************************
コンテナー部分(真ん中あたりね)
******************************************************/

#container{min-height: 500px;}

 /* コンテナー内のコンテンツ部分(左側) */
 #contents{
    float: left;
    width: 600px;
    min-height: 500px;
    margin-right: 20px;
    overflow: hidden;
    background: #ccc;}

  #contents .content{
        height: 218px;
        margin: 20px;
        border: 1px solid black;
        background: #eee;
        }
 
 /* コンテナー内のサイド部分(右側) */
 #sides{
    float: left;
    width: 280px;
    min-height: 500px;
    overflow: hidden;
    background: #ccc;
    }
 
  #sides .side{
        height: 218px;
        margin: 20px;
        border: 1px solid black;
        background: #eee;
        }
 
/******************************************************
フッター部分(下部)
******************************************************/

#footer{
    height: 250px;
    margin: 20px auto 50px;
    padding: 20px;
    background: #ccc;
    }

 #footer #footinner{
        height: 250px;
        border: 1px solid black;
        background: #eee;
        }

ひとまず、PC用にHTMLとCSSを記述してみました。

ブレイクポイント
(WINDOW幅の、どのサイズからデザインが切り替わるか)
を設定していきます。

ブレイクポイントのサイズはこちらなどを参考にしてみてはいかがでしょうか。
ちなみに私の場合は、何故か651pxです。(どこで見たかもはや覚えていない)

というわけで、
今回の例では、見る画面の幅が
『651px以上』はPC。
『650px以下』はスマホ向け、といった具合に設定するので、

[responsive.css]の一番最後に以下のコードを追記。

 /* ----------これからPC向けの変更を行います！------------------ */
@media screen and (min-width: 651px) {
/* ------------------------------------------------------------ */
ここにデザイン変更点のみを記述していきます。
}

地味ですが、最後の『 } 』これは忘れないでくださいね。
ふいにダメージをくらいます。

そしてこれも忘れてはいきません。

responsive.htmlの[<header>部分]に以下を追記。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />
  <!--[if lt IE 9]> 
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
  <![endif]-->

　<meta>部分は、スマホで見たときに拡大縮小できないように指示しています。
　次の行からの記述は、IE9以下へのおまじないみたいなものですか・・。
(ほんと適当ですいませんね)

続いて、デザインを実際に変更していきます。

デザイン変更点を responsive.cssに追記していく。

先ほどの

のcss内
『ここにデザイン変更点のみを記述していきます。』部分に
ひとまず、

で記述したcssをまるっとコピー・ペーストします。。

今回の例のresponsive.cssでは最初の[charset]表記の下部分からの以下

/******************************************************
ベースの設定
******************************************************/

〜中略〜

/******************************************************
フッター部分(下部)
******************************************************/

#footer{height: 250px; margin: 20px auto 50px; background: #ccc; padding: 20px;}
 #footer #footinner{border: 1px solid black; height: 250px; background: #eee;}

をコピーペーストします。

そして、

/* ----------これからPC向けの変更を行います！------------------------------------------ */
@media screen and (min-width: 651px) {
/* ------------------------------------------------------------------------------- */
〜中略　(ここにまるっと先ほどコピーしたのが記述してあるはず)〜
}

上記[@media screen......]表記より、

上部分が[スマホ向けのCSSデザイン]
中略部分(= 今はまだコピーされてるだけの部分)が[PC向けのCSSデザイン]

といった風になります。

そして、CSSを記述するのに重要なことがあります。

全く同じセレクタ等での指定が繰り返し出た場合、
下に記述したものを優先する。

です。
この特性などを理解した上で、
まずは上部分=スマホ向け
を、スマホ向けにデザイン変更します。

@charset "UTF-8";


/******************************************************
ベースの設定
******************************************************/
*{margin: 0; padding: 0; text-align: center;}

html, body{width: 100%; height: 100%;}

html {font-size: 62.5%;}

body { 
 font-family: 'Doppio One',Verdana,Arial,Meiryo,メイリオ,"MS Pゴシック",Sans-serif;
 color:black;
 font-size: 1.4rem;
 line-height: 1.7;
 }

a {text-decoration: none;}
img {border-style:none;}
ul {list-style: none;}

span{color: #777;}

h1{font-size: 2rem;}

p{margin-top: 30px;}

/******************************************************
ページの大枠
******************************************************/
#BigWrapper{width: 100%; margin: 0 auto;}
 #BigWrapper #wrapper{width: 95%; margin: 0 auto;}
 
/******************************************************
ヘッダー(上部)
******************************************************/

#header{height: 150px; margin: 0 auto 20px; background: #ccc;  padding: 20px;}
 #header #banner{border: 1px solid black; height: 150px; background: #eee;}

/******************************************************
コンテナー部分(真ん中あたりね)
******************************************************/

#container{min-height: 500px;}

 /* コンテナー内のコンテンツ部分(左側) */
 #contents{background: #ccc; overflow: hidden; margin-bottom: 20px;}
 
  #contents .content{border: 1px solid black; margin: 20px; height: 218px; background: #eee;}
 
 /* コンテナー内のサイド部分(右側) */
 #sides{ min-height: 500px; background: #ccc; overflow: hidden;}
 
  #sides .side{border: 1px solid black; margin: 20px; height: 218px; background: #eee;}
 
/******************************************************
フッター部分(下部)
******************************************************/

#footer{height: 150px; margin: 20px auto 50px; background: #ccc; padding: 20px;}
 #footer #footinner{border: 1px solid black; height: 150px; background: #eee;}
 
/* ----------これからPC向けの変更を行います！------------------------------------------ */
@media screen and (min-width: 651px) {
/* ------------------------------------------------------------------------------- */

上記でハイライト部分が修正した箇所です。
スマホ向けに文字を小さくしたり、floatを解除したりしています。

サンプルページで作成した今回のパターンでは、
この時点でもうレスポンシブになっているはずです。

文字のサイズなどを変更した部分も、
下に記述した分がPCでは優先して反映されるので
特に問題はないのですが、

優先して反映される、ということは
値がダブっているプロパティは繰り返し記述する必要はないです。

なので、

CSSの、余計な記述を消す。

をしていきます。
(しなくても大丈夫なんですけどね。)

以下、余計なのを消したあとの下部分の記述

/* ----------これからPC向けの変更を行います！------------------------------------------ */
@media screen and (min-width: 651px) {
/* ------------------------------------------------------------------------------- */


/******************************************************
ベースの設定
******************************************************/
*{}

html, body{}

html {}

body {}

a {}
img {}
ul {}

span{}

h1{font-size: 3rem;}

.brnone{display: none;}
/******************************************************
ページの大枠
******************************************************/
#BigWrapper{width: 940px;}
 #BigWrapper #wrapper{width: 900px;}
 
/******************************************************
ヘッダー(上部)
******************************************************/

#header{height: 260px;}
 #header #banner{height: 260px;}

/******************************************************
コンテナー部分(真ん中あたりね)
******************************************************/

#container{}

 /* コンテナー内のコンテンツ部分(左側) */
 #contents{float: left; margin-right: 20px; margin-bottom: 0; width: 600px; min-height: 500px;}
 
  #contents .content{}
 
 /* コンテナー内のサイド部分(右側) */
 #sides{float: left; width: 280px;}
 
  #sides .side{}
 
/******************************************************
フッター部分(下部)
******************************************************/

#footer{height: 250px;}
 #footer #footinner{height: 250px;}


}

ちなみに[3]のスマホ用のデザイン変更の時点で、
最初の[1]で記述したPC用のCSSの記述から
プロパティを増やしていたりした場合は、

上記の削除している時に、
逆に「追記で、要らないプロパティの値を"none"などで記述していく」

という作業が出てくるので注意です。

わざわざ解除していってあげないと、下部分(PC用デザイン部分)では、
上述した分(スマホ向けに追記したプロパティの値)が有効になってしまいます。

というわけで、一所懸命書いたわりに

恐ろしく分かりづらい説明だったと思われますが。

以上となります。

(そして、あくまで独学での例なので
間違えてる可能性は否めません！)

2014年3月12日水曜日

簡易レスポンシブwebサイトの作り方

簡易レスポンシブwebサイトの作り方

0 件のコメント:

コメントを投稿