m-School (エムスクール)は、駿河台学園グループが運営する
法人向け研修トレーニングセンター、およびレンタル教室・会議室です。

2008年12月22日

もう CSS は当たり前? - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

Q:テーブルレイアウトはダメでしょうか? CSS のメリットは?

ご質問ありがとうございます。
CSSデザイン手法の講座でもよくいただく質問です。

A:ダメなんてことはないと思いますが、オススメはしません。
テーブルを脱却して CSS でレイアウトすることで得られる様々なメリットをご紹介します。

メリット


CSS でデザインを設定すると?


例えば、ページ内の<h1>(見出し1)に対して全て同じデザインを一括で適用する、ということができます。CSSを使わない場合、一つずつ手動で設定することになります。とてもめんどくさいことです。

また、一度作った CSS ルールは基本的に何度も使い回すことができるので、制作工数削減につながります。何ページもあるサイトの全てのページにゼロからデザインを設定していくなんて気が遠くなりそうですよね。

CSS ファイルと HTML ファイルをわけると?


まず、HTML からデザイン的な要素が排除されることで、ソースコードが簡略化します。すなわち、制作工数が減ります。また、更新も断然楽になるはずです。読み込み速度の向上も期待できます。

また、ソースコードが簡略化するとクローラビリティも向上し、検索エンジン最適化の手助けとなります。

さらに、UA(ユーザーエージェント:サイトにアクセスしてくるソフトやハードのこと)によって CSS を切り替えることができたり、
音声ブラウザが情報を読み取る精度もよくなるので、アクセシビリティの向上にもつながります。

考えなくてはいけないこと


いいことだらけに見える CSS ですが、ちょっと悩ましい部分もあります。最大のポイントは、ブラウザーによって CSS の動作、対応度が異なる点です。Internet Explorer と Firefox でレンダリング結果が異なる、なんてことはよくあります。当然の結果なので気にしないのもアリですし、完全に同じにしようとおもえばテクニックが必要です。

…ということで実際のレイアウト手法やブラウザー対応テクニックはCSS講座で!(宣伝です!)

引き続きみなさまからのご質問お待ちしております!メール

また、現在m-SchoolではCSS講座の上級編を企画中です。"こんな講座があれば受けたい!"というご意見などありましたらドシドシお寄せください!

▼関連講座
【 Webサイトは自分でも作れる! 】
Adobe Dreamweaver CS3 入門講座

【 CS3を使ってWebサイト構築の基礎をマスター 】
Adobe Dreamweaver CS3: Fundamentals

【 自由自在なレイアウトを実現 】
レイアウト自由自在!Dreamweaver CS3 CSSデザイン手法
posted by こう at 16:03
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年12月16日

Adobe CS4のイースター・エッグ - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

今回は Adobe CS4の イースター・エッグについてご紹介します。

イースター・エッグとは?という方はコチラ(Wikipedia)をご覧下さい。

まずは Flash CS4 から。
ヘルプメニューから Adobe Flash CS4 Professional についてをクリック。

Adobe Flash CS4 Professional イースター・エッグ

Fl ロゴの下、ADOBE FLASH CS4 PROFESSIONALの、4と いう数字の中央空白部分をクリック。

Adobe Flash CS4 Professional イースター・エッグ

すると開発に携わった方々のスライドショーがはじまります。

Adobe Flash CS4 Professional イースター・エッグ

次は Firewoks CS4 です。
おなじように、ヘルプメニューから Firewoks についてをクリック。

dobe Firewoks CS4 イースター・エッグ

そして、Ctrl キーを押しながら、Fw ロゴをクリックします。

dobe Firewoks CS4 イースター・エッグ

やはりこちらも開発に携わった方々のスライドショーがはじまります。

dobe Firewoks CS4 イースター・エッグ

このあたりは旧バージョンのイースターエッグをご存じの方であれば見つけやすいですね。

