ある朝の群青。

岐阜と名古屋を行ったり来たりしながら、いろいろなことを発信していきます。

レスポンシブ、始動。




こんにちは、学生のHacoです。
 
学生ですので毎日元気よく学校に通っているわけですが、とうとう本日のwebの授業からレスポンシブサイト制作に突入しました。
前々からレスポンシブに対して敷居を高く感じていたのでとうとう来たか・・・!」と身構えていましたが、いざ少しだけ触ってみると「いろいろいなことできてめっちゃおもろいやん!」と感じました!


といってもまだ基礎中の基礎、親指の爪先を入れた程度ですが、新しい知識に聞いてて楽しい!ワクワク!」となったので、記録がてら今回は書き置きしていうこうと思います。

それでは、以下メモ。
 








■まず・・・レスポンシブの大雑把な特徴まとめ

 

  • 多種多用のデバイスで閲覧される機会が増えているため、レスポンシブ対応が必要となる。

  • 1つのhtmlファイル「PC」「タブレット」「スマートフォン」に対応できる。

  • HTML・CSSそれぞれに特定のコードを書く事が必要。

  • 「CSSメディアクエリ」というCSS3要素を使いレスポンシブ対応させる。(今回はこれを授業で使う。)


■レスポンシブの基本

 

html側

「viewport」の設定
こちらを<head>内に書き加える。
<meta name="viewport" content="width=device-width,initial-scale=1">
 
たまに
<meta name="viewport" content="width=480px">
のように、content=“width=○○○”という書き方がされているサイトなどがあるが、これは他デバイスがiphoneしかなかった当時の書き方であるのでオススメはできないそうです。

今はAndroidの普及により、様々なサイズ規格のデバイスが利用されているので、
 
content="width=device-width,initial-scale=1"
 
この表記が適した方法だと考えられています。

これらの事例から、ネットで参考にするときは投稿された日付に要注意ということを学びました。
常に気を配り、最新の情報を仕入れることが大事であると。
特に新しい規格のデバイスが出てくる可能性は未だ高いので、これからその点にも気をつけていきたいと思います。



CSS側

 

1.CSS3の要素であるCSSメディアクエリの追加。 


CSSメディアクエリの大雑把な特徴

CSSメディアクエリに特定の決まったサイズはなく、常にデバイスの大きさが変わり続けるので情報には最新の注意を払わなければならない。
CSSメディアクエリの運用方法には2通りあり、対象サイトのページの量によって方法が変わる。
少ない場合は、1つのstyle.cssに書き加える。
多い場合は、「pc_style」「tb_style」「sp_style」のようにcssファイルをデバイスごとに分けて書く。

授業ではページ数が少ないサイトを取り扱うので、style.cssに付け加える方法で進めることになりました。
 

2.CSS側への書き込み。

下へ進む順に上書きされていくというcss読み込みの特徴を利用するため、css内の一番下へ書き込む。

@media screen and (max-width:640px) { 
    /* 画面サイズが640pxからはここを読み込む */
p{color:#ededed;}
}
@media screen and (min-width:641px) and (max-width:960px) {
    /* 画面サイズが641pxから960pxまでは
ここを読み込む */
p{}
}

デバイス幅
640px→スマートフォン
641px~960px→タブレット

ここに出てくる
max-width:640pxなどのwidth指定部分のことを「ブレイクポイント」と呼び、この指定範囲を超えるとデザインが不自然な形でぶった切れてしまう事もあるため、デザインによっては上手くレスポンシブ対応できない場合があるそうです。
その場合、スマートフォンサイト制作のようにmarginやwidthなどを%指定して作り上げる方法で対応できます。

@media screen〜 部分の { } 内にプロパティ等を書いていく事で、指定範囲内での装飾が可能となります。
 

PCでご覧の方は、デモページで画面の横幅を変えてみてください。
こういうことができると授業で教わったときは「指定範囲でデバイスごとに背景画像を変えてみたりいろいろできるんじゃん!」なんて単純にワクワクしてました!
三日三晩触っていられる説浮上の予感です・・・!笑


以上が本日の授業内容まとめとなります。
次週からは順次コードを書いていく形となるので、また何らかで更新していきたいと思います。
では、今回もお付き合いありがとうございました!