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