ロト君のサイト by lotokunn

L'sCore ロト君のサイトへようこそ!

  1. TOP
  2. パソコン
  3. レスポンシブ化

レスポンシブ化

皆さん今日は。今晩は。ロト君です。
今回はサイトの方を「レスポンシブ化」したので簡単な手順を掲載したいと思います。

 

そうなのです!今まではレスポンシブにする方法があまり良く分かっていなかったので、スマートフォンなのでサイトを閲覧する際、文字が小さすぎたり、画像が小さくなったり、ウィンドサイズがおかしくなったりと色々使い勝手が悪かったです・・・・。

 

しかし、この魔法の呪文を使えば簡単にウィンドサイズを最適化してくれるのです!

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

↑のmeta情報はhtml内のheadタグに記載して下さい。
このviewportがとても重要で、これがないと上手く表示されません>m<
(私はこれが無かった為にグチャグチャな表示になっていましたww)

 

そして後はCSSの設定を↓の様な感じにします。

/* iPhone 縦 */
@media screen and (min-width:0px) and (max-width: 480px) {
/*処理したい内容*/
}
/* for iPad */
@media screen and (min-width:481px) and ( max-width:768px) {
/*処理したい内容*/
}
/* for iPad */
@media screen and (min-width:769px) and ( max-width:1024px) {
/*処理したい内容*/
}
/* for PC */
@media screen and (min-width:1025px) {
/*処理したい内容*/
}

「処理したい内容」各画面サイズ毎に記載します。
後は、上手い事divタグ要素を使い「display: none」などを使えば非表示などが使えます。

 

今回はここまで。参考になったURLは下記のものです。よろしかったらご参照下さい。(>ω<)ノシ
http://ichimaruni-design.com/2015/01/viewport/


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA



Hello!!

皆さんこんにちは!こんばんは!!ロト君です。

このサイトは私が興味を持ったモノやコトについて掲載をしていくサイトです。

主にパソコン関係やアニメ・ゲーム等について掲載すたいと思いますので、 どうぞ宜しくお願い致します!

コメント等はTwitter等を活用して頂けると有り難いです!!

Twitter: ロト君@lotokunn