33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

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

本日の教材動画はこちら 

今日は印刷設定について見ていきたいと思います。

 

今回動画が文字だけの説明でまったく状況がイメージできず、何がなんだかさっぱりだったので、自分なりにページを作って勉強&検証してみました。あとで見返してもわかるよう画像が多めです。そのため無駄に縦に長いですがご勘弁を!

印刷設定をする際に使うべき単位

まずモニターの場合は解像度によって文字の大きさや画像の縮尺がかわってきます。印刷って基本画面をそのまま印刷しますので、場合によっては文字が小さすぎたり、画像が大きすぎたりでイメージ通りに印刷できないことがあります。それを避けるために、印刷設定時に使う数の単位は cm / mm / inch /pt などの「目で見て履かれる単位」が好ましいようです。

 

例えば文字のサイズを1cmで指定しておけば、印刷時に拡大・縮小の設定をかけない限り、文字サイズは1cmの大きさで印字されてくるはずです。@media print のクエリ設定をする際は、絶対的な数値で指定してあげるようにしましょう。 

リンクの対応について

次に印刷時のリンクについて。紙媒体では当然リンク先に飛べませんので。なので印刷後に(これはどこへのリンクだ?)となってしまう可能性が高いですよね。その対策として、「リンクのURLを出力してリンク先を確認」できるようにしてあげることで、印刷後もリンク先へたどり着くことができるようになります。

 

記載方法は a[href^="http:"]::after{content:"[ "attr(href)" ]";} と記載してあげるだけでOKです。これで「a+hrefタグで飛ぶ先がhttpの場合、リンクの後ろに記載されたURLを表示させる」ことができます。

 

どう表示されるのかさっぱりだったので実際に自分でページを作ってみたところ

リンク先の表示

リンク先の表示

こんな感じの表示になりました!URLの部分は分かりやすいよう赤色で表示させるようにしました。この content:attr(); はURLだけでなくtitleや日付なども表示させることができるようで、応用すればいろいろと便利に使える記述のようです!

(参考になったサイト様→【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する ) 

印刷ページの設定

次に印刷ページの設定を見ていきましょう。下記が何にも設定していない場合の印刷プレビューです。その際に利用するのが@pageという記述。

何も指定していない場合

何も指定していない場合

例えばこれを、「印刷時に周りの余白を3cmにしたい!」となった場合…

マージンを指定した場合

マージンを指定した場合

@page{margin:3cm;}と指定してあげることで、上記の様に周りに余白を3cmとってくれるようになります。他の使えるプロパティについては参考サイトのとほほのWWW入門をご確認くださいませ。

改ページ位置のコントロール

次に改ページ位置の指定について。例えば適応に文字だけ打ったページを印刷しようとした場合、用紙サイズに合わせて適当なところで次のページ(改ページ)されますよね。ただこれだと変に1行だけ次のページへいったり、逆に次のコンテンツが中途半端に全ページに収まったりしてしまいます。

 

それを避けるために、改ページの設定を指定することができます。利用できるプロパティは

  • page-breadk-before … 要素前で改ページが行われるようにする
  • page-breadk-after … 要素後に改ページが行われるようにする
  • page-breadk-inside … 要素内で改ページをしないようにする

主に使う値としては

  • always … 要素の前で必ず改ページが行われるようにする
  • avoid … 要素の前で改ページされないようにする
  • left … 要素前で改ページし、次ページを左ページとして扱う。
  • right … 要素前で改ページし、次ページを右ページとして扱う。

 

これも見てみないとサッパリなので実際に見てみましょう。

何もしていない場合

何もしていない場合

上記が何の指定もしなかった場合の印刷プレビューです。例えば「1ページ目の最後2行は次のコンテンツだから、次ページと一緒にしたいな」と思った場合…

 

改ページさせる設定

改ページさせる設定

改行してほしい箇所を page-break-before:always で指定してあげれば、上記の様に次のページへ繰り越してくれるようになります。

 

改ページさせない設定

改ページさせない設定

逆に「ここで改ページされたら困る!」となった場合は、alwaysをavoidにすればOKみたいです。

 

※現在はpage-break-〇〇ではなく、break-〇〇に置き換えられたようです。古いままでも問題ないようですが、利用する際は調べてから使ったほうがよさそう? 

改ページの際に最低限あってほしい行数指定

次ですが、例えばページを印刷した際、2行だけ次ページにいっちゃって残りは白紙…。みたいなことってないですか?その解消策かはわかりませんが、「ここの要素は最低これだけページに入れて印刷してね」という指定をかけることができるようです。

 

使うプロパティは下記の2種類

  • orphans … 改ページされる前のページの最低行数を指定
  • widows … 改ページされる次のページの最低行数を指定

使う値は数字です。例えば5なら5行の指定になります。

 

これもイメージがわかないので実際に書いてみました。

 

何もしなかった場合の表示

何もしなかった場合

まず上記が何もしてない場合の表示です。赤文字の箇所は1つのp段落となり全部つながっています。中途半端に最後2行だけ次ページへいってしまってますね。

最低5行欲しい場合

最低5行欲しい場合

このpタグにwidows:5 を追加してみました。するとどうでしょう。2行だけだったのが、前ページから3行もってきて合計5行に増えたことが分かります。文章があまりに短い場合あまり意味がありませんが、ながーい文章を書く際などには有用そうですね。

 

