- ▼アンドゥ
- 一つ前の状態に戻ること。
- 現在多くのソフトで当たり前に使われている機能。一般的には前の状態に戻ることを言う。
- Photoshop・・・[Ctrl+z][Ctrl+Alt+z]
- Illustrator・・・[Ctrl+z]
- Dreamweaver・・・[Ctrl+z]
- 稀にアンドゥが[Ctrl+u]のソフトもあったりする。
- ▼リドゥ
- 一つ先へ進むこと。
- アンドゥとは逆の作業。アンドゥして戻ったが、やっぱりさっきのでいいや。な〜んて時に使ったりします。
- Photoshop・・・[Ctrl+Shift+z]
- Illustrator・・・[Ctrl+Shift+z]
- Dreamweaver・・・[Ctrl+Shift+z]
- アンドゥが[Ctrl+u]であった場合、リドゥは[Ctrl+y]が一般的かも。
- ▼ショートハンド
- ここではCSSの短縮形を指す。
- 例えばCSSでボーダーを指定したいとき。
通常だと下記のようにCSSを記述する。
{
border-width: 1px;
border-style: solid;
border-color: #fff;
}
これを短縮形のCSSで記述すると下記のようになる。
{
border: solid 1px #fff;
}
- 上と下では記述方法は異なりますが、同じ値を出力してくれます。ただし注意してほしいのが、短縮形を使用して記述したとき、Legacyブラウザでは解釈できない可能性もあります。
- 以前私もボーダーの指定を短縮形で記述していたのですが、とあるブラウザで表示されなかったことから、面倒ですがノーマルに書いています。
- それとこれはボーダーに限りません。もう一つ例を挙げましょう。
すべてのmarginの値が10pxだった場合
{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
これを短縮形にするとこうなります。
{
margin: 10px;
}
又は、
{
margin: 10px 10px 10px 10px;
}
これをわかりやすく説明すると、
{
margin: 上 右 下 左
}
となります。
さらに、こういう書き方も出来ます。
上下のmarginが同じ値、左右のmarginが同じ値。そして上下と左右の値が違う場合に使用します。
{
margin: 10px 5px;
}
ご理解頂けたでしょうか？例にならってわかりやすく説明するとこうなります。
{
margin: 上下 左右;
}
・・・です。短縮形についてはこれくらいにしておきましょう。すべて説明するにはスペースが足りませんからね。
- ▼インデント
- プログラムを組んだことのある人にはお馴染みでしょう。
- ではわかりやすく説明するために、下記にインデントなしのソースとインデントありのソースを載せます。おそらく説明は要らないでしょう。見ただけでわかるはずです。
インデントなし
<table> <tr> <td>入門！Dreamweaver使い方講座</td> </tr> <tr> <td>このサイトではDreamweaverを・・・モゴモゴ。</td> </tr> </table>
インデントあり
<table> <tr> <td>入門！Dreamweaver使い方講座</td> </tr> <tr> <td>このサイトではDreamweaverを・・・モゴモゴ。</td> </tr> </table>
- ハイ、ご覧の通りです。これは人の好みによりますが、一般的にはインデントありのソースのほうが全体の構造を把握しやすく、部位の変更も容易であると思われます。
- 少しヒネった言い方をすると、親子関係ですかね。どこかを変更しようとしたとき、ソースの量が膨大になってくるとインデントなしでは探す気が失せます。
- 本当に不思議なくらいアリ組とナシ組に分かれます。そんなところがちょっと面白かったりも。どこかにインデントありなし占いとかありませんかねぇ。
- DTD（DOCTYPE宣言）
- 当サイト、入門！Dreamweaver使い方講座の文法ページ参照。
- 入門！Dreamweaver使い方講座 >> 文法 > DTD
- W3C
- 略称です。正式名称は「The World Wide Web Consortium」
- WEB標準を推奨している非営利団体です。
- WEBの中心地・・・と言うべきかも。
- W3C - The World Wide Web Consortium（英語）
- spacer - スペーサー
- 入門！Dreamweaver使い方講座の各ページで度々出てきたスペーサー君。
- この子はWEB標準から生まれたのではなく、製作者たちがこぞってテーブルレイアウトに走った挙句に生まれた産物。
- 例えば、ブラウザでどこかのサイトを見たとき、一つの画像があったとする。そのとき、実際はそれは一枚の画像ではなく数枚の画像をテーブルのセルに当てはめ、一つの画像に見えるようにしている。
- このときテーブルオンリーで画像を当てはめ、セルの幅、高さを指定してもブラウザによって、若しくは環境によってセルが若干ずれてしまい、繋がっているように見えるはずの画像と画像の間に隙間ができてしまう。これを防ぐために1×1の透明なgif画像をつっかえ棒として挿入する。これによって幅、高さはほとんどの場合固定される。
- このとき使用される小さな透過gifをスペーサーと言う。
- ※PhotoshopなどでスライスしてHTMLとして出力することが出来る。このとき、デフォルトの設定では自動でスペーサーが挿入され、固定されている。
- margin、padding
- 本やWEBサイトでもよく説明されているmarginとpadding。このとき図解で説明されているのだが、私にはどうしても逆にわかりづらくてたまらない。結局わからないまま作業していたのだが、気づけば何となくわかるようになっていた。
- ここでは正しい答えかどうかわからないが、皆さんがわかりやすいように説明します。
- 頭の中に黒板を描いてください。そしてその黒板にチョークで横長の長方形を描いて下さい。次にその長方形の中に何でもいいので文字を描いてください。で、ストップ！
- ここから説明に入ります。まず黒板という大きな枠がありますね。その中に長方形を描きました。黒板と長方形の隙間がありますか？箱の外の余白、それがmarginです。
- じゃあpaddingって何でしょう？もう察しがつく人も多いのではないでしょうか？長方形の中に何らかの文字を書きましたね。大部分の方々が余裕をもって中に文字を書いているとして、長方形と文字との間に空白があるものとします。セル内の余白、それがpaddingです。
- どうでしょう？逆にわかりづらかったでしょうか？わからなかった人は他のサイトも見てみることをお勧めいたします。
- セレクタ
- セレクタといえば難しそうに聞こえますが、CSSの指定の方法だと思ってください。
- おそらく、Dreamweaverの機能に頼って作っているうちは「class」しか使いません。
- 確かにこれだけでも十分なんですけどね。ただこれだけだとソースが汚くなる上に無駄に重くなってしまいます。本当は効率よく管理できるように前もって用意されている方法でCSSを指定すればいいのですが・・・。な〜んてこといっても初心者にはやっぱりハードル高いですからね。最初は「class」で十分でしょう。
例えば下記のようなソースがあったとき。
〜 <body> <p>Dreamweaver-css</p> </body> 〜
上の「Dreamweaver-css」と言う文字の色を変えたい！となったとしましょう。
HTMLソース内の<p></p>にこんな風に書き加えます。
<p class="accent">Dreamweaver-css</p>
HTMLソースの準備が整ったので、今度はCSSです。CSSファイルを作成し、下記のように記述します。
.accent {
font-color: #900;
}
これだけですね。後はこのCSSファイルをHTMLに読み込ませるだけです。
「class」は特に制約はないので、ページ内にいくつでも同じ物を使えます。
試しに難しいほうも少しだけ紹介してみましょうか。
初めのソースのままの状態で、後に「class」を設定したときと同じ効果を別なやり方で得て見ましょう。
これについては触れるだけなので解説は無しです。
その目的のHTMLファイルに読み込ませるCSSファイルにこう記述します。
例1
p {
font-color: #900;
}
例2
body p {
font-color: #900;
}
例3
body > p {
font-color: #900;
}
こんな感じです。これらはすべて「正しいブラウザ」で表示すると同じ結果をもたらします。つまり古いブラウザか、若しくはIEでない限り全て同じ表示です。なぜ何通りもやり方があるのか。これらは得られる効果は同じでもそれぞれ性質が違います。初心者を脱出したければ、その性質の違いを理解し、セレクタの効率良い使用をできるように努力しましょう。興味のある人は「セレクタ CSS」などでググってみてください。
- UA（UserAgent）
- ここで言うUAとは、主にブラウザのことです。WEBサイト作成補助などのページを見ていると、たまにUAと言う言葉が出てきます。それがこれです。ブラウザに関しての説明は流石にいらないと思うのでしません。悪しからず。
- 入門！Dreamweaver使い方講座 >> WEB知識 > ブラウザ
- 色
- ここではHTML、XHTMLにおける色の指定の仕方を説明します。
- ソフトや多くの書籍で利用されている使用方法はハッシュ（#）の後に16進数で指定する方法です。例えば、セルの背景の色を黒に指定したいときはこうします。
.bgcolor {
background-color: #000000;
}- これをセルに適用するだけで背景は黒になりますね。「#000000」となっているところは、「#000」とも省略して記述することが出来ます。これは「00」が３つ連続して並んでいますよね。分解すると「# 00 00 00」。この場合は省略してもよいとされています。
- わからない方の為にもう一例挙げます。私が製作するときに良く使う好きな色「#990000」。さて、これは省略するとどうなるでしょうか？答えは「#900」。わかりましたか？わからなければお気軽に掲示板にてどうぞ。
- また、こう書くことも出来ます。
.bgcolor {
background-color: rgb(000,000,000)
}
- となります。もう一つあまりオススメできないものですが、こちらも紹介しておきましょう。
- 色の名前で指定する方法です。限られた数ですが、「red」「white」などでも指定することが出来ます。
- 素人の方々は気にしてないようですが、何気なく参考になるWEBサイトを回り、これだ！と思った色の名前がIE独自の色名だったりもします。これは絶対に避けてください。むしろややこしい色名での指定はするべきではありません。
- ブラウザ
- 環境設定のページにて簡単に説明してありますが、改めてご説明を。
- 代表的なブラウザをいくつか挙げてみましょう。
- Microsoft Internet Explorer
- Netscape
- Opera
- Mozilla Firefox
- Mozilla
- Microsoft Internet Explorer・・・え〜ハイ。世界で最も普及しているブラウザです。CSSの対応が不十分です。勉強には適しません。次のバージョンに期待してよろしいのでしょうか？
- とりあえずユーザーやクリエイターなど、各方面から馬鹿にされないようなMSIE7.0をお願いします。
- Netscape・・・一時期MSIEとシェアを争っていました。現在では下火です。何より起動が重い。ちょっと使いづらいかもしれません。
- Opera・・・ブラウザの第三の主力？です。独自エンジンを搭載し、快適なブラウジングが楽しめる。最初から様々な機能が用意されており、非常に使い勝手の良いブラウザ。
- Mozilla Firefox・・・一部の方々はこの名前が気に食わないようです。よくわかりませんが、かっこ悪いと描いているのをたまに見かけます。私は結構いいと思うんですけどね。
- このブラウザは現在人気急上昇中です。米国ではもうすぐ全体の10%に達します。非常に軽快です。さすがGeckoエンジンですね。それに何と言ってもバージョンアップの早さ。どこかの会社とは比べ物になりません。MSIEを使用するよりセキュリティに関しては断然安心です。
- でもって、機能的にも非常にシンプルです。通常使わないであろう機能は省かれ、必要な機能はプラグインという形で各々のユーザーが追加する形となっている自由度の高いブラウザです。
- Mozilla・・・根強い人気を誇っており、未だ多くのファンを抱えています。私もその一人。もちろんGeckoエンジン搭載なので動作は非常に快適です。ちなみにこのブラウザの名前の由来は「ゴジラ」です。
- こんな感じですかね。私もそうなのですが、おそらく人と違うものを使いたいという人も少なからずいるでしょう。そんな方はOperaやMozillaがオススメですね。
- さて、オマケです。これから先このことも知っておいたほうがいいかも知れません。
- 皆さんが通常使っているのを一般的にはブラウザと言っていますね。それに対して徹底的に無駄なものを省き、情報のみを手に入れたい・・・又は画像が邪魔くさい。パーセンテージは限りなく低いのですが、テキストブラウザを好む人たちもいます。
- このブラウザは名前の通り、テキストのみを表示します。下記に代表的なテキストブラウザを挙げます。
- w3m
- Lynx
- 上記の名前で検索すると出てきますよ。私としては普段とは違った見方を出来るので楽しいと思います。ぜひインストールしてみてください。
- あとは・・・音声リーダーですね。近年アクセシビリティが注目されるようになって来ました。障害のある方でもWEBで情報を得られるようにと。
- 聴覚に障害を持った方たちが使う音声リーダーというものがあります。実際のところこれを意識すると製作する側の人は相当大変です。割に合わない仕事になるか、料金が大幅に高くなります。
- アクセシビリティを考えたとき、まずコンテンツのショボさを見た目でごまかすことはできません。何故なら何の関連も無い画像はただの障害物に過ぎません。なので文脈に関係ない画像を使えません。そしてソースを記述する順番を考えなくてはなりません。通常リーダーは上から順にソースを解釈していきます。
- このとき、サイトの説明をすっとばしていきなりコンテンツの名前を読み上げたらどうです？何のサイトかもわかりません。
- これから先高齢者の利用者が増えるはずです。もしかしたらこの音声リーダーブラウザも普及するかもしれません・・・。
- さて、ここで補足を入れておきましょう。先ほど音声リーダーは上から順にソースを読み上げると書きましたね。これは何も音声リーダーに限ったことではありません。
- もちろんブラウザもですが、ブラウザを通して目で見ている私たちには大して関係ありません。そして検索エンジンのロボットも例外ではなくソースを上から読んでいます。
- 非難を浴びそうな気もしますが、もし私がアクセシビリティを取り入れたサイトを作るとしたとき、それはおそらく障害者のためではなく、ロボットのためでしょう。
- まぁロボットに優しく作るということは、結果的に障害者にも優しいサイトになるということなので問題はありませんし。
- では、これらのまとめとして、アクセシビリティまでは行きませんが、それに近い内容を別ページで解説します。
- 尚、先に挙げたブラウザなどをインストールしたい方はリンクページにリンクを張っておきますからそこからどうぞ。
