webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

画像ファイル名だけの一覧を抽出する / indesign データ結合 その2

手順2 CSVのデータをindesignに流し込む

「ファイル」「新規作成」

f:id:ohta-felica:20171004220006p:plain

 ドキュメントの設定をする。

f:id:ohta-felica:20171004220109p:plain

 続いて「マージン」「段組み」を設定する。

 

f:id:ohta-felica:20171004220239p:plain

 

indesignでオブジェクトを作るには必ず箱が必要になります。

画像を配置するときは「画像を入れる箱」

文字を配置するときは「文字を入れる箱」が必要。

 

というわけで、画像用のの箱を作る。 

f:id:ohta-felica:20171004174935p:plain

 続いて、文字を入れる箱を作ります。

f:id:ohta-felica:20171004175054p:plain

A4横使いで 3:2の写真を4枚レイアウトする。

A4に対して余白を均等に10mm付けて、画像のサイズを132mm*88mmにする。

写真と写真の間は13㎜になる。

 

縦は、210-10-10-88-88=14

テキスト用のボックスは高さ7mmにする。

f:id:ohta-felica:20171004180822p:plain

f:id:ohta-felica:20171004180848p:plain

 A4に4枚の写真をレイアウトするけれども、「箱」は一つ作ればよい。

 

そしていよいよデータを流し込む準備に入ります。

「ウィンドウ」「ユーティリティー」「データ結合」

この作業は「データ結合」です!

f:id:ohta-felica:20171004175211p:plain

 データソースとなるCSVファイルを選択する。

f:id:ohta-felica:20171004175359p:plain

 表示された項目を、作ったボックスにドラッグアンドドロップする。

この時点で、テキストのフォントや級数、左右揃えなどを指定しておく。

 

プレビューにチェックしておくと、下のようにプレビューが表示される。

f:id:ohta-felica:20171004175624p:plain

 

f:id:ohta-felica:20171004175844p:plain

 メニューを表示する。

 

 

右開き、左開き

 

右綴じ右開きとは、本を読み進める際にページを右に開いていく形式のものを指します。表紙を表にした場合、右側が綴じられているものです。



右綴じイメージ

 

日本語の縦書きでは、視線の進行方向が左に向かっていくため、右綴じは縦書きの書籍・雑誌などで多く採用されています。

日本の漫画雑誌や単行本などでは右綴じが採用されています。

 

インデザインのカタログデータから、WEB用の商品画像一括で作る

f:id:ohta-felica:20171004082026p:plain

 新規ドキュメントを作って、ページの設定をする。

最終的に必要な商品画像のサイズを入力します。

ここでは800px*800pxに設定します。

 

f:id:ohta-felica:20171004082144p:plain

 

四隅のマージンを指定します。

f:id:ohta-felica:20171004082214p:plain

 それぞれの商品画像で、決められた位置にロゴや、商品コードなどを配置しなければいけないときは、予めそれらのためのスペースを指定しておく。

f:id:ohta-felica:20171004220925p:plain

 商品数が多いときなどはページの外に送品コードを記載するスペースを作っておくと後で検索をかけたりすることができて非常に便利。

↓こんな感じ、、、

 

f:id:ohta-felica:20171004221345p:plain

 

 

これでページができました。

あとは商品台帳を横に開いて、ドラッグアンドドロップしていきます。

最後に、「ファイル」「書き出し」でJPEGを書き出せば一括で商品画像が出来上がり!

 

画像ファイル名だけの一覧を抽出する / indesign データ結合 その1

目的 

indesignを使って、コンタクトシートを作る。

サイズはA4(横)。

3:2の画像を4枚配置する。

各々の画像の下にはファイル名(テキスト)を記載する。

  1. 画像のファイル名(あるいはキャプションのようなテキスト)と画像のファイル名を列挙したCSVファイル(エクセルのシート)を用意する。ちなみに、、、CSVというは Comma Separated Valueの略で、Comma(カンマ)で Separated (区切った)Value(値)です。
  2. インデザインを使って流し込む。