その他、Photoshop CS4 では Ctrl キーを押しながらヘルプメニューの Photoshop についてをクリックすると…

など、様々なイースター・エッグがあります。

引き続きみなさまからのご質問お待ちしております!メール

▼Flash関連講座
【 まずはFlashにさわってみよう 】
Adobe Flash CS3 入門講座

【 基礎から Flash コンテンツを作成する最善の方法を習得 】
Adobe Flash CS3: Fundamentals

Flash関連講座一覧を見る
posted by こう at 13:28
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年12月09日

Dreamweaver で AIR 1.5 - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

Q:Dreamweaver を AIR 1.5 に対応させるには?

ご質問ありがとうございます。
先日アップデートされた AIR ですが、あわせて開発環境もアップデートされています。

A:Dreamweaver で AIR アプリケーションを開発するためには、Adobe AIR Extension for Dreamweaver が必要です。

先日、AIR がアップデートされたことにより、Adobe の米国サイトでは、Extension の新バージョンも公開されています。(日本語版の Dreamweaver でも使えます。)

Adobe AIR extension for Dreamweaver - Adobe

既存の AIR (1.0や1.1)のアプリケーションを1.5対応にするためには、アプリケーション記述子(application.xmlとか)を編集し、
<application xmlns="http://ns.adobe.com/air/application/1.1">
このapplicationタグを、
<application xmlns="http://ns.adobe.com/air/application/1.5">
とかきかえてやれば基本的には OK です。

AIR 1.5 のリリースノートはこちら(PDF129KB)

m-School では AIR の認定トレーニング公開へ向けて準備中です!ご期待下さい。

引き続きみなさまからのご質問お待ちしております!メール

▼関連講座
【 Webサイトは自分でも作れる! 】
Adobe Dreamweaver CS3 入門講座

【 CS3を使ってWebサイト構築の基礎をマスター 】
Adobe Dreamweaver CS3: Fundamentals

【 自由自在なレイアウトを実現 】
レイアウト自由自在!Dreamweaver CS3 CSSデザイン手法
posted by こう at 11:33
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年11月17日

swfが開けない、見られない。 - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

Q:swfが開けない、見られない。

ご質問ありがとうございます。
swf(Small Web Format)はFlashの表示用のファイルですね。
環境によっては直接開けない…ということがあります。

A:原則としてswfを直接Flash Playerで開くことはできません。「いつも開けているけど」という方はFlashがインストールされていませんか?

swfを直接開くことができるのは、Flashと同時にインストールされている、standalone版のFlash Player(フラッシュプレーヤー)があるためです。

ですので、Flashをインストールしていない人、つまり、ブラウザー用のプラグイン版Flash Playerしか持っていない人はswfを直接開くことはできないわけです。ですが、プラグインさえ入っていればブラウザーからswfを開くことができます。

引き続きみなさまからのご質問お待ちしております!メール

▼Flash関連講座
【 まずはFlashにさわってみよう 】
Adobe Flash CS3 入門講座

【 基礎から Flash コンテンツを作成する最善の方法を習得 】
Adobe Flash CS3: Fundamentals

Flash関連講座一覧を見る
posted by こう at 18:00
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年11月05日

Silverlight 1.0 と 2 どうちがう? - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

Q:Silverlight(シルバーライト) 1.0 と 2 どうちがう?

ご質問ありがとうございます。
最近正式リリースされた Silverlight 2 ですが、以前とどうちがうのでしょうか。

A:大きな違いとして、アプリケーション(コンテンツ)の開発方法が違います。

1.0 のは XAML と JavaScript で開発されますが、2 は JavaScript の部分が C# や VisualBasic といった、.NET のプログラム言語に置き換わります。これにより、いままで Windows アプリケーションの開発者だった人たちも、RIA の世界にカンタンに挑戦できるようになりました。

また、新機能という点では、Deep Zoom 機能が正式対応しました。
これは非常に高速に画像の拡大縮小ができる技術で…という説明よりこのサイトをご覧ください。

