いよいよ今日からデザインの授業が開始。
やっぱり体系的に学べることは大事だし、ここで学ぶことを基準に広げたり
深堀りしていこうと思う。
さて、学んだことの備忘録として、毎回ブログ記録していくことにする。
---------------------------------------------------------------------------------------------
【第一回】 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>で1つの文章になるが、基本は改行を設定せずにそのままにしておく。
改行を自分のブラウザを基準に設定すると、他のブラウザではデザインが
崩れる事があるので(段落落ち)、改行などの見た目はすべてcssで行う。
こういった、設定しない限り続く要素をブロック要素という。
■その他
デザイン上達への近道:とにかく良いデザインを真似ること。
これで、引出しが増えていく。
名言:良いデザインには理由はあるが、悪いデザインには理由がない。
firefoxのプラグインで「fireバグ」というものがある。
これは、タグの他cssも裸にできる優れツールなので、これと画像のコピペで
同じものを作ってみる。
■必須アイテム
- 辞書
- USB
- 電卓
- 定規
- 自由帳(線のないほうが望ましい)
- 筆記具