2014年12月5日金曜日

【おまけ】忍者ホームページの広告を目立たなくする方法

以下のcssをhead内または外部cssファイルにコピペする

.tdftad li {float:left;font-size: 8px;list-style-type: none;margin-left:10px;}
.tdftad li a {color:#fff;}
.tdftad {border-top:solid 1px #ddd;padding-top: 8px;}

以下解説---------------------------------------------------------------------

float:left;　＝広告を横並びにする
font-size: 8px;　＝文字の大きさを8pxにする
list-style-type: none;　＝リスト表示(li)の前のマーク(・)を表示しない
margin-left:10px;　＝各リストの左側に10pxの余白を作る

.tdftad li a {color:#fff;}　=　広告内の文字のリンクを白にする

.tdftad {border-top:solid 1px #ddd;padding-top: 8px;}
＝広告の上に8pxのスキマとグレーの線をひく

2014年11月28日金曜日

応用：メニューボタンをマウスを乗せたときとはずしたときで違う表示にしたい場合

メニューボタンを

マウスを乗せたときとはずしたときで違う表示にしたい場合

a(またはa:link)の設定とa:hoverの設定が必要になります。

1. a(またはa:link)はリンクをはった文字や画像をdiv boxの中に表示する場合

(メニューの文字にリンクをはる場合)用のcss

2. a:hoverはdiv boxの中のリンクをはった文字や画像の上に

マウスを乗せたときに表示をかえたい場合用のcss

div boxの設定を作るときに

idにしているかclassにしているかで表記の仕方が違います。

↓クリックで詳細な説明のあるページへジャンプします。

:hoverや:linkの他にも:visited :focus などの設定があります。

さらに応用編↓
http://lopan.jp/css-animation/

Q:【CSSで動く設定の仕方を習得した方が良い理由は？】

CSSで動く設定をしたものはほとんどの環境で動作します。
Javascriptで設定したものは閲覧者がJavaをOFFにしていると動作しません。
また、:hoverはタッチパネルのデバイスでは動作しません。
その場合は :focus のCSSでの設定が必要です。

※ちなみに教科書の第8章で紹介されているロールオーバーはJavascriptです。

idやclassを独自に設定せずに
ulとliのHTMLタグを使ってメニューボタンを作る事が一般的に多いので
その具体的な作例を紹介 (動いている様子はこちらを参照)
↓

----------------------HTML----------------------

<ul>

</ul>

----------------------CSS----------------------
.menu01 {
line-height:30px;
margin:1px;
text-align:center;
width:130px;
font-size:14px;
}
.menu01 a {
background-color:#DFEBFD;
border-width:0px 5px 0px 5px;
border-style:solid;
border-color:#003399;
text-decoration:none;
color:#3399CC;
display:block;
width:100%;
}
.menu01 a:hover {
border-width:0px 5px 0px 5px;
border-style:solid;
border-color:#FF6666;
color:#FF6666;
background-color:#FFCCCC;
text-decoration:none;
width:100%;
display:block;
font-weight:bold;
}
.menu01 a:visited {
width:100%;
display:block;
}

.menu01 a:focus {
border-width:0px 5px 0px 5px;
border-style:solid;
border-color:#FF6666;
color:#FF6666;
background-color:#FFCCCC;
text-decoration:none;
width:100%;
display:block;
font-weight:bold;
}

2014年11月18日火曜日

CSSを使用したWEBレイアウトの基本

CSSを使用したWEBレイアウトの基本

(1)divボックスを作る
　　方法A＝HTMLソースに<div>〜</div>を直打ちする
　　方法B=画面上のバー「挿入>レイアウトオブジェクト>Divタグ」
　　方法C=挿入パネルの「Divタグの挿入」
(2)divボックスに名前を付ける
　　方法Aの場合＝<div id="~">...</div>または<div class="~">...</div>と直打ち
　　方法B・Cの場合
　　＝出てくるウインドウの指示に従って操作するとidやclass名をつける事が出来る
　　

(3)名前を付けたdivボックスの設定を作る
　・dreamweaver上でdivボックスを選択し、
　　選択した状態でCSSスタイルのパネルの右下の
　「新規CSSルールのボタン」をクリック。

※Illustratorなどのような「文字や画像を自分が移動したい場所に配置する」
　という感覚ではなく、
　「文字や画像を入れたdivボックスの内と外に余白をどう作るか」
　を使ってレイアウトする感覚で操作していくとわかりやすい。

内(がわの余白)＝マージン margin
外(がわの余白)＝パディング padding

初校　プリントアウト校正のチェックポイント

初校　プリントアウト校正

プリントアウト校正で何を見るのか

例えば校正ではこういう所をチェックします

 例えば校正ではこういう所をチェックします

データ校正(二校)のチェックポイント

11/18(火)・データ校正(二校)のチェックポイント

[ I ] 印刷可能な画像データになっているかどうか
以下の１)〜４)の４つの条件を満たしていないと印刷可能なデータではありません

１)パッケージ化されて、
元画像がinddファイルと同じフォルダ内に同梱されて
圧縮されている事。
パッケージ化の方法は、教科書のP.80〜81
2)元画像の解像度が実寸で350ppi以上ある事。