手順1 まずテキスト(ファイル名)の列と画像のファイル名の列を並べたエクセルのシートを作る。

「dir」表示形式を変更するオプションがいくつか用意されています

windowsのコマンド「dir」に「/b」オプションをつけると、

ファイル名またはディレクトリ名のみを表示します。

C:\ のディレクト

2016/03/15 09:58 <DIR> extensions
2017/01/13 22:12 <DIR> localserver
2016/02/13 22:10 <DIR> Logs
2006/10/06 15:42 2,853 pdiports64.inf
2016/07/16 20:47 <DIR> PerfLogs
2017/09/02 00:52 <DIR> Program Files
2017/07/12 22:27 <DIR> Program Files (x86)
2017/09/02 00:50 0 Recovery.txt
2017/05/20 20:45 <DIR> Ruby23-x64
2017/09/02 00:47 <DIR> Temp
2017/01/29 08:25 <DIR> Users
2017/09/10 15:34 <DIR> Windows
2017/01/15 00:27 <DIR> xampp
2 個のファイル 2,853 バイト
11 個のディレクトリ 83,555,377,152 バイトの空き領域

 

C:\>dir /b
extensions
localserver
Logs
pdiports64.inf
PerfLogs
Program Files
Program Files (x86)
Recovery.txt
Ruby23-x64
Temp
Users
Windows
xampp

 


ファイルに出力するには「 > [ファイル名]」を付け足します。
これはdirコマンドのオプションじゃなくて
DOSコマンドの標準的な出力命令です。

dir /b [ファイルが入っているフォルダのパス] > [書き出すファイルのパス]

f:id:ohta-felica:20170908094433p:plain

  

 

excelcsvファイルを作成する。

「A」列にはテキスト、今回は画像のファイル名を画像の下に記載したいのでファイルの名前にする。列の先頭は「file name」とする。「B」列には画像のファイル名を並べる。画像のファイル名であることを認識させるための記法があるのでそれに従い、「'@image」と入力する。

ちなみに「'」は文字列リテラル。「@image」と「文字列」で入力する。

 

f:id:ohta-felica:20170908094007j:plain

 

 

basic認証を使ってみたい、、、

以下を参考にしてみます。

いまさらながら、Basic認証のつけかた - Qiita

まずは、IDとパスワードを作成する。

https://ssl11.secureserver.jp/~shtml/htaccess/make_htpasswd.html

以下のような画面が出てくる。

f:id:ohta-felica:20170827101757p:plain

 

AuthUserfile /フルパス/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user

 AuthUserfile /フルパス/.htpasswdサーバーのルートディレクトリからの.htpasswdへのパスを指定する。/usr/local/...とか/home/pass/...とかそういうの。

 

AuthGroupfile /dev/nullグループごとにアクセスを許可する、という指定。「/dev/null」とは、そのようなファイルは存在しないという意味。つまりグループごとでのアクセス制限はしないという意味。

 

AuthName "Please enter your ID and password"ダイアログに表示される文章を指定。日本語だと文字化けするようだ。

 

AuthType BasicAuthTypeを指定。「Basic(ベーシック認証)」と「Digest(ダイジェスト認証)」の2種類があって、Digestのほうが安全らしい。require valid-userユーザーが誰であろうと、入力したIDとパスワードが合っていればアクセスできるという意味。特定ユーザーだけにアクセスさせたい場合は「require user xxx」とかする。

 

.htpasswdIDとパスワードを書きこむファイル。.htpasswdというファイル名で作るらないといけないらしい。.htaccess用のパスワード作成ツールがネットにたくさん出回っているのでそこでコードを生成。例えばID/username,PASS/hogehogeとしたいとすると、username:us3HhKtHHqM0Uというコードを書けばよい。パーミッションパーミッションは604!これでだめなら644?その他注意事項ファイルの最後では改行したほうがいいかもしらんね。

 

