こんにちは！
10月度のインターン生 Oigamiです。
現在課題として頂いている図書館サイトなんですけど、
レスポンシブWebデザイン
というものに挑戦してみようかと思っております
レスポンシブWebデザインって何？
今の時代、PCのブラウザでホームページを見られるよりも、スマートフォンやタブレットで閲覧される方が多いんじゃないですかね？
情報をしっかりユーザーに伝えるにはスマートフォンやタブレットへの対応が必要不可欠になってきていると言っても良いでしょう。
レスポンシブWebデザインはそんなスマホやタブレットに最適化されたホームページを実装できる技術です。
参考サイトなどを調べていると、HTMLとCSSだけで出来るみたいですね。
モバイルフレンドリー
2015年4月21日、世界で一斉にgoogle検索のアルゴリズムに「スマホ対応」が含まれました。スマホ対応にする事をモバイルフレンドリーと言います。
訓練校の先生が言っていたのはこれか・・・！？
スマホ対応していないと、検索結果順位が下がってしまう様です。
Webの仕事に就くとなると、必須の技能かなと思います
レスポンシブWebデザインの設定
やり方は色々あるみたいです。
私がやった方法は以下になりますが、まだ完成していませんので、訂正入る
かもです。
簡単に言うとHTML一つに対してスマホ用、タブレット用、PC用、3つのCSSを用意します。
読み込まれた画像のサイズでCSSを切り替えることにより、それぞれの機器に対応します。
具体的な設定方法
<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″ />
<!–端末の画面サイズの横幅に合わせてCSSを切り替える必要があるので、Viewportを挿入します。–>
<link rel=”stylesheet” media=”all” type=”text/css” href=”css/common.css” />
<link rel=”stylesheet” media=”all” type=”text/css” href=”css/top.css” />
<!– ※デフォルトのスタイル（common） –>
<link rel=”stylesheet” media=”all” type=”text/css” href=”css/tablet/tabletCommon.css” />
<link rel=”stylesheet” media=”all” type=”text/css” href=”css/tablet/tabletTop.css” />
<!– ※タブレット用のスタイル（tablet） –>
<link rel=”stylesheet” media=”all” type=”text/css” href=”css/smart/smartCommon.css” />
<link rel=”stylesheet” media=”all” type=”text/css” href=”css/smart/smartTop.css” />
<!– ※スマートフォン用のスタイル（smart） –>
タブレットもスマートフォンも下層サイトを作るので、ベースのCommonとそれぞれのスタイルを作っています。
次に、この作っておいたCSSにそれぞれ設定します。（数値は任意です。）
デフォルト(PC用)のCSSに記述
@media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
～以下、画面の横幅が769px以上の場合のスタイル記入～
}
タブレット用のCSSに記述
@media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
～以下、画面の横幅が768pxまでの場合のスタイル記入～
}
スマートフォン用のcssに記述
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#container{
width:100%;
}
～以下、画面の横幅が640pxまでの場合のスタイル記入～
}
あとはCSSを調節すればいけるそうです。
今回参考にさせて頂いたサイトはこちら
ほぼコピペさせて頂いております。
とりあえず今日の設定はここまで。
ここまで見てくださってありがとうございます
by Oigami