KEN WEB BLOG ~WEB・DTPスクール パソコン教室 KENスクールのインストラクターがつづるブログ~

【こちらの記事は、約5分程でお読みいただけます。】

Webブログをご覧のみなさま！こんにちは＾＾

ウェブサイトをコーディングするときに欠かせない「CSSレイアウト」。

難しいようで、すこしコツを掴んでしまえば、
サクサクとコーディング出来るようになるのですが、
ここで立ちはだかるのが「IEの壁」！

「モダンブラウザ」と呼ばれるweb標準に準拠した新しいブラウザと、
古いブラウザではCSSの解釈が違います。

Dreamweaverなどでプレビューをして、
キチンとレイアウトをしたつもりでも、
古いブラウザで見てみると崩れている事が良くあります。

殆どの古いブラウザは、
現在ほぼ使われていないのであまり気にする必要が無いのですが、
今だにシェアがある古いInternetExplorer（以下IE）では、
崩れないように確認を取るのが必須です。

特に、IEだけに存在する仕様やバグが沢山あり、
普通にコーディングしているだけだと、
かなりの確率でレイアウトが崩れてしまい・・・
コーダー初心者の高い壁になっています。

IEできちんと見れるように直しても、
他のブラウザで逆に崩れてしまう。
ハックで直す方法もありますが・・・
簡単な、IEだけの直し方があるんです。

前回、「haslayout」を「true」にする事によって、
IEの不具合を直す方法を紹介しました。

この方法はほとんどの不具合に有効なのですが、
逆に「true」にすることによって不具合が起こる場合があります。

今回は、この事例についてお話していきたいと思います。

「haslayout」を「true」にすることによって不具合が起こるものとして、
「ul/ol」「li」があります。
まず、何もしていない状態のリストがこちらです。

「ol」に「ul」を入れ子にしている状態です。
ここで、「ol」と「ul」に「zoom:1;」を設定してみます。
（zoom:1;については前回のブログを参照してください）

このように、リストマーカーが消えてしまいました。
また、「li」に「zoom:1;」を設定すると・・・

「ul/ol」のマーカーが下にずれ、
「ol」のマーカーがすべて１になってしまいました。

このように、リスト関係のタグの「haslayout」を「true」にすると、
看過できない不具合が発生します。
しかも、この不具合は「haslayout」が「true」の時でしか発生しないものです。

便利だからと言って全称セレクタで「zoom：1；」を掛ける事は得策ではない事が言えます。
前回、及び今回のブログはXHTML/CSSの基本的な知識があっても難しい内容です。
前回と同じく、あえて難しい内容を細かい説明なしで書かせていただきました。

ハックって何？

クロスブラウジングって？

そもそも、IE６や７なんて持ってないよ！どうやって確認するの？

バグって具体的には？？？

・・・答えは、KENSCHOOLの「極」にあります！

今回書いた内容も含め、
「極」では現場に必須なテクニックを、
初心者に方にもわかりやすくマンツーマンで指導いたします。

--------------------------------------------------------------------------------

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【CSS基礎 + 上級レイアウト講座】
IE6の見栄えを整える際に、CSSのhackというテクニックを覚えるのは
必須になります。
CSS基礎講座では、はじめてでも安心のCSSレイアウトを組める学習を、
そして、CSS上級レイアウト講座では、どんなブラウザにも対応できる、
CSSの記述方法を伝授します。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 馬場

【こちらの記事は、約3分程でお読みいただけます。】

Webブログをご覧のみなさま！こんにちは＾＾

今回はDTPの印刷のお話しをしようと思います。

グラフィックの授業の時などに作っている作品、
ちゃんとした形に残しておきたいと思いませんか？

そんな時は、やはり印刷会社にデータを入稿し、
綺麗に印刷をするのが良いと思います。

では、それは一体どうするのか。

最近は自宅からインターネットで印刷会社に依頼する、
ネット印刷というものがあります。