.htpasswdのファイルは、DocumentRootより上に設置すること。

  • それが無理な場合は.htaccessファイルに「AddHandler cgi-script htpasswd」の一行を加える。
  • もしくは.htaccess ファイルに.htaccessと.htpasswdにアクセスできなくさせる下記のようなコードを書く。
<Files ~ "^\.ht">
    Order allow,deny
    Deny from all
    Satisfy All
</Files>

.htaccess ファイルに文法誤りがあると、500 Internal Server Error となる。再度チェックしてみること。

サーバーの設定によっては、.htaccessファイルの設定が無効になっていたり、設置場所が限定されていたり、ディレクティブの限定的な使用しか出来ない場合があって、その場合 500Internal Server Error が発生するとのこと。見たことないですが。そんなところは潔く諦めて他のサーバーを使うこと。

 Authorization Required (T_T)

ID・パスワードには、記号は使えないかもしれないと思っている。今のところ使えた経験無し。使わなかったらうまくいくこと多し。なので記号を使わないで数字と英字だけでやってみてください。それでもだめなら単に記述間違いではと思います。

  特定のIPからのみアクセスできるようにするには

下記を.htaccessに追加する。

Satisfy any

order deny,allow
allow from xx.xx.xx.xxx/xx.xx.xxx.xxx

deny from all

 

swiper slider

お役立ち記事は保存したい。

qiita.com

 

jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。

【使い方(Usage)】

  1. GitHubから最新バージョンのSwiperをダウンロードする。 Swiper
  2. 下記をHTMLに記載
.html
<head>
  ....
  <link rel="stylesheet" href="cssまでのパス/idangerous.swiper.css">
  <script defer src="JAVASCRIPTまでのパス/idangerous.swiper-2.x.min.js"></script>
  ....
</head>

<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド1の内容を好きなように設置する -->
      </div>

      <!--Second Slide-->
      <div class="swiper-slide">
        <!-- ここにスライド2の内容を好きなように設置する -->
      </div>

      <!--Third Slide-->
      <div class="swiper-slide"> 
        <!-- ここにスライド3の内容を好きなように設置する -->
      </div>
      <!--Etc..-->
  </div>
</div>
</body>

 3. CSSのidangerous.swiper.cssを開いて、Swiper部分の高さを設定(ファイルの最後のほうにある)

/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

4.Initialize(初期化) ドキュメントが読み込まれたとき (もしくはウィンドウがロードされたとき)Swiperを走らせる

.js
<script type="text/javascript">
/*======
ドキュメントレディかウィンドウがロードされてから使用すること
例:
jQueryだったら: $(function() { ...code here... })

もしくはJavaScriptのみでwindowがloadされたときにスタートさせるなら
window.onload = function() { ...code here ...}

もしくはJavaScriptのみでdocumentがreadyになったときにスタートさせるなら
document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)

という感じで
=======*/

/*
jQueryまたはZeptoの場合。
*/
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

/* 上か下かのどちらかを記述する。jQueryを使っていない人は↓こちらだけ。使っている人は↑だけ。 */

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container',{
    //オプションをここに:
    mode:'horizontal',
    loop: true
    //etc..
  });  
}
</script>

5.完了 

【オプション一覧】

