HTML＆CSS③

ブロック要素とインライン要素

ブロック要素は前後で改行が入る。親要素いっぱいにひろがる。 インライン要素は改行がされない。<span>''など。

コンテンツを作る

枠線をつける

borderプロパティを使う。

.a1 {
 border: 5px solid red;
}

「太さ」「種類」「色」の順番で指定する。 border-top ,right,bottom,left 指定を付ければ特定方向に線を引くことができる。

borderのみにすると、全方向に線が引かれる。

余白

ボーダーを引いたとき、上と下に余白を作れる。

paddingはボーダーの内側の余白を作る。 marginはボーダーの外側の余白を作る。

どういうこと？って思ったのでコードペン。

margin　枠外の上下方向に余白ができた

See the Pen margin test by T Eno (@T-Eno) on CodePen.

padding　枠内の上下方向に余白ができた

See the Pen padding test by T Eno (@T-Eno) on CodePen.

ボックスモデルを理解しないといけないらしい。 今は先の勉強を優先して割愛。

HTML＆CSS <2日目>

メイン構造をつくる 1-1

メインの構造は、3つの要素で構成される。

<div class="copy-container"></div>

<div class="contents"></div>

<div class="contact-form"></div>

<h1>
HTMLは、Webサイトの構造と内容を定義するための<span>マークアップ言語</span>です。

</h1>

間違えたところ

<div class="copy-container">
      <h1>HELLO WORLD<span>.</span></h1>
      <h2>プログラミングの世界へようこそ</h2>
</div>

<div class="copy-container"></div>
      <h1>HELLO WORLD<span>.</span></h1>
      <h2>プログラミングの世界へようこそ</h2>

</div>をcopy-containerの前において終了させていた。 当然認識しない。

<div class="contents">

</div>

中身が空の場合でも、</div>終了タグは改行した方がミスが少なくなりそう。

■

　フッターロゴ

Li {
froat: left;
}

これでは<li>全体にfroatプロパティが適用される。 .header logo {

froat: left;

.header list li {

froat: left; 

この場合 header listのliにのみfroatプロパティを適用できる。

ちょっとだけWebページの構造になれてきたかな？ divで要素化されたhooterという大きな枠、そこにロゴ、li の小さな枠がある。

当ブログについて＆10月の目標

このブログは、Webデザインの勉強を行うために作ったアウトプットブログです。

現在はプロゲートを使って基礎固め中。

メモ帳やノートで記録していましたが、都度アウトプットが

効果的に感じたので、書いてみることにしました。

今月の目標は10月中にHTML＆CSSをFlex Boxまで終わらせること！

（ところで「Flex Box」ってなんだ……？？？）