Hard Rock Memorabilia
Silverlight 2 最新版が必要です。

その他には Silverlight DRM という著作権管理技術が使用できるようになり、Mac ユーザーでも著作権管理された Windows Media のファイルを閲覧することができるようになりました。

あ…あと 1.0 からバージョンアップして 2.0 ではなく、Silverlight 2 が正式なようですね。

引き続きみなさまからのご質問お待ちしております!メール

Microsoft Silverlight: Light Up the Web

▼関連講座
Microsoft Expression Blend2.5 Fundamentals

posted by こう at 12:59
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年10月29日

Illustrator と InDesign どうちがう? - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

Q:Illustrator(イラストレーター) と InDesign(インデザイン) どうちがう?

ご質問ありがとうございます。
どちらも定番の DTP ツールですが、どうちがうのでしょうか。

A:実は非常によくにています。どちらも同じアドビの製品ですが、Illustrator のほうが歴史が長い先輩のDTPツールです。

Illustrator は長年業界標準のドロー系ツールとして、DTP でも大きなシェアを誇ってきましたが、複数ページからなる印刷物を作成するには機能不足でした。(アドビには PageMaker という DTP ツールもありましたが)

そこで、Illustratorのように使えてなおかつページレイアウトや組版などの強力な機能を搭載したのがInDesignです。

しかもすでに大きなシェアを持っている Illustrator や Photoshop との連携もできるとあり、Illustrator でグラフィックを作成し、InDesign でページレイアウトに組み込んでいくというフローが確立されました。

現在ではライバルである Quark(クォーク) とならんで DTP の定番ツールとなっています。

引き続きみなさまからのご質問お待ちしております!メール

▼関連記事
InDesign CS3(インデザイン CS3)トレーニングがキターーーー!

The InDesign(インデザイン) Conference 2008 in Tokyo

▼関連講座
【 Illustratorによるデザインの基礎を習得 】
Adobe Illustrator CS3: Fundamentals

【 DTPの制作現場で役立つ!InDesignによるページレイアウト基礎】
Adobe InDesign CS3: Fundamentals

【 画像加工の基礎を習得 】
Adobe Photoshop CS3: Fundamentals
posted by こう at 10:33
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年10月22日

受講後のアフターサービスはありますか? - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

Q:受講後のアフターサービスはありますか?

ご質問ありがとうございます。
お電話でのお問い合せでも多いご質問です。

A:はい、あります!講座受講後、復習中などに出てくる疑問点や、忘れてしまった点を解決していただくために、専用のメール質問サービスを設けています。

この一問一答コーナーの豪華版のようなイメージですね。
担当講師や、m-Schoolスタッフが皆様にご納得いただけるまで、しっかりサポートさせていただきます。ひらめき
 
受講者の皆様には是非ご利用いただきたいサービスです。

引き続きみなさまからのご質問お待ちしております!メール
posted by こう at 10:58
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年10月14日

アクセシビリティツールバーってなに? - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

Q:アクセシビリティツールバーってなに?

ご質問ありがとうございます。前回に続き今回もWebサイト関連のご質問ですね。

A:Webサイトを作る上でアクセシビリティを考慮することは非常に重要です。インターネット上で公開されているWebサイトは、どんな人がどんな環境でアクセスしてくるかわかりませんから、より多くの人がアクセスしやすいサイトが求められます。

Web Accessibility Toolbarそこで活躍するのが、Internet Explorer 専用の無料のツールバーWeb Accessibility Toolbar(ウェブアクセシビリティーツールバー)です。このツールバーは、CSS の有効/無効をIE上で切り替えたり、障害がある方にそのサイトがどのように見えるかをシミュレートしたりすることができます。また、そのようなアクセシビリティの検証機能だけではなく、そのサイトで使用されている画像の一覧を表示したり、Tableタグの構造を表示したりなどなど、Webデザインに役立つ機能がぎっしりつまっています。

