-本日のアジェンダ-
1限目
実技 WEBデザイン実習②
DOMについて
2限目
実技 WEBデザイン実習②
挿入について
3限目
実技 WEBデザイン実習②
課題制作
4限目
実技 WEBデザイン実習②
課題制作
5限目
実技 WEBデザイン実習②
課題制作
本日のテーマ
Dreamweaverでマークアップしましょう
DOMパネル
【point】HTML文書の構造がわかりやすい！
- 複数をタグで囲う事ができる
- タグを複製できる
- id名、class名をつける事ができる
- 要素名を変更できる
挿入パネル
【point】HTMLの記述に便利です！
- クリックでタグを挿入できる
- 開始タグと終了タグをセットで記述できる
- タグで囲う事ができる
DWを使ってマークアップしましょう！
▼HTML構造（設計図）
<aside> …… 余談・補足情報のセクションであることを示す
▼デザインの都合上必要であればdivで囲って、さらにclass名をつけましょう。
①mainとasideを横並びにする為に、親要素が必要です。
→mainとasideをdivで囲います。class名content-wrap
②headerは幅960px、その外側に幅100%の背景グレーのボックスを作ります。
→headerをdivで囲います。class名header-wrap
なぜclass名をつけるのか？
この場合、divが２つ存在することになるので、ヘッダーのdivとコンテンツのdivを区別する為に名前をつけてあげます！
最低限のリセットCSS
/*リセットCSS*/
* {
box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd {
margin: 0;
}
ul,ol {
padding: 0;
list-style: none;
}
img {
max-width: 100%;
vertical-align: bottom;
border: none;
}
/*この上は変更しない*/imgにmax-width: 100%;
imgタグはwidthを指定しないと画像本来の大きさで表示します。<div><img src="photo.jpg" alt=""></div>
例えば、divが親要素でphoto.jpgが幅800pxの場合、
divに幅400pxを指定してもphoto.jpgははみ出して本来の大きさで表示してしまいます。
そこで、cssで全部のimgにmax-width: 100%;を指定し、画像を親要素からはみ出ないようにしておきましょう。
max- min-
max-width: 100%;は、最大の幅が親要素の100%
つまり100%以上にならない＝はみ出さない
中央寄せのCSSについて
text-align:center;
中のインライン要素（文字や写真）を中央に寄せる
margin:0 auto;
そのボックス自体が中央に移動する
※widthと一緒に使いましょう。