パラメータ タイプ デフォルト値 記入例 解説
speed 数値 300 600 スライドアニメーション間隔の秒数(ミリ秒)
autoplay 数値 5000 - オートプレイの時の間隔秒数(ミリ秒)。この値がないときはオートプレイしない。
mode 文字列 'horizontal' 'vertical' horizontallyで水平(横)スライド、verticallyで垂直(縦)スライド。
loop 真偽 false true trueでループ。デフォルトはループしない。
loopAdditionalSlides 数値 0 2 ループの後に、いくつのクローンを用意するかの数値。New in 2.0.
slidesPerView 数値
or
'auto'
1 4 スライドコンテナに何枚表示させたいか。(carousel mode)autoもサポートしていて、コンテナの幅によってフィットする。ループと共用できない。New in 2.0.
slidesPerGroup 数値 1 2 いくつのスライドでグループ化するか。デフォルトは1。carousel modeとの組み合わせで便利。
calculateHeight 真偽 false true true にすると、コンテナの高さを計算してスライド毎に高さ設定してくれる。レスポンシブレイアウトや高さが不確定な場合には便利。New in 2.0.
updateOnImagesReady boolean true false すべての画像がロードされたあとで初期化(構築?)されるようにする。 New in 2.0.
releaseFormElements boolean true false フォーム要素を許可するかしないか。New in 2.0.
watchActiveIndex boolean false true If enabled the Swipe recalculates activeIndex dynamically during touch interactions New in 2.0.
visibilityFullFit boolean false true trueのとき、表示されているスライドで、表示領域を隙間なく埋める。New in 2.0.
autoResize boolean true false ブラウザのウィンドウサイズによって自動リサイズをするかしないか。New in 2.0.
resizeReInit boolean false true ウィンドウサイズが変更されるたびに再構築するかしないか。New in 2.0.
DOMAnimation boolean true false custom DOMでのアニメーションをさせるかさせないか。css transitionsができないIE7~9などのため。New in 2.0.
resistance boolean
or
'100%'
true false falseで跳ね返り禁止。100%をセットすると無制限に跳ね返る。New in 2.0.
noSwiping boolean false true trueにして、"noSwipingClass" をスライドに与えればスワイプできなくなる。New in 2.0.
preventLinks boolean true false スライド中にクリックがされないようにするかしないか。
initialSlide number 2 0 先頭スライドを番号で指定する。
useCSS3Transforms boolean true false falseを設定すると、CSS3でアニメーションさせないようにできる。ただしposition(left:top)を使っての再現になるので、クォリティを保つためにパフォーマンスが低下する。ときどきCSS3でうまく動かないデバイスがあったりするので、そのときはfalseにしてみてね。
フリーモードとスクロールコンテナ関連(Free Mode and Scroll Container)
freeMode boolean false true 各スライドの位置を固定しないでフリーにするかしないか。
freeModeFluid boolean false true スライドからカーソル、タッチを離してもしばらくイージングするかしないか。
scrollContainer boolean false true true をセットすると、スクロールエリアみたいな感じで使える。
momentumRatio number 1 2 タッチを離した後の跳ね返り値。 New in 2.0
momentumBounce boolean true false falseで跳ね返り禁止。New in 2.0
momentumBounceRatio number 1 2 跳ね返り効果の値。New in 2.0
スライドのオフセット(ずらしたりするやつ)関連(Slides offset)
centeredSlides boolean false true アクティブなスライドが必ず真ん中にくるようにする。New in 2.0.
offsetPxBefore number 0 100 一番最初のスライドをオフセット(引っ込めるとか)したいときに、左の境界線からの数値(ピクセル単位)を入れる。 New in 2.0.
offsetPxAfter number 0 100 右側のスライドをオフセット(引っ込めるとか)したいときに、右の境界線からの数値(ピクセル単位)を入れる。New in 2.0.
offsetSlidesBefore number 0 2 左端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。New in 2.0.
offsetSlidesAfter number 0 2 右端から何枚目までずらしてスタートさせるか。レスポンシブでスライドの幅がわからない場合に便利。New in 2.0.
タッチ、マウスの操作関連(Touch/mouse interactions)
touchRatio number 1 0.8 Touch ratio
simulateTouch boolean true false trueのとき、タッチと同じような動作をマウスでも受け付ける。クリックとかドラッグでスライドを動かせる。
onlyExternal boolean false true trueにすると、API機能からしか操作できなくなる。タブ形式とかで使いやすい。
followFinger boolean true false falseのとき、タッチを離したときにスライドが動く。ホールドしている間はアニメーションさせないようにできる。
grabCursor boolean false true trueにしたとき、マウスオンしたときにカーソルが「掴む」マークになる。ちょっとした気遣いですね。
shortSwipes boolean true false 短いスワイプをさせたくないときにfalseを設定。
moveStartThreshold number false 100 Threshold(しきい値)をピクセル単位での調整ができる。スワイプを動き出させるのに、どれくらいのスワイプ動作を必要とさせるか、という値。"touch distance"がこの値より低いと、動かない、そうだ。
ナビゲーション関連(Navigation)
keyboardControl boolean false true キーボードのカーソルキー(矢印)で操作できるようにするか、しないか。
mousewheelControl boolean false true マウスホイールでスライドを操作せきるようにするか、しないか。
ページネーション(Pagination)
pagination string or HTML Element - '.my-pagination' ページネーションのセレクター名を設定できる。例では「my-pagination」というクラスをページネーションタグに当てられる。もしくはHTML要素をいれてもいい。New in 2.0
paginationClickable boolean false true ページネーションボタンをクリックでスライド操作できるようにさせるか、しないか。New in 2.0.
paginationAsRange boolean true   trueのとき、ページネーションボタンが表示スライドと連動するように、Classがあてがわれる。2枚以上を同時表示させるスライドで効果的。New in 2.0.
createPagination boolean true false trueのとき、ページネーションを作成。たくさんのspanタグが生成され、各spanにswiper-pagination-switchというクラスがあてがわれ、カレントのスライドにはswiper-active-switchというクラスがあてがわれる。スタイルを当てるのに便利です。
名づけ関連(Namespace)
wrapperClass string 'swiper-wrapper' 'my-wrapper' スワイパーを包んでいる大外のタグのクラスを指定できる。デフォルトは'swiper-wrapper'。
slideClass string 'swiper-slide' 'my-slide' 各スライドのクラスを指定できる。複数のスライダーを設置していて、違うスタイルを当てたいときなどには便利。デフォルトは'swiper-slide'。
slideActiveClass string 'swiper-slide-active' 'my-active-slide' アクティブ中スライドのクラスを指定できる。デフォルトは'swiper-slide-active'。New in 2.0.
slideVisibleClass string 'swiper-slide-visible' 'my-visible-slide' 表示中のスライドのクラスを指定できる。デフォルトは'swiper-slide-visible'。New in 2.0.
slideElement string 'div' 'li' スライドのタグはデフォルトでdivを使用しているが、変更も可能。例ではliに変えている。
noSwipingClass string 'swiper-no-swiping' 'stop-swiping' CSS class of html element that will be used to prevent swiping when "noSwiping" parameter is set to true. New in 2.0.
paginationElement string 'span' 'div' ページネーションのボタンのタグはデフォルトでspanを使用しているが、変更も可能。例ではdivに変えている。
paginationElementClass string 'swiper-pagination-switch' 'my-switch' ページネーションスウィッチのクラス変更が可能。New in 2.0.
paginationActiveClass string 'swiper-active-switch' 'my-active-switch' ページネーションのアクティブボタンのクラス変更が可能。
paginationVisibleClass string 'swiper-visible-switch' 'my-visible-switch' ページネーションの表示中ボタンのクラス変更が可能。New in 2.0.
コールバック関連(Callbacks) ※動作完了時に呼び出す場合とかに
queueStartCallbacks boolean false true "true"で、"slideChangeStart"を加える。"slideChangeStart"は、multiple swipes/transitionsをしているときに発生するコールバック。New in 2.0.
queueEndCallbacks boolean false true "true"で、"slideChangeEnd"を加える。"slideChangeStart"は、multiple swipes/transitionsの直後に発生するコールバック。New in 2.0.
onFirstInit function - function(swiper){ do something } 最初の初期化の直後に発生するコールバック。functionを書き込むことで実行。 New in 2.1
onInit function - function(swiper){ do something } すべての初期化、再初期化の直後に発生するコールバック。functionを書き込むことで実行。New in 2.1
onTouchStart function - function(swiper){ do something } タッチしたら発生するコールバック。functionを書き込むことで実行。
onTouchMove function - function(swiper){ do something } タッチが動いたら発生するコールバック。functionを書き込むことで実行。
onTouchEnd function - function(swiper){ do something } タッチを離したら発生するコールバック。functionを書き込むことで実行。
onSlideReset function - function(swiper){ do something } タッチを離してカレントアクティブスライドがリセットされたら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideChangeStart function - function(swiper){ do something } 前後へのスライドが始まったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideChangeEnd function - function(swiper){ do something } 前後へのスライドが終わったら発生するコールバック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
onSlideClick function - function(swiper){ do something } スライド上でクリックされたら発生するコールバック。functionを書き込むことで実行。
onSlideTouch function - function(swiper){ do something } スライド上でタッチした直後に発生するコールバック。functionを書き込むことで実行。onTouchStartとほとんど同じだが、.clickedSlide.clikedSlideIndexの値を返す。
function(swiper){ alert(swiper.clikedSlideIndex); }とでもしたら動くはず。
onImagesReady function - function(swiper){ do something } 係るすべての画像がロードされたら発生するコールバック。functionを書き込むことで実行。"updateOnImagesReady"もtrueとするべき。New in 2.0.
onMomentumBounce function - function(swiper){ do something } 跳ね返りしたら発生するコールバック。functionを書き込むことで実行。New in 2.0.
onResistanceBefore function - function(swiper,p){ do something } 跳ね返りしている間に発生するコールバック。functionを書き込むことで実行。pから跳ね返った距離の返り値を得られる。New in 2.0.
onResistanceAfter function - function(swiper,p){ do something } 跳ね返りした後に発生するコールバック。functionを書き込むことで実行。pから跳ね返った距離の返り値を得られる。New in 2.0.