ここでは、そのネット印刷へデータを入稿する際の注意事項を
ご紹介したいと思います。

1. ちゃんとトンボは作られているか？（ヌリタシは3mm余分に作られているか）
2. カラーモードはCMYKになっているか？（配置している写真のデータも含む）
3. 写真を配置しているのであれば画像解像度は350dpiになっているか？
4. 写真はリンクか？埋め込みか？（リンクであれば、一緒のフォルダにリンク先の画像は入れてあるか？）
5. フォントはアウトライン化されているか？
6. イラレのバージョン・形式は、印刷所の指定に沿っているか？
   （印刷所は最新のイラストレーターなどに対応していない場合、ai入稿ではなくeps入稿の場合もあります。）
7. 効果の解像度はちゃんと350dpiになっているか？

上記の内容と、ネット印刷を取り扱っている会社によっては、
確認用のスクリーンショットを送って欲しいという場合も多いので、
「スクリーンショットは一緒のフォルダにまとめて入っているか？」
（これはモニターで確認するため、CMYKではなくRGB。）
という事も注意しなければいけません。

以上のことを守り、データをWeb上から入稿するのが一般的です。

使用する印刷会社のホームページから簡単にデータ入稿ができるので、
ぜひ試してみてください。

ただ、重過ぎるデータになるとWeb上からは難しいので、
直接印刷会社に持って行くなどしなければいけません。

このような事を、KENスクールでは「極グラフィック」という講座で学ぶ事ができます。

上記にも色々と専門用語が出てきましたが、そういうものも全て講座内で学んでいきますので、
興味があったらインストラクターに聞いてみてくださいね。

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」グラフィックPro講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、極められるように指導します！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 山田

【こちらの記事は、約3分程でお読みいただけます。】

Webブログをご覧のみなさま！こんにちは＾＾

HTML/CSSを用いてWebサイトの制作を行うと、
必ずと言ってよいほど遭遇するのが「各ブラウザでの表示の違い」です。

Internet Explorerで見た場合とFirefoxでレイアウトがおかしくなってしまう等、
度々遭うにも関わらず、修正するのに手間が掛かってしまいます。

では、なぜこういう状況が発生するのでしょうか？

これは各ブラウザでHTMLの記述を解釈するためのプログラム
「レンダリングエンジン」（以下エンジンと表記）の違いが原因です。

代表的なエンジンとして

と種類は様々です。

このエンジンの違いによりHTML/CSSの解釈に差異が発生し、
結果ブラウザでの表示の違いが表れるわけです。

LunascapeやSleipnir等ブラウザの中には複数のエンジンを使い分ける事が出来るものあります。
一つのブラウザで表示を切り替える事ができ、
エンジンの違いがよく分かると思います。

また、最新のHTML5/CSS3もエンジンにより違いが出てきます。

対応状況の確認は様々なサイトで確認する事が出来ます。
「例：HTML5＆CSS3 Support」
http://www.findmebyip.com/litmus/

対応しているHTMLタグ、CSSプロパティ、CSSセレクターと
多岐に渡り異なっているので、必ず対応状況を確認してから
使用するようにしましょう。

--------------------------------------------------------------------------------

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【「極」コーダーPro /スマートフォン講座】
この講座では、Webサイトの管理・制作を担当するコーダーの仕事を実際に体験します。
『CSS管理編』、『XHTML＆CSS』、『HTML5/CSS3（スマートフォンサイト基礎）』、
『企画/制作編』にて、XHTML・CSS・Dreamweaverの知識と技術の向上、
実際の現場の雰囲気を体感することを目的とします。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 野村

【こちらの記事は、約3分程でお読みいただけます。】

Webブログをご覧のみなさま！こんにちは＾＾

Illustratorのパスの角には、
線幅に合せた角の線が表示されます。

でも、角が鋭利な場合は線の伸びを抑えるために
「べベル結合」（角が飛び出ない設定）の状態になります。

