Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

ProgateでHTML,CSSを学んでみた(4日目)

$
0
0

概要

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の書き方と同様。


Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>