ページの印刷設定の仕方について

本日の教材動画はこちら 今日は印刷設定について見ていきたいと思います。 今回動画が文字だけの説明でまったく状況がイメージできず、何がなんだかさっぱりだったので、自分なりにページを作って勉強＆検証してみました。あとで見返してもわかるよう画像が多めです。そのため無駄に縦に長いですがご勘弁を！ 印刷設定をする際に使うべき単位 まずモニターの場合は解像度によって文字の大きさや画像の縮尺がかわってきます。印刷って基本画面をそのまま印刷しますので、場合によっては文字が小さすぎたり、画像が大きすぎたりでイメージ通りに印刷できないことがあります。それを避けるために、印刷設定時に使う数の単位は cm / mm …

スマホと高解像度ディスプレイに合わせた指定

本日の教材動画はこちら 今回はスマートフォンや、高解像度ディスプレイにどう画面表示を合わせるかを勉強していきましょう。 スマートフォンの「フィット」機能に対応する スマホはPC向けのWEBページも見ることができるようになってます。これはブラウザが画面の解像度を、ページの表示に合わせる「フィット機能」が搭載されているからです。おかげで私たちはPC用のページを綺麗に見ることができますが、このフィット機能が作動すると、折角用意したメディアクエリが正しく反映されないことがあります。 フィット機能への対策 次のmetaタグをhead内に組み込んであげることで対策することができます→＜meta name=…

メディア特性とは

本日の教材動画はこちら メディア特性について メディアクエリにはメディア特性を付け加えることができます。できますっていうかレスポンシブサイトを目指すなら必須の設定のようです。これも種類が多岐にわたりますが、ひとまずよく使う記述を見てみましょう width … 表示領域の横幅 height … 表示領域の高さ max-width … 表示領域の横幅（この後の指定が適応される最大値） min-width … 表示領域の横幅（この後の指定が適応される最小値） device-width … デバイスの横幅 device-heigh … デバイスの縦幅 orientation … デバイスの向き（スマホ…

メディアタイプとは

本日の教材動画はこちら メディアタイプとは メディアタイプとは、メディアクエリを指定する際に「どんなデバイスであるか」を指定するのに使います。合計10種類あるようですが、よく使う基本的なものだけ見てみましょう。 all … すべてのメディア screen … 一般的なディスプレイ全般（パソコンのスクリーン） projection … プロジェクター print … 印刷 記載方法について htmlに直接書き込む場合は＜link rel="stylesheet" type="text/css" media="（メディアタイプを記載）" href="xxx.css"＞という風に。外部CSSに書き込…

メディアクエリとは

本日の教材動画はこちら 今回からなにやら新しい単語いついて勉強していきます。 メディアクエリとは メディアクエリとは、CSSを利用して各種デバイスに合わせた表示・出力方法を指定することができるものです。デバイスの種類や表示解像度などをもとに、随時適切なものを自動的に選択してくれるものになります。 メディアクエリ＝レスポンシブサイトの基本！って感じでしょうかね？次にこのメディアクエリを指定していく方法をみていきましょう。 htmlで指定する ＜link rel="stylsheet" href="xxxx.css" media="（ここにメディアクエリを記述）"＞ という方法で指定ができます。た…

CSSで文字に影をつける

本日の教材動画はこちら 今回はCSSで文字に影をつけてみましょう。なんか前に似たようなこと勉強したよなーって思ってみてみたら、「影をつける方法について」記事ですでに自分で調べて勉強してたようなんですが、改めて教材としてでてきたので再度見ていきましょう。 text-shadow で文字に影をつける 使い方は至ってシンプルで text-shadow｛横方向にずらす数値 縦方向にずらす数値 ぼかし数値 色指定；｝です。実際に使ってみたほうが早いので早速見ていきましょう。 ソース内容と表示 上記のようなシンプルなページを用意しました。この文字にCSSで影をつけていってみましょう。 CSSで影をつける …

空白と大文字小文字の指定した文字装飾

本日の教材動画はこちら 今回はCSSで文字に空白を指定したり、大文字小文字を指定してみましょう。 text-indet で空白を指定する text-indetを使うと、1行目のインデント（字下げ）を指定することができます。使い方は text-indet：数値（5emなど）；となります。 text-transform で大文字・小文字をコントロールする text-transformを使えば、以下の様に大文字・小文字のコントロールをすることができます。 normal … 通常 capitalize … 単語の先頭文字を大文字にする lowercase … すべて小文字で表示する uppercase…

CSSを使った文字の線装飾

本日の教材動画はこちら 今まで様々な文字装飾をみてきましたが、ここで更にレパートリーを増やします。 text-decoration で文字に線を引く 文字装飾の定番（？）といえば、太線にする、色を変える、そして線を引くです！！今回は文字を線で装飾していく方法を見ていきましょう。線装飾には下記の4種類があります。 none … 何もつけない underline … 下線をつける overline … 上線をつける line-through … 打ち消し線をつける 使い方としては〇〇｛text-decoration：線の種類；｝です。noneはいつ使うんだ？って感じですが、これは主にaタグにつける…