読者です 読者をやめる 読者になる 読者になる

RAZONA日誌

razonaに入社して正社員になるまでの間、日誌をつけることになりました。

razona入社11日目

目標

 

レスポンシブデザインに必要な物

 

昨日の記事で書いたレスポンシブデザインですが、

↓↓昨日の記事

いざやってみるとなると何を書いたらいいんだろう?

 

上司K「メディアクエリビューポートを使うのだ!」

 

と言われたので、調べてみました。

 

メディアクエリ

レスポンシブ Web デザインでは、メディアクエリーを使ってスクリーン幅に応じて CSS を切り替える

ビューポート

スマートフォンの多くは「Viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに Web ページを縮小して表示する。

 

なるほど、これを使えばレスポンシブになるわけか。

 

書き方↓↓

メディアクエリ

stylusでこんな感じで書く↓↓

sp()
@media all and (max-width: 719px)

 

ビューポート

コレをheadに追加↓↓

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

 

これであなたもレスポンシバー!

 

 

 

Photoshopでアセットしようぜ!

僕「あれ、psdファイルから画像を取り出す方法がわかんないぞ」

照「アセットっていう技を教えてやるよ!」

照「レイヤーをグループ化して、必殺アセット!

 

 これを使えば、透過処理もされたpngファイルを簡単に書き出すことが

できるそうです。とてもいい技を覚えました。

 

僕「ありがとう照さん!」

照「いいってことよ、じゃ俺は釣りに行ってくるぜ」

 

 

最後に

今日は、レスポンシブに必要なもの、

そして必殺技も覚えました。

また一つ成長できました。でわまた明日!