WEBの勉強~HTML5/CSS3/Dremweaver~
こんにちは! メグルです!!
金曜日の復習。
dreamweaverを使うと、打ち間違えや、打ち忘れを少なくすることができる。
また、cssデザイナーを使うと、コーディングをしなくてもスタイルが出来てしまう。
サイトの定義
htmlの入力
画像の挿入
リンクのつけ方
文字のcss
ブロックレベル要素とインライン要素の違いは、
ブロックレベル要素は端から端までが<h1>なので次の言葉は改行される。
それをstyleで変えられる。
インライン要素は変えられる。
参考サイトはこちら
あくまでブロックレベル要素は端から端まで。
ボックスモデルの参考サイトはこちら
ボックスモデル|CSSの基本|CSS HappyLife ZERO
表示→スタイルレンダリング→スタイルを表示のチェックを外すとcssが効かなくなる。
cssデザイナーの挿入
wrapperは必ず
widght
margin-left:auto;
margin-right:auto;
を記入する。
と書く。
挿入→構造→ヘッダー
とすると、
このようにコーディングされる。
上の挿入→イメージ→イメージでロゴを入れる。
(文字は消した)
次はメニューを作成
イメージ→イメージで画像を挿入
これをすべてドラックして、プロパティのリストを押すと全て、箇条書きになる。
要するに
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
が自動生成されるということですね。
altタグを画像を選択して、代替に記入。
次にサブメニューの作成
挿入→divでsubmenuで生成
次にセクションを作成する。
そして、うえの挿入→構造→セクションでtodayspastaを入れる。
ここに<h2>を入れる。
次にdivでpastatextを生成。
ここまで。
次に、記事→enter、そして<h2>で、中に画像を挿入する。
その下に書き込み、2行の文字をリストにする。
次に、couponを生成
次に下に、divで挿入→
そして、クーポンからクッキングまでを、
<aside>で囲う。
最後にfooterの作成
挿入→文字→著作権
そして画像にaltを入れる。
次にスタイル
まずはリセット
セレクターに,
body,h1,h2,h3,h4,ul,liを追加して、paddingとmargin を0(ゼロ)に設定する。
次にセレクターにbodyを追加
背景を付けていく。
次にwrapperを追加
margin
background
を指定する。