このような場合でも線の角を伸ばしたい場合は、
「線」パネルの「角の比率」の数値を上げると良いでしょう。

角の角度によりますが、数値を上げることで
角を尖らせられます。

ただ、あまり急な角度の角を尖らせてしまうと
パスよりも角が伸びすぎてしまいますので
適度な数値にするか、もしくは
線を使わず塗りで角を表現すると良いでしょう。

--------------------------------------------------------------------------------

Illustratorを使用して、オリジナルの作品創りをしたい方へ！
KENスクールで学習をしてみませんか？？

⇒【イラストレーター講座】
Illustratorは、単純な図形や文字を組み合わせるだけで、
見栄えの良いグラフィックが制作できる、万人に向けた
デザインツールです。必要となる技術を余すことなく学習できます。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 長幡

【こちらの記事は、約3分程でお読みいただけます。】

Webブログをご覧のみなさま！こんにちは＾＾

共感覚（きょうかんかく、シナスタジア、synesthesia, synasthesia）とは、
ある刺激に対して通常の感覚だけでなく異なる種類の感覚をも感じることができる
一部の人にみられる特殊な知覚現象のことです。

例えば、共感覚を持つ人には文字に色を感じたり、
音に色を感じたり、形に味を感じたりするそうです。

よく絶対音感の持ち主と言われる方は、これに当てはまるとか。

絵画は様々な色で構成されてます。
音楽も同じで色々な音色で構成されてます。

画像のWebセーフカラーを見ても分かるように、
トーンはある色の純色に白と黒をどれだけ加えたかによって分けられます。

これを楽器に例えると、同じ楽器でどれだけ音に濁りがあるか？
音域はどの辺りか？
という２つのパターンで考えることができるのです。

色は明色になるほど軽く、暗色ほど重く感じられます。
これは音色でもいえます。
例えばオーケストラでもお馴染みの管楽器から
ヴァイオリン（高音）、ヴィオラ（中～高音）、
チェロ（中～低音）、コントラバス（低音）。
この中からヴァイオリンとヴィオラが抜けると
重々しい音色になりますよね。

楽器の特性（純色か濁色）・音域（明色か暗色）を理解すればよい音楽ができると言われます。

これは絵画で表現したい色のトーンを選択するのと似ています。

例えば音階で色を表すとしたら

ド・・・・無彩色（白/黒）or 赤
レ・・・・黄色
ミ・・・・黄色orオレンジor緑
ファ・・・青orオレンジ
ソ・・・・青or緑
ラ・・・・赤or紫
シ・・・・無彩色（白/黒）or黄色

多少個人差はあるようですが、
上記のように感じる方が多いようです。

漠然なイメージを形として表すことでより作品のイメージを
深めることができるのではないでしょうか。

このように違う視点からデザインを考えてみるのも面白いと思いますよ。

--------------------------------------------------------------------------------

現場のデザイナーも通うKENスクールで、あなたもデザインスキルを磨きませんか？？

⇒【「極」グラフィックPro講座】
「デザイン」と「アート」、その違いを考えることからスタート！
レイアウトや色彩・文字などの基礎知識はもちろん、Photoshopと
Illustratorを自在に扱い、極められるように指導します！

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 安達

【こちらの記事は、約3分程でお読みいただけます。】

Webブログをご覧のみなさま！こんにちは＾＾

今回はWindowsユーザー向けの内容になってしまうかもしれませんが、
皆さんはどのようなエディタをお使いでしょうか？
お好みのエディタはございますでしょうか？

そもそもエディタとは？
正確には『テキストエディタ』。
なので、そのままですね。
テキスト（文章）のみを作成・編集するアプリケーションです。

	メモ帳
	MKEditor
	TeraPad
	秀丸エディタ
	サクラエディタ

etc...

などなど、無料のフリーソフトウェアも、有償のシェアウェアもありますが、

残念ながらMac用は数種類しかございません。
このことからも「コーディングはWindows」というイメージが強いのでしょうね。

