たまろぐ

レスポンシブ対応CSS全体の流れを把握 / WordPressのテーマを自作する!

2019年10月6日 02:29 カテゴリー: Wordpress

つ!い!に!

一番楽しくて、変な表示が連発しがちなCSSの編集に入っていきます!

全体のCSSの把握と、全体に反映させる部分のCSSを見ていきましょう!

おっと、その前にCSSの基礎知識を知らない方は下記の記事を読んでみてください。

全体の流れ


全体に反映させるCSS

/* ************************************************************************************************
 * ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PC用                                                       *
 * ************************************************************************************************/

@media screen and (min-width: 1050px){



/************************************** ?ヘッダー  ***********************************************/
	
ヘッダーのCSS
	
	
/************************************* ?コンテンツエリア  ***************************************/

メインカラムとサイドバーをまとめたカラムのCSS
		
/************************************* ?サイドバー  *********************************************/
	
サイドバーのCSS
	
/*********************************** ?メインエリア  ********************************************/
	
メインカラムのCSS
	
/******************************** ?記事ページ  ************************************************/
	
記事単独のページのCSS

/******************************** ?フッター  **************************************************/

フッターのCSS

/* ************************************************************************************************
 * ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? スマートフォン用 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? *
 * ************************************************************************************************/

@media screen and (max-width: 1050px){
	
	
	
/************************************** ?ヘッダー  ***********************************************/
	
ヘッダーのCSS
	
	
/************************************* ?コンテンツエリア  ***************************************/

メインカラムとサイドバーをまとめたカラムのCSS
		
/************************************* ?サイドバー  *********************************************/
	
サイドバーのCSS
	
/*********************************** ?メインエリア  ********************************************/
	
メインカラムのCSS
	
/******************************** ?記事ページ  ************************************************/
	
記事単独のページのCSS

/******************************** ?フッター  **************************************************/

フッターのCSS

}

流れはこんな感じです。

/*と*/で囲まれた文字はコメントアウトといい、CSSには反映されません。メモ書きに使うとわかりやすくて便利です。

レスポンシブデザインにするためのパソコンとスマートフォンの振り分け

レスポンシブデザインにするには閲覧しているスクリーンのサイズを取得して、それに合ったCSSを返す必要があります。

横幅1000px以上のデバイスに表示させるCSSを書くにはには下記のようにします。

@media screen and (min-width: 1000px){

ここにCSS

}

1000px以下、500px以上のデバイスに表示させる

@media screen and (min-width: 500px) and (max-width: 1000px){

ここにCSS

}

500px以下のデバイスに表示させる

@media screen and (max-width: 500px){

ここにCSS

}

この講座では1050px以上はPC、それ以下はタブレットとスマートフォン同じCSSを表示させるようにしています。

これで10年前から現役の僕のディスプレイにも対応する事が出来ているのでいいはずです。

あ、header.phpのheadの中にviewportの記載を必ずしてくださいね。

<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2" />

viewportの詳しい解説は下記リンクからお願いします。

まとめ

かなり簡略的なものになってしまいましたが、ものすごく長くなってしまうので、この後は今後の記事で。

ちなみに。

「/*」と「*/」で囲まれているのはコメントアウトといい、この間の文章や、コードはCSSに影響しません。メモ書きに使いましょう。

次の記事

WordPressのテーマを作るまとめ