jsの復習 objectリテラル

コピペばかりで、jsを忘れてしまう。

たまには復習してみる。

 

// JavaScript Document

var flight = {
airline: "ocianic2",
number: 815,
departure: {
IATA: "SYD",
time: "2017-07-29",
city: "Sydney"
},
arrival: {
IATA: "LAX",
time: "2017-07-30",
city: "Los Angeles"
}
}
;

document.writeln('<h1>flight.number</h1>');
document.writeln('<h1>+flight.number+</h1>');
document.writeln('<h1>'+flight.number+'</h1>');

 

 

f:id:ohta-felica:20170729111528p:plain

 jslint

f:id:ohta-felica:20170729111628p:plain

 

f:id:ohta-felica:20170729113007p:plain

git GUI

windows コマンドプロンプトから、「git gui」と入力。

そうするとgit GUIが出てきます。

f:id:ohta-felica:20170720223148p:plain

 

 

リモートリポジトリから、クローンを作成します。

f:id:ohta-felica:20170720223552p:plain

 

 

「target directory」は事前に作成するのでなく、この操作によって(clone)によって新たに作成される。

f:id:ohta-felica:20170720223740p:plain

 

 

「clone」の操作が終わると下のような画面になります。

f:id:ohta-felica:20170720223909p:plain

 

 