秀丸エディタや、サクラエディタは言わずと知れた人気テキストエディタですね！
プログラム開発者に知らない人はいない！という程人気があります。

このように、一口にテキストエディタと言っても、
使用用途によって多種多様です。

各種、便利な機能を兼ね備えてますが、ちょっとしたメモを取る際や、
一部のみ文章を修正する際に、わざわざWordや、Dreamweaverや、
eclipse等を起動させるのはちょっと面倒ではないでしょうか？

DreamweaverはWebオーサリングツールで、
eclipse(イクリプス)はIDEと呼ばれる 統合開発環境ツールです。
ActionScript3.0の授業で使用している『FlashDevelop』もIDEです。

IDEというのは、人間が記述したプログラムをコンピューターが
解釈できるように変換するソフトウェアの『コンパイラ』、
プログラムの不具合の発見・修正を支援するソフトウェアの『デバッガ』、
そして『テキストエディタ』など、
今まではこれら別々のアプリケーションを使って開発をしてきたのですが、
これらをひとつにまとめて利用できるようにしたものです。

ですので、Dreamweaverやeclipseはテキスト編集の機能はもちろん
含まれておりますが、単純なテキストエディタではないのです。

では『テキストエディタ』とは具体的にどのようなものなのかと言うと、
Windowsの『メモ帳』に機能を追加し、
便利に使えるようにしたものがテキストエディタです。

フリーソフトウェア、シェアウェア、
それぞれのテキストエディタにより機能は様々ですので、
自分の用途に合わせテキストエディタを選別すると良いと思います。
ですので、どのテキストエディタが良いのかというのは一概には言えません。

ちなみに、KEN SchoolのWeb講座では、
主に『TeraPad』を使用しております。

--------------------------------------------------------------------------------

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【「極」コーダーPro /スマートフォン講座】
この講座では、Webサイトの管理・制作を担当するコーダーの仕事を実際に体験します。
『CSS管理編』、『XHTML&CSS』、『HTML5/CSS3（スマートフォンサイト基礎）』、
『企画/制作編』にて、XHTML・CSS・Dreamweaverの知識と技術の向上、
実際の現場の雰囲気を体感することを目的とします。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 間部

【こちらの記事は、約3分程でお読みいただけます。】

webブログをご覧のみなさま！こんにちは＾＾

今スマートフォンを使っている方がたくさんいらっしゃいますが
その中でも、iPhoneを使っていらっしゃる方も多いのではないでしょうか？

現在iPhoneやiPadではFlashが対応していないので、
Flashで作ったアニメーションを見ることができませんでした。
（DocomoやauなどからはFlashも見れるスマートフォンも発売されていますが。）

今後どうなっていくのか調べていたら、こんなニュースを見かけました。
 

「ジョブズの勝利-Adobeの降伏で終結したモバイルFlash抗争-」
 

なんと！
Adobeの降伏！！
では、今後はどうなるのでしょうか？

Adobe社ではアニメーションなどはHTML5を使った、
WEBアニメーションツール「Edge」も開発しているそうです。

このツールではアニメーションをHTML・JavaScript・CSSなどの、
Web標準技術を使って、効率よく作成することが可能です。

KENスクールでは現在スマートフォンサイト制作講座という講座でもHTML5についてはご紹介していますが、
スマートフォンサイト制作はパソコン向けのサイトよりも軽いサイト作りを心がけていただきたいのですが、
そこで、HTML5とCSS3が重要になってきます。

この2つを利用すると今まではIllustratorやPhotoshopなどの画像加工・画像作成ソフトを使用して作っていた
ボタンなどもプログラムで再現することができるのです。

パソコン用のWEBサイトであればFlashは問題なく使用することができますが、
今後スマートフォンサイト作成の時にはHTML5の知識が必要不可欠になってきそうですね。

