概要
Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。
ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。
ここにあるコードはほぼ全てProgateで出てきたものです。
フッターの構造
フッターの左側にロゴ、右側にリストがある。
ProgateでHTML,CSSを学んでみた（3日目）で<li>にCSSで要素を追加した。
なので、このままではフッターにも上記と同じCSSが適用されてしまう。
これを回避するには以下のように書く。
hoge.css
.header-listli{float:left;padding:33px20px;}mainの構造
文中の一部にCSSを適用させる
一部に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:1pxsolid#333;}paddingとmargin
paddingはborderの内側に空白を作る。
marginはborderの外側に空白を作る。
marginもboderの書き方と同様。