f:id:ohta-felica:20170720224033p:plain

 

 

「browse masters files」マスターブランチのファイルをブラウズします。

f:id:ohta-felica:20170720224201p:plain

 

ローカルに作ったリポジトリの中のすべてのファイルが表示されます。

適当なファイルの、ファイル名の部分をクリックしてみます。

f:id:ohta-felica:20170720224416p:plain

 visualize masters history

f:id:ohta-felica:20170720224711p:plain

 

f:id:ohta-felica:20170720224814p:plain

 SHA1 とは何ぞや?

f:id:ohta-felica:20170720225144p:plain

 

 

画面レイアウトのまま印刷ができない

、、というご指摘が。

あまり考えたことなかったですね。

キットそんなに大変なことにはならない、と感じていたので調べてみると思いのほかサクッと片付きました。よかった!

下の記事を参考に、PC用のスタイルシートを「screen」から「print, screen」に変更しました。こうして、とりあえずは大きな崩れが解消しました。

 

<link rel="stylesheet" href="./common/css/style_pc.css" media="print, screen and (min-width:768px)">
<link rel="stylesheet" href="./common/css/style_sp.css" media="screen and (max-width:767px)">
<link rel="stylesheet" href="./common/css/common.css">
<link rel="stylesheet" href="./common/css/top_pc.css" media="print, screen and (min-width:768px)">
<link rel="stylesheet" href="./common/css/top_sp.css" media="screen and (max-width:767px)">

 

 きちんとA4にプリントできるようにするにはもうひと手間が必要です。

