Webmemo

Web制作の備忘録

0313−レスポンシブ復習&疑問等

こんばんは。

出先などでついスマホを閲覧してしまいますよね。

若い人はPCを持たずスマホ閲覧のみで事足りているというデータもあるそうです。

というわけで今日は以前授業でやったレスポンシブ制作のおさらいをします。

 

 【基礎的な用語】

•viewport(ビューポート)とは

「表⽰示領領 域」のこと

 

•densityとは
160dpiを基準にして対象のデバイスの解像度度を倍数で表したもの。

画⾯面解像度度が異異なるデバイスの表⽰示を同じ大きさに見える様にする仕組み

 

•densityに基づいたビューポート

=デバイス画⾯面解像度度/density値

 

•メディアクエリとは

メディアクエリとは、閲覧者の出力メディア(画面サイズやOS)に合わせて、スタイルシートcss)内に適用する条件を細かく指定する仕組みのこと。

メディア クエリは、CSS スタイルに適用できるシンプルなフィルタです。


 

授業では、デバイスに合わせsmlと命名したCSSを使用しました。

制作の流れがまとめられている記事はこちら。

レスポンシブWebデザインの作り方(簡単設定方法)

まとめ記事

今からでも間に合う!レスポンシブWebデザイン作り方のまとめ


 

【疑問など】

•<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″ />はどういう意味がある?

簡単なサンプルで学ぶ!ゼロからはじめるレスポンシブWebサイト初級編 ~メディアクエリを使ってCSSを分岐させる~

 

•結局css,htmlどちらに記述するの??

記事を読むとhead内読み込みでもcssで@media screen…と書く方法、

「どちらでもいい」と書かれているのでよくわからない…。

これは、cssファイルを3デバイス分作るか否かでどちらにするか変わるということでしょうか。

基礎がわかってないようなのでさらに易しそうな説明の記事を探す…。

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

Media Queriesで、画面サイズ別にCSSを切り替える方法

 

•ブレイクポイントはどこ?

レスポンシブウェブデザイン制作で悩むブレイクポイントのまとめ (2012年の記事)

レスポンシブWebデザインのブレークポイント調査 (こちらも2012年の記事)

レスポンシブのブレイクポイントを設定する前に知っておくべきこと (2014年の記事)

iPhone6で変わるブレイクポイントと、スマホサイト制作のポイントを振り返る (2014年の記事)

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)