CSSの基本
コピペして使ってください。
HTMLの基本構造、コメント、リンク、画像、リストを記載。
基本構造
sample.css
h1 {
color: red;
}
コメント、色指定、サイズ指定など
sample.css
/*コメント*/
/*色、サイズ等の指定*/
h1 {
/*色*/
color: #ff0000;
/*フォントサイズ*/
font-size: 10px;
/*フォント種類*/
font-family: serif;
font-family: "Avenir Next";
/*背景色*/
background-color: #dddcdd;
/*縦、横サイズ*/
width: 200px;
height: 100px;
}
class、idなどの指定
sample.css
/*classにCSSを設定*/
.sample {
}
/*idにCSSを設定*/
#sample {
}
/*class内のリストにCSSを設定*/
.sample li{
}
/*複数のセレクタに同じCSSを設定*/
h1, p{
}
リストを横並びにする
sample.css
li {
/*リストの黒点をなくす*/
list-style: none;
/*リストを横並びにする*/
float: left;
}
余白をつける
sample.css
.logo{
/*paddingは内側の余白*/
/*上10px、右20px、下30px、左40px*/
padding: 10px 20px 30px 40px;
/*上下20px、左右40px*/
padding: 20px 40px;
/*marginは内側の余白*/
/*上下20px、左右40px*/
margin: 20px 40px;
/*上20px*/
margin-top: 20px;
}
ボーダー線
sample.css
.border {
border-bottom: 2px solid #dee7ec;
}