/* print setting */
@media print {
body {
-webkit-print-color-adjust: exact;
top:0 !IMPORTANT;
left:0 !IMPORTANT;
width:200mm !IMPORTANT;
height:290mm !IMPORTANT;
}
}

 


レスポンシブで制作したWebサイトを印刷しようとしたら、レイアウトが崩れてる!

なんてこと間々ありますよね。
印刷前提のページであれば専用のcssを用意したりしますが、そうでなければ印刷のことはあまり考えませんよね。
で、最近はほとんどレスポンシブで制作していくので、いざ出来上がったサイトをお客さんが検証して印刷プレビューをしようものなら、なんじゃこりゃとなるわけです。
レスポンシブで作ったサイトが全てそうなるわけではないのですが、cssの書き方によっては印刷時にレイアウトが崩れたりします。

今回は下記の記述が原因でした。

1
@media only screenand (min-width768px) { }

レスポンシブ対応するときのよくあるメディアクエリの書き方ですよね。
この「only screen」ってやつが悪さをしてます。
読んで字の如く、「画面のみ」指定になっているんです。だから印刷時にはこのスタイルが無視されてしまってました。
なので記述を修正です。

1
@media printscreenand (min-width768px) { }

これで印刷時にもスタイルが適用されます。
もちろん印刷用CSSを用意する場合は「only screen」でないとバッティングするので、状況に応じたメディアクエリを記述しましょう。
また、min-width,max-width の指定にも注意してください。ここを考慮せず一律「print,screen」としてしまうと、モバイルだけに適用したいスタイルまで反映されてしまい、想定と異なるレイアウトになってしまいます。

ここまでやってプレビューで確認していると、ところどころ画像が出てないなーってこともよくありますよね。
原因は単純で、ブラウザのデフォルト設定が「背景の色・画像を印刷しない」となっているためです。
余計なインクを消費しない省エネ設定なんですかね?基本どのブラウザでもデフォルトはこうなっています。
そんな時はこの一文を。

1
-webkit-print-color-adjust: exact;

ただし、このスタイルはChrome用にしかなく、FirefoxSafariでは用意されていないので、これらの場合は他の方法で対応しなきゃです。「display:list-item」を利用するとか。
また、IE8もいうこと聞いてくれません。

上記をいれて対応終わったーと思ったら、いつものあいつがやってきます。そうIE君です。。。
ご存じのとおり、IE8はそのままではレスポンシブで制作したサイトがきれいに表示されません。
そこで多くの方は対応が簡単なJS実装をされているかと思いますが、これが印刷までは対応していなかったりします。
なので印刷まで考慮されたJSに切り替えます。今回は「html5shiv-printshiv.min.js」を適用しました。

以上で対応は完了です。

今回のケースはあくまで一例です。もちろん他に原因があることもありますし、対応方法ももっといいものがあるかもしれません。
ただ他の箇所に影響を与えず対応工数もそんなにかけたくないってときには、この方法を試してみては如何でしょうか。

 

