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

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

皆さん、こんにちは！
いつもWebブログを見ていただきありがとうございます！

Draemweaverなどのホームページ作成ソフト（HTMLオーサリングソフト）を
使用すると、HTMLやCSSの記述速度や正確性が上がり、大変便利ですよね。

HTMLのソースも、初めて制作をする場合は、
比較的きれいに成形（インデント）をかけてくれます。

ただし、ホームページ作成ソフトの欠点として、
更新を繰り返すとソースがだんだんと汚くなってしまいます。
簡単に表現すれば、「消して入れて」を繰り返すとインデントが崩れたり、
消すはずのタグが残ってしまったり・・・ということが起こるのです。

以前にも、Web制作において一般ユーザーの目には見えにくい
ソースの部分が、実は非常に重要であることを書きました。

ゴミタグ（残骸）に関しては自分で削除しなければなりませんが、
ソースのインデントに関しては、Dreamweaverの機能で修正することができます。

たとえば、下記のようにインデントが
ぐちゃぐちゃになってしまったソースがあるとします。

<div>
  <h1>ソースフォーマットの適用</h1>
    <ul>
  <li>共同作業向き（誰でもわかりやすくなる）</li>
<li>余分なタグ・余分なスペースが見つけやすくなる</li>
    <li>SEO（ソースクリーニングの基本）</li>
</ul>
  </div>

Dreamweaverの「環境設定」⇒「カテゴリ」の中に、
「コードフォーマット」という項目があります。

Dreamweaverが自動的にソースにインデントをかけるかどうか？
かけるとしたら、それが（半角）スペースなのか？タブなのか？
また、１インデントでスペース何個分挿入とするのか？

の設定ができます。

あくまで環境設定なので、このチェックをはずしてしまうと、
次回に新規作成したファイルからは、まったくインデントがかからなくなります。
なので、作成済みのファイルを変更するわけではありません。
（環境設定＝初期設定のため）

では、作成済みのファイルをどのように修復すればよいのでしょう？

1.　環境設定でインデントがかからない設定にします（チェックをはずす）

2.　コマンドメニュー→ソースフォーマットの適用

この時点で、すでにかかっているインデントは「全部なし」になります。
（下記のように左に揃います）

<div>
<h1>ソースフォーマットの適用</h1>
<ul>
<li>共同作業向き（誰でもわかりやすくなる）</li>
<li>余分なタグ・余分なスペースが見つけやすくなる</li>
<li>SEO（ソースクリーニングの基本）</li>
</ul>
</div>

3.　環境設定でインデントがかかる設定に戻す（チェックを入れる）

4.　コマンドメニュー→ソースフォーマットの適用

そうすると、改めてゼロの状態からDWの機能でインデントをかけられるので、
一瞬で整形が終わります。（下記のソースのようになります）

<div>
  <h1>ソースフォーマットの適用</h1>
    <ul>
      <li>共同作業向き（誰でもわかりやすくなる）</li>
      <li>余分なタグ・余分なスペースが見つけやすくなる</li>
      <li>SEO（ソースクリーニングの基本）</li>
    </ul>
</div>

基本的に、制作者がサイト立ち上げを行う際も、
更新をする際も常に意識をしていれば不要な機能ですが、
前任者が必ずしも意識している（できる）方とは限らないため、
仕事で新しいサイトの担当になった際に利用するとよいでしょう！＾＾

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

Web制作現場での必須ソフト「Dreamweaver」を学習しませんか？

⇒【Dreamweaver講座】
KENスクールでは、マンツーマン形式で授業を行っていますので、
パソコン初心者の方にも安心して受講していただくことができる環境です。
Webサイト作ってみたい方は、是非KENスクールまでお越しください！

本日の更新者：
パソコンスクール KENスクールWebコース
インストラクター 磯貝

Macでファイルをアップロードしようと思い、「FTP Mac」という検索キーワードで

FTPソフトを探したのですが、中々良いのがありませんでした。

似たような経験のある方は

FireFoxのアドオンにあるFireFTPというものを見つけたかもしれません。

http://journal.mycom.co.jp/articles/2008/08/07/fireftp/index.html

この「FireFTP」は結構使えるのですが、日本語がFTP側に入っていると、

残念ながら文字化けしてしまいます。

そこで色々と探して辿り着いたのが、日本語フォルダも表示可能なソフトです。

• テキストエディター（HTML等、PHP等）
• CSSエディタ+FTP
• ブラウザー
• ターミナル
• マニュアルブック

を一つのソフトにした、「CODA」です。

http://www.panic.com/jp/coda/

このソフトはFTP専用ではなく、

むしろDreamweaverに取って代わる強力なコーディングソフトです。
 

非常に使いやすいソフトで、Macら しいインターフェイスです。

特に手書きでコーディングしている人には最適だと思います。

コードも色分けをしっかりしてくれるので、非常に見やすいです。
 

HTML以外に、よく使われる言語にも対応しています。

何よりソフトが軽くて、機敏です。
 

まずは無料で試してみてはいかがでしょうか。

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

パソコンスクール KENスクール新宿校　Webインストラクター
http://www.kenschool.jp/school/shinjuku/index.html

KENスクールでwebデザインを学びたい方は、Web/DTP講座へ！
http://www.kenschool.jp/Webdtp/index.html
 

ブログのネタも増えてきたなーとしみじみ見ていたら、
・・・DreamWeaverのカテゴリーにまだ記事がない！
（この記事を書いている時には、ありませんでした…。）
WEBで最もあたりまえに使用するソフトなのに！

というわけで私がいちばんにDreamWeaverについて記事書いちゃいます。

でも、なに書こう？

とカテゴリ一覧を眺めながら思いました。

　Illustrator：絵描き
　Photoshop：写真屋さん
　Flash：ひらめき、閃光

　DreamWeaver：？？？

英語の知識に乏しいものでWeaverの意味が分かりません。
なので調べてみたところ、

　Weaver：織り手、編む人

つまりは

　DreamWeaver：夢を編む人？

どうやらWEB（蜘蛛の巣）にかけて糸を紡ぐ意味からついたようです。
「夢を紡ぐ人」・・・かっこよすぎでは。

みなさんも、すてきな「夢を紡ぐ人」になってくださいね。

CSS3ネタ第2弾です。

今回は、影について見てみましょう。

今まで、画像を用いて、影をつけてきた部分が、CSSで再現可能となり、
格段にページデザインの幅が広がってくる気がします。

まず、文字に影をつける場合は、「text-shadow」プロパティを使用します。
対応ブラウザは、今までは、Safariが対応しているだけだったが、firefox3、Opera9.5が対応しています。
「text-shadow」プロパティは、CSS2.1で一度なくなっていたが、CSS3の草案ではで再度復活しています。

次に「box-shadow」プロパティを使用します。

「box-shadow」プロパティは、その名のとうり、ボックスに対する影の設定です。

CSS 3の草案で提案されており、現在再現できるのは、
Safari3で、「-webkit-box-shadow」というプロパティ名で利用することができます。