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

Yハロトレ9日目 ~style.css/header/MBP~

$
0
0

CSS

Shiftで範囲選択

shiftsentaku2.png

CSSを書くとき必要なもの

index.html
<!doctype html><htmllang="ja"><head><linkhref="css/style.css"rel="stylesheet"> #この部分
</head><body></body><html>
style.css
@charset"utf-8";

headerというボックス

header3.png

marginとpadding

width: 960px; が一般的
大体のPCは1000px前後が多いです。

<body><div></div></body>
/*コンテンツ横幅はbodyではなく、divを使う*/div{width:960px;margin:0auto;}

bodyだと背景色が全て変わってしまうので、divを使いましょう。

margin

div{margin:0auto;}

横幅は自動で真ん中に調整してくれます。

margin2.png

MBP(margin/border/padding)

ma_bo_pa2.png

全て中央寄せ

全て中央寄せにしたい場合は、bodyにtext-align: center;を入れます。

body{text-align:center;}

border

borderは、「太さ」「種類」「色」の順で書きます。

headerp{color:#900;background-color:#fec;border:1pxsolid#900;}

border2.png

border4.png

余白の取り方

上からmargin-bottom: ?px;が最初のうちはわかりやすいです。

ol&ulのpadding

ol&ul3.png


Viewing all articles
Browse latest Browse all 8644

Trending Articles



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