スマホと高解像度ディスプレイに合わせた指定
本日の教材動画はこちら
今回はスマートフォンや、高解像度ディスプレイにどう画面表示を合わせるかを勉強していきましょう。
スマートフォンの「フィット」機能に対応する
スマホはPC向けのWEBページも見ることができるようになってます。これはブラウザが画面の解像度を、ページの表示に合わせる「フィット機能」が搭載されているからです。おかげで私たちはPC用のページを綺麗に見ることができますが、このフィット機能が作動すると、折角用意したメディアクエリが正しく反映されないことがあります。
フィット機能への対策
次のmetaタグをhead内に組み込んであげることで対策することができます→＜meta name="viewport" content="width=device-widht"＞。これで画面の幅にデバイスの幅を合わせるという指定になるようです。今までmetaタグは＜meta charset="UTF-8"＞のみ記載してましたが、これとは別にもう一行metaタグを増やす形になりますね！
googleは＜meta name="viewport" content="width=device-width, initial-scale=1"＞という記述方法を推奨しているようですし、調べてみたらやはりこちらのほうが実際に使われているようですので、利用する際は最後に一文つけ足して記述したほうがよさそうです。最後の一文の意味は「CSS ピクセルとデバイス非依存ピクセルが 1:1 の関係になるように指定」だそうです。
高解像度ディスプレイに対応する
Apple製品などに採用されてるRetinaディスプレイなどの高解像度ディスプレイは、表示が一般的なサイズの半分程度に縮小されて表示されることがあります。これは1ピクセルに対して2つのピクセルを使用して表示することで高解像度を実現しているからで、1ピクセルの大きさが普通のディスプレイと異なっています。なので想定していた文字サイズより小さかったり、画像なども小さく表示される結果になります。
高解像度ディスプレイへの対策
高解像度ディスプレイへの対策としては、medelia特性に次の部分を追記する形します→「-webkit-device-pixel-ratio:2 」最後の数字が1の場合は通常のディスプレイ、2の場合はRetinaディスプレイとなります。
これだけだとよくわからないので、実例のCSSを見てみたところ
@media (-webkit-min-device-pixel-ratio: 2)
{.class {background-image: url(image-2x.png);}}
こんな感じの記述になるみたいです。 これは「retinaディスプレイの場合、このクラスの背景画像はこっちのpngを利用する」という内容になるのかな？
ただこれはAppleがRetinaディスプレイを開発した際にWebKitを独自に拡張したものらしく、標準規格ではありません。じゃあ標準規格はどれだ？って話なんですが、標準規格は「resolution」という記述を用いるみたいです。
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx)
{.class {background-image: url(image-2x.png);}}
使い方としてはこんな感じのようです。この記載をしておけば色んなブラウザで対応可能となるようです。
正直何が何だがよくわかりませんが、この2つの記載をしておけば困ったことにならなさそうなので、サイトを作るときはひとまず上記をコピペして使えばいいのかな？！と思いました。…いや、ちゃんと参考サイト色々目を通したんですけどね…私には少々難しくて「なるほどね？？！！」ってならなかっただけなので、みなさんはきちんと下記参考サイト様達に目を通して理解を深めておくことをお勧めします…。
【参考サイト】
フィット機能への対応
コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて
viewportとは？設定方法とスマートフォン（android・iphone）で効かない原因
高解像度ディスプレイへの対応
メディア特性とは
本日の教材動画はこちら
メディア特性について
メディアクエリにはメディア特性を付け加えることができます。できますっていうかレスポンシブサイトを目指すなら必須の設定のようです。これも種類が多岐にわたりますが、ひとまずよく使う記述を見てみましょう
- width … 表示領域の横幅
- height … 表示領域の高さ
- max-width … 表示領域の横幅（この後の指定が適応される最大値）
- min-width … 表示領域の横幅（この後の指定が適応される最小値）
- device-width … デバイスの横幅
- device-heigh … デバイスの縦幅
- orientation … デバイスの向き（スマホ・ダブれっと向けの設定）
orientationは縦長がportrain、横長はlandscapeで指定します。使い方ですが、外部CSSで指定する場合このようになります。
＠media screen（min-width:480px）and（max-width:720px）｛CSSを記述｝ これで480~720pxまでのディスプレイはこのCSSを適応する事。という感じになります。レスポンシブサイトを作る場合はこの設定が必須のようですので、とても大事な要素と言えますね！
【参考サイト】
メディアタイプとは
本日の教材動画はこちら
メディアタイプとは
メディアタイプとは、メディアクエリを指定する際に「どんなデバイスであるか」を指定するのに使います。合計10種類あるようですが、よく使う基本的なものだけ見てみましょう。
- all … すべてのメディア
- screen … 一般的なディスプレイ全般（パソコンのスクリーン）
- projection … プロジェクター
- print … 印刷
記載方法について
htmlに直接書き込む場合は＜link rel="stylesheet" type="text/css" media="（メディアタイプを記載）" href="xxx.css"＞という風に。外部CSSに書き込む場合は＠media （メディアタイプを記載）｛（CSSを記述）｝という具合になります。
一番使うのは間違いなくscreenだと思うんですが、スマホの場合もここになるんでしょうかね？今の所メディアクエリがまだ何なのかよくわかってないので、ひとまず詳しく調べるのはやめにして次の勉強へ行くことにします！
【参考サイト】
メディアクエリとは
本日の教材動画はこちら
今回からなにやら新しい単語いついて勉強していきます。
メディアクエリとは
メディアクエリとは、CSSを利用して各種デバイスに合わせた表示・出力方法を指定することができるものです。デバイスの種類や表示解像度などをもとに、随時適切なものを自動的に選択してくれるものになります。
メディアクエリ＝レスポンシブサイトの基本！って感じでしょうかね？次にこのメディアクエリを指定していく方法をみていきましょう。
htmlで指定する
＜link rel="stylsheet" href="xxxx.css" media="（ここにメディアクエリを記述）"＞ という方法で指定ができます。ただこの書き方だと、xxx.cssにしかクエリが適応されませんので注意が必要。上記は複数指定することができますので、htmlでメディアクエリを指定する場合はいくつかパターンを用意して使う事になります。（この方法はブレイクポイントと呼ばれるそうです）
cssで指定する
CSSで指定する場合は＠media （メディアクエリの記述）｛ （CSSの記述）｝という方法で指定します。html指定とは違い、外部CSSなら複数パターンを用意しておき、それをページに読み込ませることで様々なデバイスに対応させることができます。また、外部CSSですので、＠mediaの外側に書かれているCSSは当然全て適応されるようになります。
レスポンシブサイトにするために、各デバイスに合わせた設定を行いましょう！！ということはなんとなーく理解しましたが、使ったことがないので今回の勉強だけだといまいちイメージがわかないですね…。次回は更に踏み込んで教えてくれるみたいなのでそちらで理解が深まることを期待します！
【参考サイト】
CSSで文字に影をつける
本日の教材動画はこちら
今回はCSSで文字に影をつけてみましょう。なんか前に似たようなこと勉強したよなーって思ってみてみたら、「影をつける方法について」記事ですでに自分で調べて勉強してたようなんですが、改めて教材としてでてきたので再度見ていきましょう。
text-shadow で文字に影をつける
使い方は至ってシンプルで text-shadow｛横方向にずらす数値 縦方向にずらす数値 ぼかし数値 色指定；｝です。実際に使ってみたほうが早いので早速見ていきましょう。
上記のようなシンプルなページを用意しました。この文字にCSSで影をつけていってみましょう。
グレー色を影を、少しぼかしてつけてみました。数値にはマイナス数値も使え、色は透明度をいじれるrgbaも利用可能です。また、影を複数つけることもできます。
全て実践したのがこちらになります。
しかしCSSで文字に影を微調節するより、影つけた画像用意したほうが簡単では？って思ってたんですが、動画で「文字に直接影をつけることで検索で有利に」みたいなこと言ってたのでなるほどなー！となりました。多用するとうるさいページになりそうですが、ポップな雰囲気のデザインにはとても合いそうな技術ですね。
【復習記事】
【参考サイト】
空白と大文字小文字の指定した文字装飾
本日の教材動画はこちら
今回はCSSで文字に空白を指定したり、大文字小文字を指定してみましょう。
text-indet で空白を指定する
text-indetを使うと、1行目のインデント（字下げ）を指定することができます。使い方は text-indet：数値（5emなど）；となります。
text-transform で大文字・小文字をコントロールする
text-transformを使えば、以下の様に大文字・小文字のコントロールをすることができます。
- normal … 通常
- capitalize … 単語の先頭文字を大文字にする
- lowercase … すべて小文字で表示する
- uppercase … すべて大文字で表示する
以前習った font-variant の場合、文字を縮小拡大していましが、text-transformなら大文字なら大文字サイズを、小文字なら小文字サイズのフォントをきちんと使ってくれます。
実際にどんな感じに表示されるのか見ていきましょう。
上記のようなソースとを用意しました。表示はご覧の通り何の変哲もないページになります。ここに、先ほど習ったCSSを全部詰め込んでみます。
ここに今回習った全てをCSSにぶっこんでみました。h1はインデントを指定しているので、少し字下がりしていることがわかると思います。あとは全て赤文字で書いた通りです！capitalizeは英語で人名を書くときとかに便利そうですね！
【復習記事】
【参考サイト】
CSSを使った文字の線装飾
本日の教材動画はこちら
今まで様々な文字装飾をみてきましたが、ここで更にレパートリーを増やします。
text-decoration で文字に線を引く
文字装飾の定番（？）といえば、太線にする、色を変える、そして線を引くです！！今回は文字を線で装飾していく方法を見ていきましょう。線装飾には下記の4種類があります。
- none … 何もつけない
- underline … 下線をつける
- overline … 上線をつける
- line-through … 打ち消し線をつける
使い方としては〇〇｛text-decoration：線の種類；｝です。noneはいつ使うんだ？って感じですが、これは主にaタグにつけることが多いようです。aタグをつけると自動でリンクに下線がつきますので、それを意図的に消したい場合に使います。また、a:hoverとすることでカーソルを載せた時だけ線を消すことができます。
なんとなく想像は付くかと思いますが、実際に見ていきましょう。
上記のようなソースと外部CSSを用意しました。表示はご覧の通り何の変哲もないページになります。ここに、先ほど習ったCSSを全部詰め込んでみます。
分かりやすいように対応するCSSと行を線で繋げてみました。出来上がりは大体想像通りじゃないでしょうか？黄色のa:hoverはマウスカーソルをリンクに合わせると画像の様に下線がなくなります。カーソルを合わせていない場合は下線が出ます。
text-decorationプロパティは、テキストに線のつけるだけでなく、色やスタイルをまとめて指定する際に使用します。なので文字装飾を併用したい時に使うといいみたいですね！（単発の場合は text-decoration-line という表記があるようですが、今回勉強した使い方の方が色々と融通が利いていいみたいです）
動画をみて気づいたこと
教材動画を見て気づいたのですが、動画の外部CSSコードに「@charset "UTF-8";」という表記が合ってなんだこれ？ってなりました。いや、文字コードを指定していることはわかりますよ？でもそれって今までHTMLでしていたじゃないですか。なんで突然CSSに？ってなったわけですよ。
調べてみた結果、外部CSSにも文字コードを指定できるようで…。確かにコード内でも日本語を使うことはありますので、CSSにもコード指定をしてたほうがいいってことなんでしょうかね？というわけで今日以降の外部CSSには上記の文字コードを追記することにします！
【参考サイト】
