LoginSignup
0

More than 3 years have passed since last update.

CSSの基本~コメントアウト、余白追加など

Last updated at Posted at 2019-07-09

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;
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0