パスに線幅を付ける

1)ペンツールでパスを描く。
2)パス選択ツールで、描いたパスを選択。
3)パスウィンドウの右上、▼をクリックし、プルダウンメニューを表示「パスの境界線を描く」を選択。
4)ダイアログが出てきたら、「ブラシ」を選択してOK。
5)ブラシツールでブラシの形状、直径サイズを指定。
6)描画色を設定。
7)パスウィンドウの一番下の○印(ブラシでパスの境界線を描く)をクリックする。

注意
一度描いた線幅つきのパスは実は画像になっているので、後からパスを変更しても追従しない。
既に描いてしまった線幅付き画像を消しゴムツールで消してから、パスを変更し再度線幅画像を作成すると良い。

カテゴリー: Adobe フォトショップ | タグ: | コメントする

Logical And

論理和の計算

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<script type="text/javascript">
var testValue1 = 1;
var testValue2 = 2;
var returnValue1 = testValue1 & 1;
var returnValue2 = testValue1 & 2;
var returnValue3 = testValue1 & 3;
document.write("testValue = " + testValue1 + "  & 01 = " + returnValue1 + "  " + testValue1 + "  & 10 = " + returnValue2 + "  " + testValue1 + "  & 11 = " + returnValue3 + "<br />");

returnValue1 = testValue2 & 1;
returnValue2 = testValue2 & 2;
returnValue3 = testValue2 & 3;
document.write("testValue = " + testValue2 + "  & 01 = " + returnValue1 + "  " + testValue2 + "  & 10 = " + returnValue2 + "  " + testValue2 + "  & 11 = " + returnValue3 + "<br />");

</script>
<body>
</body>
</html>
論理和の結果

論理和の結果

カテゴリー: Javascript | タグ: | コメントする

ボーダー付き要素のTop、Left位置

要素の幅、高さに対し、パディング、ボーダー、マージンが順に外側を包むようになりますが、
その要素をTop、Leftで配置しようとした場合、ボーダーの左上端が配置原点になる。

<!doctype html>

<meta charset="utf-8" />
div in div and border</pre>
<div style="position: relative; margin: 10px auto; width: 100px; height: 100px; background-color: #ff0;">
<div style="position: absolute; width: 50px; height: 50px; background-color: #666; top: 20px; left: 20px;">
<img style="border: #000 solid 10px;" alt="" src="mark16.png" /></div>
</div>
<pre>

ボーダー付き要素のTop、Left配置

ボーダー付き要素のTop、Left配置

カテゴリー: HTML詳細 | タグ: , , | コメントする

フォント名によるフォント詳細の判別

創英角ポップ体というチラシなどで見かけるフォントがありますが、これは(株)創英企画が開発したフォントですが
この会社はポップ体以外にもゴシック体など幅広く開発しています。同じゴシック体にもいくつか違いがあるフォントがあり
英数字の識別名とフォント名が組み合わされてフォントの詳細を表わしています。

角ゴシック体を例にすると
HG創英角ゴシックUB
HGP創英角ゴシックUB
HGS創英角ゴシックUB
以上3種類があり、
最初のHGはリコーが販売するフォントに付けている識別名でHigh Gradeを表わします。
次のHGP、HGSは
HGのみ: 欧文・和文とも等幅フォント
HGS : 欧文はプロポーショナルフォント・和文は等幅フォント
HGP : 欧文・和文ともプロポーショナルフォント
の違いをあらあわしています。

カテゴリー: ウェブサイト作成の秘訣 | タグ: , | コメントする

画像の埋込

画像の配置のデフォルトは画像のリンク配置なので、作成したaiファイルを印刷に送ると画像が無いので、完全なデータの再現が出来ません、ということになりがち。
これは画像の配置時に[リンク]のチェックボックスのチェックを外しておけば良いのですが、既にリンク配置してしまった画像を埋め込みたいときには、
[ウインドウ]-[リンク]-[画像を埋め込み]でリンク画像を埋め込むことが出来ます。
埋め込みが終わるとレイヤーウインドウの表示もリンクから画像に変わります。

カテゴリー: Adobe イラストレータ | タグ: , | コメントする

逆光写真の簡単補正

補正をしたい部分の選択
クイック選択ツール ◎
自動選択ツール   ○選択、非選択範囲が細かく分かれる。髪の毛などを大まかに捉えるのには向く
なげなわツール   あまり使う機会はない
多角形選択ツール  ○確実に領域を定義するのには向く。クイック選択ツールや自動選択ツールと組み合わせ、選択範囲の中埋め、外削除を大まかな領域定義で行うのに向く
マグネット選択ツール○多角形選択ツールと同じような用途。クイック選択、自動選択が上手くいかない場合で形状が複雑で多角形選択ツールでの定義が面倒な場合。

選択した部分の補正
[イメージ]-[色調補正]、[自動トーン補正]、[自動コントラスト補正]、[自動カラー補正]が使える。
人物の画像補正を行う場合は[自動トーン補正]ないし[自動カラー補正]が良い。
一般風景画の床の色を変えるなどは[色調補正]の[色相]変更などが利用できる。

カテゴリー: Adobe フォトショップ | タグ: , , | コメントする

ビルトイン関数

