【WEBデザイン】《第一回》HTML基礎：HTMLの基本構造WEB標準、マークアップについて

いよいよ今日からデザインの授業が開始。
やっぱり体系的に学べることは大事だし、ここで学ぶことを基準に広げたり
深堀りしていこうと思う。

さて、学んだことの備忘録として、毎回ブログ記録していくことにする。

---------------------------------------------------------------------------------------------
【第一回】　HTML基礎：HTMLの基本構造WEB標準、マークアップについて

■基本的なフォルダ設定について

ここでは、じっさいの業務で使用する基本的なフォルダ設定の方法を学ぶ。

まずはデスクトップに「site」というフォルダを作成し、その中に
「img」「css」のフォルダと「index.html」のファイルを保存。
この形が基本型となる。
※「index」ファイルは必ず「site」の直下に置くことに注意。

■DreamWeaver

[サイト]→[新規サイト]→[サイト名]→[ローカルフォルダ]→
[右のフォルダマーク]→[「site」を指定]→[選択]

左上の[コード]か[分割]を使う。特に[分割]。
ファイルを保存していると、右下の[ローカルファイル]を
ダブルクリックでいつでも出せる。

右側のプレビューに書き込むと、自動的に左のタグにも記載される。

DWの左下のフォーマットで「見出し1」を選択すると
h1タグとして記載できる。
※見出しを画像で表現するときにも、必ずh1タグの中に記載する。
SEO対策的にも。

■タグについて

DOCTYPE宣言は"Transition"を使うのが基本。
strict、Franesetは99%使わない。
また、今時タグ打ちができないと、という世の中でもないので、
積極的にDWを使っていく。

metaタグのついての非推奨属性
（HTML&XHTML&CSS辞典 第5版 秀和システム p5）

※ちなみにDWでファイル名の右に「★」があるのは、
保存できてないという証拠。

<p>〜</p>で１つの文章になるが、基本は改行を設定せずにそのままにしておく。

改行を自分のブラウザを基準に設定すると、他のブラウザではデザインが
崩れる事があるので（段落落ち）、改行などの見た目はすべてcssで行う。
こういった、設定しない限り続く要素をブロック要素という。

■その他

デザイン上達への近道：とにかく良いデザインを真似ること。
これで、引出しが増えていく。
名言：良いデザインには理由はあるが、悪いデザインには理由がない。

firefoxのプラグインで「fireバグ」というものがある。
これは、タグの他cssも裸にできる優れツールなので、これと画像のコピペで
同じものを作ってみる。

■必須アイテム

• 辞書
• USB
• 電卓
• 定規
• 自由帳（線のないほうが望ましい）
• 筆記具