More than 3 years have passed since last update.

ProgateでHTML,CSSを学んでみた（4日目）

Posted at 2021-01-25

概要

Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。
ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。
ここにあるコードはほぼ全てProgateで出てきたものです。

フッターの左側にロゴ、右側にリストがある。
ProgateでHTML,CSSを学んでみた（3日目）で<li>にCSSで要素を追加した。
なので、このままではフッターにも上記と同じCSSが適用されてしまう。
これを回避するには以下のように書く。

hoge.css

    .header-list li{
        float: left;
        padding: 33px 20px;
    }

一部にCSSを適用させるには以下のようにspan要素で囲む

hoge.html

    <h1>
        ようこそ<span>Progate</span>へ
    <\h1>

hoge.css

    span{
        color:#ff0000;
    }

HTMLには改行される要素と改行されない要素がある。
改行が入って、幅いっぱいに広がる要素をブロック要素という。
改行されない要素をインライン要素という。

枠線をつけるには以下のようにborder要素を追加する。
border: [太さ]　[種類]　[色];

hoge.css

    .hoge1{
        border:5px solid red;
    }

下にのみ線をつけたい場合はborder-bottmoのように書く。
つけたい方向によってboder-top、border-right、border-leftが使える。

hoge.css

    .hoge2{
        border-bottom: 1px solid #333;
    }

paddingはborderの内側に空白を作る。
marginはborderの外側に空白を作る。
marginもboderの書き方と同様。