かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

印刷用CSSのメモ

CSS Design

WEBページを印刷する需要ってもうそんなに無い気もするのだけれど、必要になったのでメモ。

印刷用のCSS

1. 印刷用のCSSをmedia="print"指定した別ファイルで読み込ませる
<link rel="stylesheet" type="text/css" href="main.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

印刷用のスタイルは print.css だけで完結する

2. メディアクエリ @media print で指定する

印刷用のメディアクエリを追加するCSSは印刷時にも有効になるようにmedia="all"で指定します

<link rel="stylesheet" type="text/css" href="main.css" media="all">

main.css 内に下記のメディアクエリを作成してその中に印刷用のCSSを記述する

@media print {
  /* 印刷用のCSS */
}

※ 印刷時もWEB表示用のCSSも有効になるので、不要なスタイルはこのメディアクエリ内で打ち消す必要がある。

用紙の設定 @pront

まだ対応していないブラウザもありますが、用紙サイズや空きなどの指定が行なえます。 f:id:kikiki-kiki:20171212230215p:plain
Can I use... Support tables for HTML5, CSS3, etc

例:
A4サイズ 上下12mm 左右7mm空き

@pront {
  size: A4
  margin: 12mm 7mm;
}

用紙サイズ指定 size: <width> < height > で指定

@page { size: 120mm 297mm; } /* A4サイズ */

A4 縦向き (A4が 210mm x 297mm なので portrait は省略可 )

@page { size: A4 portrait; }

A4 横向き

@page { size: A4 landscape; }

サイズに指定できるキーワード

keyword size
A5 148mm x 210mm
A4 210mm x 297mm
B5 176mm x 250mm
B4 250mm x 353mm
JIS-B5 182mm x 257mm
JIS-B4 257mm x 364mm
letter 8.5in x 11in
legal 8.5in x 14in
ledger 11in x 17in

[参考]

Canon インクジェットプリンター複合機 PIXUS MG3630 BK ブラック

Canon インクジェットプリンター複合機 PIXUS MG3630 BK ブラック

iOS javascript clickイベントが効かないにはまる。

iOS JavaScript jQuery CSS Tips

レスポンシブなサイトを作成していてモバイルの時によくある、メニューアイコンを押したら全画面にメニューが表示されてメニュー以外をクリックするとメニューが閉じる機能を作っていました。
Chromeの開発ツールでは意図したとおりに動作していたのですが、iPhone実機で確認した所メニュー以外の部分をタップしたらメニューを閉じる機能が動作していませんでした。

確認環境

clickイベントが効かないパターンがあるっぽい

動作しなかった例

$(document).on('click', 'div.hitarea', function(){ /*... 処理 */ });

※ 対象の要素を解りやすくするために敢えてdiv.hitareaと書いています

どうやら$(document).onや$('body').on のようなイベントの登録のしかたで、イベント対象がaタグではない時にクリックイベントが無視されてしまうようです。

解決方法

1. クリック対象となる要素にcursor: pointerというスタイルを付ける

クリック対象の要素にcursor: pointerというスタイルがあれば、aタグでなくてもクリックイベントが効くようになるようです。(イベントがdocumentやbodyといったものに登録されている場合イベントターゲットがpointerな要素ならタップ可能な要素だとiOSが判定するような仕組みっぽいです。)

今回の例だと次のようにスタイルを加えるとクリックイベントが動作するようになりました。

div.hitarea {
  cursor: pointer;
}

ボタンのように使いたい機能だった場合はこの方法が簡単です。
しかし、今回のようなレスポンシブなサイトで、ボタンエリア以外をクリックしたらメニューを閉じたいというような場合、モバイルで見てる時は良いのですがPCで見るとモーダルのメニュー上どこにマウスを持っていってもカーソルがクリック可能なポインターになってしまうので、ちょっと問題がありました。

2. document, body にイベントを登録しなければOK

iOSでクリックイベントが動作しないのは、documentまたはbodyにイベントが登録されている かつ 対象の要素がaタグでない(pointerのスタイルがない) とき ですので、$(document).on、$('body').onとしなければ問題なく動作します。

例えば次のようなHTML構造で

<body>
  <div class="container">
    <div class="hitarea"></div>
  </div>
</body>

単純に最初から画面にある該当要素だけでクリックイベントが効けば良いのであれば

$(document).on('click', 'div.hitarea', function(){ /*... 処理 */ });

ではなく

$('div.hitarea').on('click', function(){ /*... 処理 */ });

とすればOKです。

後から追加される要素にもクリックイベントが効く必要があるときは、

$('.container').on('click', 'div.hitarea', function(){ /*... 処理 */ });

上記のようにdocumentやbodyではなく対象となる要素が追加される親要素にイベント登録をすれば、後から追加されるdiv.hitarea要素にもクリックイベントが効くようになります。

　
Chromeの開発ツールで見た目と動作問題ないなーと思っても実機だと挙動が異なることがあるってのを改めて実感しました。(iOSで見てたブラウザもデフォルトのSafariでChromeとも異なりますからそりゃ違いもありますよねw)
モバイルサイト製作時はめんどくさがらずに、ケーブル繋いで実機のブラウザで見て確認・デバックをしなきゃなーって思いました。(でも、ちょっとめんどくさい...

過去にaタグだけどclickイベントが効かない事があったのですが、href属性を付けていなかったので、cursor: poinrerのスタイルが無い扱いになってたから、動作しなかったんじゃないかなって今回の件でナゾが判明した気がしました。

[参考]

レスポンシブWebデザイン　マルチデバイス時代のコンセプトとテクニック (Web Professional Books)

レスポンシブWebデザイン　マルチデバイス時代のコンセプトとテクニック (Web Professional Books)

CSS Fixedしたコンテンツでスクロールさせたい

CSS HTML

モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ

top, left, right, bottom と overflow を利用する

.modalNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

position: fixedと一緒に top: 0, bottom: 0, left: 0, right: 0 を使用するとコンテンツがエリア全体に伸びるので、そこにoverflowの指定があればfixedしたコンテンツであってもスクロールを表示させることができるようです。
縦方向のスクロールを発生させるだけならtop: 0;とbottom: 0;の指定があればleft、rightの指定は特に無くても問題ないようでした。

サンプル

See the Pen Scroll in Fixed modal by KIKIKI (@chaika-design) on CodePen.

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本