WEBのお仕事に就く前にぜひ知っておいてほしい技術ですね。
今後どうなるのかまた何かありましたらブログに書かせていただきます。
 

http://www.itmedia.co.jp/news/articles/1108/01/news102.html

--------------------------------------------------------------------------------

現役デザイナーが直接マンツーマン指導！
KENスクールで、あなたも一からスマートフォンデザインを学びませんか？？

⇒【スマートフォンデザイン講座】
Web制作スキルの習得と共に、
スマートフォン特有のデザインルールを
HTML5/CSS3を使用して学習しておくことが、
即戦力として自らをアピールできる付加価値になります。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 深作

【こちらの記事は、約6分程でお読みいただけます。】

Webブログをご覧のみなさま、こんにちは！

Illustratorで図形を切り分ける時に使う「パスファインダ」の「分割」には
ちょっとした盲点があります。

「分割」の機能は、切り分ける図形のパス（クローズパス）に切るための
線のパス（オープンパス）を作成して実行し、図形を切り分けることが多いですが、
切り分ける図形に複合パスのような「穴」があるときや
切り分けるパスで形が出来ているときには、
切り分ける図形以外のパスが作成される場合があります。

「分割」の結果を確認してみると、
切り分けられた図形のほかに穴の中や図形の外に、
不必要なパスが作成されています。

色の指定は「塗りなし」、「線なし」です。

「分割」した図形を別々に選択して使うときには問題ありませんが、
色を変えるためまとめて選択して色指定すると、
不必要なパスにも色が入ってしまい、思いもよらぬ結果になります。

「分割」をした後には余分なパスがないかを確認すると良いでしょう。

余分なパスをまとめて削除したい場合は、
「オブジェクト」メニュー→「パス」→「パスの削除」をすると

• 余分なポイント
• 塗りのないオブジェクト
• 空のテキストパス

それぞれをまとめて消すことができます。

ただし、意図的に「塗りのないパス」などを使用している場合は、
「パスの削除」で消えてしまうので注意してください。

--------------------------------------------------------------------------------

Illustratorを使用して、オリジナルの作品創りをしたい方へ！
KENスクールで学習をしてみませんか？？

⇒【イラストレーター講座】
Illustratorは、単純な図形や文字を組み合わせるだけで、
見栄えの良いグラフィックが制作できる、万人に向けた
デザインツールです。必要となる技術を余すことなく学習できます。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 長幡

【こちらの記事は、約7分程でお読みいただけます。】

Webブログをご覧のみなさま、こんにちは！

ウェブサイトをコーディングするときに欠かせない「CSSレイアウト」。
難しいようで、すこしコツを掴んでしまえばサクサクとコーディング出来るようになるのですが、
ここで立ちはだかるのが「IEの壁」！

「モダンブラウザ」と呼ばれるweb標準に準拠した新しいブラウザと、
古いブラウザではCSSの解釈が違います。

Dreamweaverなどでプレビューをして、キチンとレイアウトをしたつもりでも
古いブラウザで見てみると崩れている事が良くあります。

殆どの古いブラウザは、現在ほぼ使われていないので
あまり気にする必要が無いのですが、
今だにシェアがある古いInternetExplorer（以下IE）では
崩れないように確認を取るのが必須です。

特に、IEだけに存在する仕様やバグが沢山あり、
普通にコーディングしているだけだとかなりの確率でレイアウトが崩れてしまい・・・
コーダー初心者の高い壁になっています。

IEできちんと見れるように直しても、他のブラウザで逆に崩れてしまう。
ハックで直す方法もありますが・・・簡単な、IEだけの直し方があるんです。

今回から、何回かに渡りコーディング時のIEの対処法を書いていきます。

その１「hasLayout」

クロスブラウジングでのIE対策をやった事がある方なら
「hasLayout」という名前を聞いたことがあると思います。

「hasLayout」とは、IE独自の読み取り専用のプロパティで、
それぞれのオブジェクトがレイアウト情報を持っているかどうかを示すものです。