JavaScriptで最初から組み込まれている関数のことで、実際にはどのオブジェクトにも属さない処理を実行するプログラムを持っています。この関数を利用することで、別途プログラムを記述することなく処理することができます。

主なビルトイン関数
escape(string) string=変換対象の文字列
eval(string) string=JavaScriptを含んだ文字列
parseFloat(number) Number=変換対象の文字列
parseInt(string[,radix]) string=文字列 radix=基数
String(obj) obj=変換対象のオブジェクト
unescape(string) string=変換対象の ASCII文字列

カテゴリー: Javascript 関数 | タグ: | コメントする

フレームページ

フレームページは一つのページに、複数のページを埋め込むために使います。
たとえば左にメニュー、右にメニューの選択によって表示を変える内容といった配置です。
通常のbody要素ではなく、 frameset要素 がメニュー、内容の部分を囲います。

サンプル

<html>

 <head>
  <title>サンプルページ</title>
 </head>

 <frameset cols="100,*">
  <frame name="menu" src="./01m.html">
  <frame name="contents" src="./01c.html">
 </frameset>

</html>

なお、メニュー部分のリンク設定では通常表記だとメニュー部分にリンク先が表示されるので、
a要素には必ずtarget属性を記述し属性値を、表示したい側のフレーム名にします。

<a href="./contents.html" target="contents">top</a><br><br>
<a href="./profile.html" target="contents">自己紹介</a><br><br>
<a href="./diary.html" target="contents">日記</a><br><br>
<a href="./link.html" target="contents">リンク</a>

フレームの利点
フレームを使わない場合、すべてのページにメニューも作成しなければならず、作成段階では非常に手間がかかります。保守時も注意が必要です。一方、フレームを使えば切り替えるページのみを更新すればよく、それ以外のメニュー等の画面は更新する必要がないので。作り手側にとっては手間が省け、特にページ数が多くなったとき、管理の面から飛躍的にページ作成や更新の効率が上がります。

フレームの欠点
利用者の多くは検索エンジン経由でページを訪れますが、検索エンジンで多くヒットするのはフレームページではなく、フレームによって関連づけられた本文のある各ページです。しかしこのページにはトップや他のページに移動するためのメニューがなく、利用者はそのページ以外見ることができません。これではサイト内の関連情報を必要に応じて利用者の提供することができません。フレームページが検索サイトにヒットしないのはフレームページの内容が単なる関連づけの情報しか書かれていない構造によるので工夫の仕様がなく、フレーム利用の最大の欠点です。

カテゴリー: ウェブサイト作成の秘訣 | タグ: | コメントする

escape(), unescape()

エスケープ表記のうち使用できない文字をパーセントエンコーディングという %XX という形式の16進のコード変換(逆変換)する関数にはescape(),  unescape()以外にencodeURI(), decodeURI()とencodeURIComponent(), decodeURIComponent()があるが、それぞれ変換できない文字が異なるので、使用に当たっては想定される文字列によって適切なencode、decode関数を選ぶ必要がある。基本的にはescape(), unescape()が推奨。日本語文字列をURLパラメーターとして渡すような場合はこの変換は必須。

変換仕様
– 全ての関数で[0-9A-Za-z]は変換されない。
– escape()で変換されない記号は *+-./@_ だけである。
– encodeURI()で変換されない記号は !#$'()*+,-./:;=?@_~ である。
– encodeURIComponent() が変換しない記号は !'()*-._~ のみである。
– マルチバイトなコードについては、たとえば、UTF-8の「あ」は escape() だと %u3042、encodeURL()およびencodeURIComponent() だと %E3%81%82。

変換例 escape()
あいうえお –> %u3042%u3044%u3046%u3048%u304A

カテゴリー: Javascript 関数 | タグ: , | コメントする

ライブラリーの利用

最近のウェブサービスのバックエンドはPerlやPHP、JavaにRuby、Pythonなどなど様々だが、フロントエンドは必ずといっていいほどJavaScriptが使われている。しかし、JavaScriptには取っ付き難いところもあって、例えばブラウザごとにJavaScriptの実行エンジンが異なることや、同じブラウザでもバージョンごとに細かい差異があったり、つまりクロスブラウザのサポートがたいへん。
その対策にはライブラリを使えば良い。ライブラリは沢山あるが、古くから使われているのはprototype.js、最近人気なのはjQuery。prototype.jsは必要最低限に近いコードだけ記述されていてコメントはないが比較的読みやすいコードになっている。一方、Queryはコードもコメントも多いが、コメントがあっても初心者には難しいコードばかり。従ってJavascriptの勉強やライブラリ機能の改造にはprototype.js、ライブラリとして利用するのはjQueryが良いのではないか。
もし、prototype.jsとjQueryを一緒に使うには$()の意味が違うので下記指定が必要。
1. 最初にprototype.jsを読み込ませます。
2. jQueryを読み込ませます。
3. 次にjQuery.noConflict()を呼び出す。
4. 最後にjQueryのプラグインを読みこます。

<script type="text/javascript" src="prototype.js"></script><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery.noConflict(); jQuery(document).ready(function(){ 	// ここでは、$はprototypeの動作をします。 	// jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。 });
// ]]></script>

参照:
prototype.jsと同時に使うには
jQueryとprototype.jsを共存させる方法

関連:
prototype.js逆引きサンプル集

カテゴリー: Javascript | タグ: , | コメントする