75日目 | web制作 - web制作 | 夜間飛行　備忘録

本日は…

■サイトに色々なSEO対策を施す
　●前提として…

　<meta name="description" content="ここに説明文を載せていく">
  descriotionは、各ページきちんと変えてあげたほうが効果が高い
　<title>にキーワード
　
　<h1>にもキーワード

このあたりははずせない。
※h1に画像を持ってきたい場合も、テキストを書いて100%ずらしなどで対応

　●モバイル対応にする
　１．レスポンシブ対応サイトにする
　２．動的な配信をする＞＞htaccsessを用いて、同じインデックスから、pc用とsp用に振り分けてやる
　
　・２は１と比べて、全く顔つきの違うサイトにしやすい。
　・１、２どっちにするかについては、もともとのサイトのデータ量が多い場合、１にすると大変なので、２にするという場合が多い

　＜レスポンシブ対応＞
　　style.cssに全部を書く場合と、PC用、タブレット用、SP用の各cssに書いてく場合とがある。

　①style.cssに書く場合

@charset "utf-8";
中略
@media screen and(min-width:641px){
  body{
  }
}
@media screen and(min-width:960px){
  body{
  }
}

640pxまではスマホ用
641px～960pxはタブレット用
960px～がパソコン用

※960pxは自分のサイトの最大サイズに設定する

→モバイルファーストで考えるやり方
　足し算：シンプルなスマホ用を作ってから他のメディアで表示したいものを加えていく考え方

※モバイル用に適用したものは、タブレット、PC用のCSSにも承継される
※タブレットに指定したものはPCに承継（つまり後ろに書いたものは上書きしないかぎり承継された状態で表示される）

ex)上でdisplay: none;をかけたらdisplay: block;が必要。
positionも、absoluteしてしまったら、staticをかけてやらなければならない

②スタイルシートを別々に作る方法

<link rel="stylesheet" href="style_l.css" media="only screen and (min-width:960px)">
<link rel="stylesheet" href="style_m.css" media="only screen and (min-width:641px) and (max-width:959px)">
<link rel="stylesheet" href="style_s.css" media="only screen and (max-width:640px)">

と言う形で適用cssを振り分ける。
あとはおのおのcssをあてていくだけ。

※共通のものはcommonを作って入れておく→一部だけ変えたいときはstyle_mなどに個々に当てていく

●フルードデザイン

max-width: 100%;

だけで実現可能★
ぬるぬるウィンドウサイズに合わせてサイズが変わる。
※maxがつかないと、画像の最大サイズより大きく引き伸ばされてしまうので、maxは必要。