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

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【HTML,CSS】レスポンシブルwebデザイン

授業のメモ

RWD (Responsive Web Design)
同じhtmlの見え方を、デヴァイスや横幅別にスタイルシートで分けていくこと。
基本的にHTMLは変えない。
動的な配信
pcと sp フォルダに分けられる。
それぞれ別のHTMLで製作。
.htaccessというファイルを作りスマホで見た場合とpcで見た場合で、それぞれ違うファイルに分けていく。

実際に使われている レスポンシブル:動的な配信 の割合は 9:1ぐらい。

Google ウェブマスター向け公式ブログ
Google ウェブマスター向け公式ブログ: ウェブをさらにモバイル フレンドリーにするための取り組み

Googleのwebマスター向けガイドライン
Webmaster Guidelines - Search Console Help

webサイトがモバイルフレンドリーかテスト

ページの読み込みスピードチェック
PageSpeed Insights


Search Console内のFetch as Googleを使うとGooglebotの再クロールとレンダリングの方法をテストできる。

レンダリング (rendering)
データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成すること(レンダリング (コンピュータ) - Wikipedia)
breakpoint
レイアウトが変わる地点の横幅。

メジャーなタブレットの一番小さいサイズ(ipad mini)を基準にして、タブレットの最小サイズは768pxとされる。
タブレットより小さいサイズをスマホ用とすることもある。
(絶対な基準ではない)

同じ比率のまま縮小していくことをフルードと言う。

fluid
流動性、流れるような

レスポンシブでの記述

サイト幅をデバイスの幅に合わせる

<meta name="viewport" cpntent="width=device-width">

指定した横幅内でcssを上書きする。

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

}

レベルの指定

#idよりp#idのほうが優先される。
同じセレクタであれば問題なく上書きされる為、変化させたいセレクタはできるだけコピぺで対応する。