(350ppi未満は×)

1. [イメージ]→[解像度]を選択

2.解像度の項目を350ppiにした状態で、
幅と高さを実寸(実際に印刷したときにその画像が出力されるサイズ)にする。

3)元画像の形式がEPSまたはPSD形式で保存されている事
[ファイル]→[別名で保存]→[Photoshop またはPhotoshop EPS]

4)RGB画像(=映像やモニタ表示用／光の三原色)ではなく、

CMYK画像(=印刷用・インク対応表示／4色分版・絵具の３原色)

形式で保存されている事

[イメージ]→[モード]→[CMYKカラー]にチェック

InDesign 上でリンク画像のステータスをチェックする方法

InDesign上でリンク画像の情報をチェックする事が出来ます[ウィンドウ]の[リンク]を選択して表示

赤いはてな＝元画像が同梱されていません。パッケージ化して保存してください。
右の青い文字がPB
= 印刷の枠外に画像が配置されています。不要な場合は削除してください

形式＝Photoshop か PhotoshopEPSになっていないといけません。
カラースペース＝CMYKになっていないといけません。

元のPPI
= ここがWEBからとってきたものだと72ppiになるので、「無理矢理引き延ばして印刷用の解像度にした」ということがわかってしまいます。
編集後のPPI
= WEBからとってきたものでも他に代わりになる画像が無い場合はここの解像度が350ppi以上になるようにしてください。

トンボの正しい使い方

仕上がりサイズと裁ち落とし

(元サイトの詳細な説明：NIKKEI PRINTING INC.DTPテクニカルガイドより)

外３ミリ幅まで確実に塗る(or背景画像を貼る)

↑仕上がり線(裁断機の切る線)に近い所に文字をレイアウトしない
↓仕上がり罫線は入れない(=裁断機の切る線上に黒い線を引かない)

2014年11月17日月曜日

印刷に使える解像度の画像とは？

解像度とピクセル数とモニター表示サイズの関係性を理解しよう

印刷解像度dpiとスクリーン線数lpi

http://iro-color.com/design/dpi.html

どこまでセーフ？印刷解像度

印刷用で解像度350dpiの理由
スクリーン線数により必要解像度が決まる
適正サイズより解像度が小さい場合はどうなる？
解像度が足りないとダメな理由

解像度の変更について

印刷通販会社が公開している解像度についての説明書
【WAVE】
http://www.wave-inc.co.jp/data/imagefile/image_size.html
【graphic】
http://www.graphic.jp/technical/check_psd/data_size03.php

印刷通販会社が公開している解像度計算機

【印刷屋さんドットコム】
http://www.insatsuyasan.com/guide/pdf_pixel_cal.html

印刷したいサイズ（mm)から、実際のデータサイズ（pixel）を計算する
実際のデータサイズ（pixel）から、印刷した時のサイズ（mm)を計算する

【セイコー印刷】　

画像解像度換算表（ピクセル数 ←→ サイズ）

http://www.seiko-web.co.jp/other/dpi.php

印刷サイズと写真サイズの対応一覧表

参考までに、「A4などの用紙に350dpiで印刷するには、どれくらいのサイズの写真が必要か？」の一覧を載せときます。