Humberger Menu 自己流備忘録

某案件のため、(PC SPの切り替えで要素の移動が激しいソースだった、、、)時に作ったハンバーガーメニュー。作った日の備忘録。

ハンバーガーメニューのコーディングは昔から大嫌いです、、、がよく作らされます。

 

1.

まず外側の正方形を作る。今回は<p> id="btn"

<a>が付いていないので、cursor: pointer;を忘れずに。

3本線の位置指定のためにposition: relative;も忘れずに。

 

header #btn{
width: 36px;
height: 36px;
border: 2px solid #91be1e;
border-radius: 4px;
position: relative;
cursor: pointer;
}

 

2.

[1]で作ったp要素の内側に <span> id="hum"を作る。

これは三本のうちの真ん中の横棒。

一番上は:before

一番下は:afterで作る。

今回は height を指定せず、border で線幅を決定してみました。

こうしておくと上下の線の位置指定が若干楽かもしれない。(真ん中に対して線対称にするには:beforeのtopと:afterのbottomの値が等しくなるから)

線幅は上下のみ(線の厚みだけ)で、左右はいらないのでborder-width: 2px  0; と指定。

このようにして線幅4pxの横線を作ました。


header p#btn>span#hum{
display: block;
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
header p#btn>span#hum:before{
display: block;
content: "";
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:-18px;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
header p#btn>#hum:after{
isplay: block;
content: "";
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:0;
right: 0;
bottom: -18px;
left: 0;
margin: auto;
transition: 0.2s;
}

 

3.

jquery

$('#btn').on('click',function(){
$('#hum').toggleClass('click');

と「.click」クラスを付与するので、以下のように記述。

このとき上の「赤」と「下」の青が一致していないとうまく動きません。

セレクトの書き方を共通にしておくこと。(ロスタイム15分、、、)


header p#btn>#hum.click {
border-color: white;
}
header p#btn>#hum.click:before {
top:0;
transform: rotate(45deg);
}
header p#btn>#hum.click:after {
bottom: 0px;
transform: rotate(135deg);
}

 

4.

globalNavは最初、見えないようにしておくので display: none;

headerバーの高さ分だけ下に表示したいので、position: fixedで top :(header barの高さの)で指定する。

#globalNav{
display: none;
width: 100%;
overflow: hidden;
position: fixed;
top:72px;
left: 0;
right: 0;
background-color: #fff;
z-index: 100;
}

 

5.

最後にJSのソースを記録しておきます。

 display: noneで初めからナビゲーションは表示されていない。

だから$('#globalNav').hideはいらないと思う。

#btnをクリックするたびに 、、、

1. #humにclick クラスが付いたり外されたりのトグル、と

2. #globalNavがslideDownとslideUpのトグルが起きる。

これが前半。

globalNavのliを選択してクリックすると

1. #humのclick クラスが外される。

2.#globalNavがslideUpする。

これが後半。

<script>
$(function() {
$('#btn').on('click',function(){
$('#hum').toggleClass('click');
$('#globalNav').slideToggle(200);
return false;
});
$('#globalNav>li').click(function(){
$('#hum').removeClass('click');
$('#globalNav').slideUp(200);
});
});
</script>

 

6.

ちなみにHTMLは、、、

<!-- for SP only
------------------------------------------------------------>
<div class="sp right upperRight">

<!-- sp HumbergerMenu-->
<p id="btn" class="sp">
<span id="hum"></span>
</p>
<!-- btn -->
</div>
<!-- sp upperRight -->

<!-- SP globalMenu -->
<ul id="globalNav" class="sp">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<!-- end sp globalMenu -->

 

追記

header バーもposition: fixed;にして、(値はglobal Navと同じ値)すぐ下にあるbx-sliderとの間に白い隙間ができて時間をかけてしまった。

resetで img:vertical-align: bottom; としていたのが原因らしい。

img: vertical-align: baseline; にしたら解決した。