一つ残念なのは、今のところIE6までにしか対応していない点です。現在Vista用、つまりIE7用は準備中とのことですので、期待したいところです。

また、IE用ではなくてFirefoxのアドオンでも似たようなものがあります。CSSデザイン手法の講座ではそれぞれの詳しい使用方法やその他便利なツールを様々ご紹介していますので、ご興味がございましたらぜひご検討ください!

引き続きみなさまからのご質問お待ちしております!メール

▼関連講座
Webサイト構築の基礎
Adobe Dreamweaver CS3: Fundamentals

CSSで自由なデザインを
レイアウト自由自在!Dreamweaver CS3 CSSデザイン手法

Fundamentals & CSSデザイン手法のお得なパック
Dreamweaver CS3 + CSS スタートパック
posted by こう at 17:14
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年10月08日

DreamweaverでCSSを書くメリットってなに? - 一問一答

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-Schoolスタッフや講師陣がずばっと回答いたします!ひらめき

Q:Dreamweaver(ドリームウィーバー)でCSS(Cascading Style Sheets:カスケーディングスタイルシート)を書くメリットってなに?

レイアウト自由自在!Dreamweaver CS3 CSSデザイン手法
をご検討いただいている方からのご質問です。

A:ご存じの方も多いと思いますが、(X)HTML+CSSでWebサイトを制作するためにDreamweaverなどのWebサイト構築ツールが必須かというと、そうではありません。

極端な話では、WindowsやMacintoshに標準で付属している、テキストエディタさえあればWebサイトは作れます。でも多くの方がDreamweaverを使っているのは当然ワケがあります。いくつかご紹介いたします。

DreamweaverのCSS定義ダイアログその1:正直CSSを知らなくてもいい。
CSSの細かなプロパティや値をすべて把握するのは大変です。しかしDreamweaverを使えば、すべてダイアログから設定できるので、始めたばかりの方でも安心です。
そのため、ちょっと乱暴な表現ではありますが、DreamweaverがあればCSSをあまり知らなくても自由にスタイルを設定できます。
Dreamweaverが自動生成したコードを確認して、CSSのプロパティや値を徐々に覚えていくこともできます。

その2:CSSを知っていればさらにいい。
もちろんプロパティや値を詳しく知っているに超したことはありません。Dreamweaverを使用すると、CSSを直接手打ちで記述していくときもコードヒント機能などにより非常にスムーズなルール定義が可能です。

などなど他にも最高峰のWebサイト構築ツールならではのメリットが多数あります。講座ではさらに詳しくご紹介していますので、ぜひご検討ください。

引き続きみなさまからのご質問お待ちしております!メール

▼関連講座
Webサイト構築の基礎
Adobe Dreamweaver CS3: Fundamentals

CSSで自由なデザインを
レイアウト自由自在!Dreamweaver CS3 CSSデザイン手法

Fundamentals & CSSデザイン手法のお得なパック
Dreamweaver CS3 + CSS スタートパック
posted by こう at 11:52
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)
2008年10月01日

Adobe Max Japan - 一問一答 番外編

ニュースレター「新電子手紙版ヱムスクール」連動企画、一問一答のコーナーです。

このコーナーでは、読者の皆様からお寄せいただいた、様々なご質問の中から一つだけピックアップし、m-School スタッフや講師陣がずばっと回答いたします!ひらめき

…が、今回は番外編ということで Adobe Max Japan 2009 (アドビ マックス ジャパン 2009)のWebサイトについて特集してみます。

フルFlashの素晴らしいサイトです。

Adobe MAX Japan 2009のWebサイト
黒で統一されたダークな感じのトップページ。

Adobe MAX Japan 2009のWebサイト その2
実は外側の部分がクリックできます。
クリックすると…?(長いので続きはこちら)
posted by こう at 11:02
連載:ずばっと回答!一問一答 | コメント(0) | トラックバック(0)