1ページ目 (1-1 of 1)
劇ぱわ6Plusでブラウザ幅に合わせたレイアウト調整にチャレンジしてみました。主にトップページだけですが。
もともとは細かいことを気にせず横幅固定にしていたのですが、ブラウザの横幅なんて日によっていろんな状態があるので、劇ぱわを開くたびにいちいちマウスでウィンドウ幅を広げる行動が面倒だったんですよね。あとはまあ、いろんな端末があるから横幅に制限があると横スクロール必須になってしんどい。
というわけで最近知った『レスポンシブデザイン』と『Media Queries』という手法にチャレンジです。
レスポンシブデザインは、最近ではPCとスマホやタブレットでレイアウト変更するデザインとして説明されることが多いみたいですが、今回はそこまではやらず、PCのブラウザだけ考えることにしました。
やり方自体は意外と単純ですね。
#main{ font-size: 180%; } @media screen and (max-width: 1000px){ #main{ font-size: 150%; } } @media screen and (max-width: 760px){ #main{ font-size: 120%; } }
のようにCSSで追加定義するだけで、横幅に応じてスタイルを変更できます。
ちなみに上記の指定では、760pxまでなら font-size:120% 、1000pxまでなら 150% 、それ以外では180% と段階的に変更できます。
なのであとはごりごりと横幅に合わせてスタイル定義していくだけなのですが、、、やり方は単純でもデザインはそれぞれ自分で考えなきゃいけないので、そのぶん手間暇は必要ですね。
あと、スマホやタブレットなどの横幅にピタッと合わせるなら、HTMLのmetaタグに『Viewport』を指定するといいようです。
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
横幅を端末の幅に指定するという記述です。劇ぱわ6Plusではこの指定はやってません。スマホ用に全部デザインし直す必要がありそうだったので。Viewport指定しなくてもMedia Queriesは使えるみたいです。ちなみに、劇ぱわのネタ帳ではViewport指定しています。
RSSも配信しています。RSSリーダーなどに登録することで、最新の更新を常に確認できます。
劇ぱわ6Plusでブラウザ幅に合わせたレイアウト調整にチャレンジしてみました。主にトップページだけですが。
もともとは細かいことを気にせず横幅固定にしていたのですが、ブラウザの横幅なんて日によっていろんな状態があるので、劇ぱわを開くたびにいちいちマウスでウィンドウ幅を広げる行動が面倒だったんですよね。あとはまあ、いろんな端末があるから横幅に制限があると横スクロール必須になってしんどい。
というわけで最近知った『レスポンシブデザイン』と『Media Queries』という手法にチャレンジです。
レスポンシブデザインは、最近ではPCとスマホやタブレットでレイアウト変更するデザインとして説明されることが多いみたいですが、今回はそこまではやらず、PCのブラウザだけ考えることにしました。
やり方自体は意外と単純ですね。
のようにCSSで追加定義するだけで、横幅に応じてスタイルを変更できます。
ちなみに上記の指定では、760pxまでなら font-size:120% 、1000pxまでなら 150% 、それ以外では180% と段階的に変更できます。
なのであとはごりごりと横幅に合わせてスタイル定義していくだけなのですが、、、やり方は単純でもデザインはそれぞれ自分で考えなきゃいけないので、そのぶん手間暇は必要ですね。
あと、スマホやタブレットなどの横幅にピタッと合わせるなら、HTMLのmetaタグに『Viewport』を指定するといいようです。
横幅を端末の幅に指定するという記述です。劇ぱわ6Plusではこの指定はやってません。スマホ用に全部デザインし直す必要がありそうだったので。Viewport指定しなくてもMedia Queriesは使えるみたいです。ちなみに、劇ぱわのネタ帳ではViewport指定しています。