値が「false（レイアウト情報を持っていない）」と
「true（レイアウト情報を持っている）」があり、
デフォルトでは「false」に設定されています。

多くのバグはこの値が「false」すなわち初期設定の時に出現し、
「IEだけ崩れる」原因となります。

逆に言えば、値を「true」にするだけで
大半のバグを修正することが可能です。

「true」にする方法は、その要素のプロパティを
以下の通りの値にすることで変更できます。

例えば、これはバグのfixではないのですが、
通常ブロック要素は高さを指定しなくても内包しているものの高さを感知して
自動的に高さをとってくれるのですが、
内包している物がfloatすると高さが取れなくなってしまう仕様があります。
しかし、IEの6や7は同じ状況でも高さが取れてしまいます。
その原因は、「width」を指定していることにより、
レイアウト情報が「true」に切り替わって高さが取れている状態になるからです。

「width」はhasLayoutとは関係なく最初から設定する場合が多いので、
そのほかだと「height」を使用します。

IE6では、「height」を指定していても内包している高さに併せてくれるので
「height:1%;」の様に記述をしておくと表示が崩れずに値が「true」になります。

が、他のブラウザだと不具合が出るのでハックを使用しなければいけないのと、
どの場所にも適用することが難しいので、
「height」「width」や「float」「position」などよりも
通常は汎用性のある「zoom」を使用する事になります。

例として、

*{
    zoom:1;
}

と、入れていただくとすべてのhasLayoutの値が「true」になり、
殆どのバグから開放されることになります。

ですが、なんと「true」の時にしか起こらないバグもあるのです！

この対処法は次回書きたいと思います。

今回はあえて難しい内容を細かい説明なしで書かせていただきました。

ハックって何？

クロスブラウジングって？

そもそも、IE6や7なんて持ってないよ！どうやって確認するの？

バグって具体的には？？？

・・・答えは、KENSCHOOLの「極」にあります！

今回書いた内容も含め、「極」では現場に必須なテクニックを
初心者に方にもわかりやすくマンツーマンで指導いたします。

--------------------------------------------------------------------------------

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【CSS基礎 + 上級レイアウト講座】
IE6の見栄えを整える際に、CSSのhackというテクニックを覚えるのは
必須になります。
CSS基礎講座では、はじめてでも安心のCSSレイアウトを組める学習を、
そして、CSS上級レイアウト講座では、どんなブラウザにも対応できる、
CSSの記述方法を伝授します。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 馬場

【こちらの記事は、約5分程でお読みいただけます。】

Webブログをご覧のみなさま、こんにちは！

InDesignでミラーレイアウトを作る方法を紹介します。

「マスターページ作成などで片ページ作ったものをシンメトリー配置したい」
という場面はよくあります。

Illustratorで同じような状況になった場合、リフレクトツールを使えば
オブジェクトの反転コピーができます。

しかし、InDesignではリフレクトツールがツール群に存在していない為、
若干複雑な手順になります。

まずコピーしたいオブジェクトを選択します。

「拡大縮小ツール」に切り替え、スプレッドの中心をクリックします。

Alt（option）キーを押しながらコントロールパネルの
「水平方向に反転」ボタンをクリックします。
通常のクリックで反転移動、Alt（option）を押しながらで反転コピーになります。

スプレッドの中心を基準に、反転コピーができました。
現在は文字も反転している状態です。

文字の反転を解除する場合は、コントロールパネルの
「反転のステータス」を右クリックし「変形を消去」を選択します。

ぜひ、お試しください。

--------------------------------------------------------------------------------

電子書籍の普及に伴い、エディトリアルデザインの分野に限らず、
注目を集めるInDesignをKENスクールで学習しませんか？


⇒【InDesign講座】
Adobe InDesignは、レイアウトソフトとして利用する機会が急速に高まり、
多くのデザイナーやクリエイターにとって、欠かせないツールとなっています。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 増川