(元サイトはhttp://miz2403.com/print-dpi/)

印刷するサイズ	350dpiで印刷する場合に用意すべき写真のサイズ
	4093 x 2894 約1200万画素
	2894 x 2047
	2047 x 1447
	1447 x 1024
	1024 x 724
	1750 x 1226 約215万画素
	1254 x 758

自動処理／アクション機能・バッチ処理

　※例では縦横640pxの正方形になっていますが、

自分の統一したいサイズ(縦横混在の場合はどちらか１辺の長さでも可能)

を設定します。

※アクションのパネルで、作成した自動処理のアクションを選択して

再生ボタン(右向きの三角)をクリックするだけでも保存した自動処理アクションを

使用できます。が、

以降は、さらに「バッチ処理」を行って

複数の画像ファイルを全自動処理にできる方法の紹介です

↓

参照：同じ内容の紹介がされている別のサイト

意外と知らない？Photoshopの [アクション]＞[バッチ]コンボ

膨大な数の画像を同じ設定で自動処理したい！って時に役立つ、
意外と知られていないPhotoshopのアクション機能とバッチ機能のコンボ技を紹介します。

http://zxcvbnmnbvcxz.com/photoshop-複数ファイルを一括で自動操作する方法-バッチ/

補足：
さらにphotoshop内だけでなく、複数のアプリケーションをまたいで全自動に
したい場合などに使用できるAutomatorというMac OS10.5以上に最初から入っている
アプリケーションもあります。
参考：Macの”Automator”の便利さは異常
http://green-romp.com/blog/?p=5444

残り授業時間数

残り授業時間数

GD2 WEB
~~11月17日(月)~~
11月21日(金)

11月28日(金)

12月01日(月)

12月05日(金)

GD2 DTP

11月18日(火)
11月25日(火)
12月02日(火)

2014年11月11日火曜日

組み版と禁則処理／段組み・文字組

------組み版に用いられるレイアウトの名称------

柱-----------------このページが何に属するかを表すページ上の表示
天-----------------ページの上の空間
キャプション----画像等の説明文
版面---------------上下左右の空間を取り除いたページの中心部分(マージン)
ノンブル---------ページ数の表示
見出し------------タイトル表示
本文---------------内容文章
小口---------------ページの端(綴じられていないほう)
ノド---------------見開きのつなぎ目
地------------------ページ下の空間　

---------------------------------------------------------------
禁則処理

・禁則処理とは
行頭禁則，行末禁則，分離（分割）禁止などの禁則を避けるために行われる処理のことを禁則処理という．

行頭禁則

終わり括弧類，ハイフン類，区切り約物，中点類，句点類，読点類，繰返し記号，長音記号，小書きの仮名及び割注終わり括弧類を行頭に配置してはならない（行頭禁則）．
これは体裁がよくないからである．

1）	繰返し記号，長音記号及び小書きの仮名を行頭禁則としない方法もある．
2）	中点[・] を行頭に配置をよしとする考え方もある．
3）	新聞ではさらに，区切り約物（疑問符[？]と感嘆符[！]）を行頭に配置することをよしとする．

行末禁則 始め括弧類.　割注始め括弧類を行末に配置してはならない（行末禁則）．

これは体裁がよくないからである．

分割禁則

次のような文字・記号が連続する場合は，その字間で2行に分割しない（分割禁止）．これは，それらの文字・記号を一体として扱いたいためである．

．

【 基本版面と実際のページの設計例】
http://www.w3.org/TR/jlreq/ja/#fig_ad1_19-ja段組み

・横組
横組の段組，例えば2段組に図版を配置する場合，図版の左右サイズは，できるだけ基本版面で設計した1段の左右サイズ又は基本版面の左右サイズを基準に設計し，そのいずれかのサイズで配置できるときは，そのように決める．また，その位置は，多くは版面の天又は地にそろえて配置する

・縦組

縦組でも，段組にする場合は，例えば，3段組の図版の天地サイズは，できるだけ基本版面で設計した1段若しくは2段の天地サイズ，又は基本版面の天地サイズを基準に設計し，そのいずれかのサイズで配置できるときは，そのように決める
文字組

・文字サイズ

小書きの仮名（ぁぃぅァィゥなど）は，縦組では文字の外枠の天地中央で右寄り，横組では文字の外枠の左右中央で下寄りに字面を配置する．また，約物などでは，文字の外枠の天地左右中央に配置しない例がある．

・字間

図 2.9 均等詰めの例（横組の場合，上側はベタ組，下側が均等詰めの例）

図 2.10 字面詰めの例（横組の場合，上側はベタ組，下側が字面詰めの例）

・行間