以上!動画がまじで文字のみの説明で、わからんなりに調べて書いてみたんですが、未だによくわかってないのであってるか不安だ…。人様に見せるexcelならともかく、ページの印刷設定まですることは稀でしょうが、頭の片隅に入れておこう…。

 

【復習用の記事】

直前や直後を示す擬似要素について

【参考サイト】

【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する

【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。

とほほのWWW入門 CSS - @page

page-break-before

page-break-before …… 印刷時の改ページ位置を指定する

widows …… 改ページされる際の次ページの最低行数を指定する

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

本日の教材動画はこちら 

今回はスマートフォンや、高解像度ディスプレイにどう画面表示を合わせるかを勉強していきましょう。

スマートフォンの「フィット」機能に対応する

スマホは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を利用する」という内容になるのかな?

 

ただこれはAppleRetinaディスプレイを開発した際にWebKitを独自に拡張したものらしく、標準規格ではありません。じゃあ標準規格はどれだ?って話なんですが、標準規格は「resolution」という記述を用いるみたいです。

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx)

{.class {background-image: url(image-2x.png);}}

使い方としてはこんな感じのようです。この記載をしておけば色んなブラウザで対応可能となるようです。

 

正直何が何だがよくわかりませんが、この2つの記載をしておけば困ったことにならなさそうなので、サイトを作るときはひとまず上記をコピペして使えばいいのかな?!と思いました。…いや、ちゃんと参考サイト色々目を通したんですけどね…私には少々難しくて「なるほどね??!!」ってならなかっただけなので、みなさんはきちんと下記参考サイト様達に目を通して理解を深めておくことをお勧めします…。

 

【参考サイト】

フィット機能への対応

meta viewport がよくわからない?

コピペで済ませていませんか?改めて学び直したい「Viewport」のすべて

viewportとは?設定方法とスマートフォン(android・iphone)で効かない原因

高解像度ディスプレイへの対応

WebページをRetina対応させるテクニック~基礎知識編

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう

メディア特性とは

本日の教材動画はこちら 

メディア特性について

メディアクエリにはメディア特性を付け加えることができます。できますっていうかレスポンシブサイトを目指すなら必須の設定のようです。これも種類が多岐にわたりますが、ひとまずよく使う記述を見てみましょう

  • 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を適応する事。という感じになります。レスポンシブサイトを作る場合はこの設定が必須のようですので、とても大事な要素と言えますね!

 

【参考サイト】

CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。

メディアタイプとは

本日の教材動画はこちら 

メディアタイプとは

メディアタイプとは、メディアクエリを指定する際に「どんなデバイスであるか」を指定するのに使います。合計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{横方向にずらす数値 縦方向にずらす数値 ぼかし数値 色指定;}です。実際に使ってみたほうが早いので早速見ていきましょう。

 

f:id:qqqnek0:20210217160320j:plain

ソース内容と表示

上記のようなシンプルなページを用意しました。この文字にCSSで影をつけていってみましょう。

 

CSSで影をつける

CSSで影をつける

グレー色を影を、少しぼかしてつけてみました。数値にはマイナス数値も使え、色は透明度をいじれるrgbaも利用可能です。また、影を複数つけることもできます。

 

CSSで影をつける

CSSで影をつける

全て実践したのがこちらになります。

 

しかしCSSで文字に影を微調節するより、影つけた画像用意したほうが簡単では?って思ってたんですが、動画で「文字に直接影をつけることで検索で有利に」みたいなこと言ってたのでなるほどなー!となりました。多用するとうるさいページになりそうですが、ポップな雰囲気のデザインにはとても合いそうな技術ですね。

  

【復習記事】

影をつける方法について

【参考サイト】

text-shadow …… テキストに影をつける

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

本日の教材動画はこちら 

今回はCSSで文字に空白を指定したり、大文字小文字を指定してみましょう。

text-indet で空白を指定する

text-indetを使うと、1行目のインデント(字下げ)を指定することができます。使い方は text-indet:数値(5emなど);となります。

text-transform で大文字・小文字をコントロールする

 text-transformを使えば、以下の様に大文字・小文字のコントロールをすることができます。

  • normal … 通常
  • capitalize … 単語の先頭文字を大文字にする
  • lowercase … すべて小文字で表示する
  • uppercase … すべて大文字で表示する

以前習った font-variant の場合、文字を縮小拡大していましが、text-transformなら大文字なら大文字サイズを、小文字なら小文字サイズのフォントをきちんと使ってくれます。

 

実際にどんな感じに表示されるのか見ていきましょう。

 

ページの内容と出来上がりの表示

ページの内容と出来上がりの表示

上記のようなソースとを用意しました。表示はご覧の通り何の変哲もないページになります。ここに、先ほど習ったCSSを全部詰め込んでみます。

 

外部CSSを適応してみる

外部CSSを適応してみる

 

ここに今回習った全てをCSSにぶっこんでみました。h1はインデントを指定しているので、少し字下がりしていることがわかると思います。あとは全て赤文字で書いた通りです!capitalizeは英語で人名を書くときとかに便利そうですね!

 

【復習記事】

文字スタイルの指定について

【参考サイト】

text-transform・・・大文字・小文字・全角文字への変換を指定する