webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
「ファイル」「新規作成」
ドキュメントの設定をする。
続いて「マージン」「段組み」を設定する。
indesignでオブジェクトを作るには必ず箱が必要になります。
画像を配置するときは「画像を入れる箱」
文字を配置するときは「文字を入れる箱」が必要。
というわけで、画像用のの箱を作る。
続いて、文字を入れる箱を作ります。
A4横使いで 3:2の写真を4枚レイアウトする。
A4に対して余白を均等に10mm付けて、画像のサイズを132mm*88mmにする。
写真と写真の間は13㎜になる。
縦は、210-10-10-88-88=14
テキスト用のボックスは高さ7mmにする。
A4に4枚の写真をレイアウトするけれども、「箱」は一つ作ればよい。
そしていよいよデータを流し込む準備に入ります。
「ウィンドウ」「ユーティリティー」「データ結合」
この作業は「データ結合」です!
データソースとなるCSVファイルを選択する。
表示された項目を、作ったボックスにドラッグアンドドロップする。
この時点で、テキストのフォントや級数、左右揃えなどを指定しておく。
プレビューにチェックしておくと、下のようにプレビューが表示される。
メニューを表示する。
新規ドキュメントを作って、ページの設定をする。
最終的に必要な商品画像のサイズを入力します。
ここでは800px*800pxに設定します。
四隅のマージンを指定します。
それぞれの商品画像で、決められた位置にロゴや、商品コードなどを配置しなければいけないときは、予めそれらのためのスペースを指定しておく。
商品数が多いときなどはページの外に送品コードを記載するスペースを作っておくと後で検索をかけたりすることができて非常に便利。
↓こんな感じ、、、
これでページができました。
あとは商品台帳を横に開いて、ドラッグアンドドロップしていきます。
最後に、「ファイル」「書き出し」でJPEGを書き出せば一括で商品画像が出来上がり!
indesignを使って、コンタクトシートを作る。
サイズはA4(横)。
3:2の画像を4枚配置する。
各々の画像の下にはファイル名(テキスト)を記載する。
「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:\>dir/B f:\jobPhoto\200827_yotubaFuji\200827_yotubaFuji\output\quickProofJPG > f:\jobPhoto\200827_yotubaFuji\200827_yotubaFuji\output\fileName.csv
「A」列にはテキスト、今回は画像のファイル名を画像の下に記載したいのでファイルの名前にする。列の先頭は「file name」とする。「B」列には画像のファイル名を並べる。画像のファイル名であることを認識させるための記法があるのでそれに従い、「'@image」と入力する。
ちなみに「'」は文字列リテラル。「@image」と「文字列」で入力する。
以下を参考にしてみます。
まずは、IDとパスワードを作成する。
https://ssl11.secureserver.jp/~shtml/htaccess/make_htpasswd.html
以下のような画面が出てくる。
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?その他注意事項ファイルの最後では改行したほうがいいかもしらんね。
お役立ち記事は保存したい。
jQueryを使っていないのでフリクションしにくいのも利点。入れ子でスライダーが組めるところが便利です。
【使い方(Usage)】
3. CSSのidangerous.swiper.cssを開いて、Swiper部分の高さを設定(ファイルの最後のほうにある)
4.Initialize(初期化) ドキュメントが読み込まれたとき (もしくはウィンドウがロードされたとき)Swiperを走らせる
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を忘れてしまう。
たまには復習してみる。
// 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>');
jslint
windows コマンドプロンプトから、「git gui」と入力。
そうするとgit GUIが出てきます。
リモートリポジトリから、クローンを作成します。
「target directory」は事前に作成するのでなく、この操作によって(clone)によって新たに作成される。
「clone」の操作が終わると下のような画面になります。
「browse masters files」マスターブランチのファイルをブラウズします。
ローカルに作ったリポジトリの中のすべてのファイルが表示されます。
適当なファイルの、ファイル名の部分をクリックしてみます。
visualize masters history
SHA1 とは何ぞや?
、、というご指摘が。
あまり考えたことなかったですね。
キットそんなに大変なことにはならない、と感じていたので調べてみると思いのほかサクッと片付きました。よかった!
下の記事を参考に、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
screen
and (
min-width
:
768px
) { }
レスポンシブ対応するときのよくあるメディアクエリの書き方ですよね。
この「only screen」ってやつが悪さをしてます。
読んで字の如く、「画面のみ」指定になっているんです。だから印刷時にはこのスタイルが無視されてしまってました。
なので記述を修正です。
1@media
,
screen
and (
min-width
:
768px
) { }
これで印刷時にもスタイルが適用されます。
もちろん印刷用CSSを用意する場合は「only screen」でないとバッティングするので、状況に応じたメディアクエリを記述しましょう。
また、min-width,max-width の指定にも注意してください。ここを考慮せず一律「print,screen」としてしまうと、モバイルだけに適用したいスタイルまで反映されてしまい、想定と異なるレイアウトになってしまいます。ここまでやってプレビューで確認していると、ところどころ画像が出てないなーってこともよくありますよね。
原因は単純で、ブラウザのデフォルト設定が「背景の色・画像を印刷しない」となっているためです。
余計なインクを消費しない省エネ設定なんですかね?基本どのブラウザでもデフォルトはこうなっています。
そんな時はこの一文を。
1-webkit-print-color-adjust: exact;
ただし、このスタイルはChrome用にしかなく、Firefox、Safariでは用意されていないので、これらの場合は他の方法で対応しなきゃです。「display:list-item」を利用するとか。
また、IE8もいうこと聞いてくれません。上記をいれて対応終わったーと思ったら、いつものあいつがやってきます。そうIE君です。。。
ご存じのとおり、IE8はそのままではレスポンシブで制作したサイトがきれいに表示されません。
そこで多くの方は対応が簡単なJS実装をされているかと思いますが、これが印刷までは対応していなかったりします。
なので印刷まで考慮されたJSに切り替えます。今回は「html5shiv-printshiv.min.js」を適用しました。以上で対応は完了です。
今回のケースはあくまで一例です。もちろん他に原因があることもありますし、対応方法ももっといいものがあるかもしれません。
ただ他の箇所に影響を与えず対応工数もそんなにかけたくないってときには、この方法を試してみては如何でしょうか。