▲TOPへ戻る

CSS初級 超基礎 これだけは覚えたいプロパティ

CSSとは?

Cascading Style Sheets

Cascading : 重ねる

Style Sheets : 文章などの表示形式を制御する仕組み

⇒ HTMLの見た目を整える、修飾する

CSSの書き方

HTML
<head>
  <style>
    h1 {
      color: blue;          
    }
    h2 {
      color: orange;
    }
    p {
      color: red;
    }
  </style>
</head>
  
<body>
  <h1>プログラミング入門</h1>
  <h2>HTMLとは?</h2>
  <p>Hyper Text Markup Language</p>
</body>

結果

プログランミング入門

HTMLとは?

Hyper Text Markup Language

CSS ロードマップ

文字の装飾

共通HTML

HTML
<div> Lorem ipsum dolor sit
    amet consectetur adipisicing elit. 
    Fugiat numquam officia recusandae delectus nulla consequatur mollitia, 
    iusto minima perspiciatis nam dolores dignissimos, 
    quisquam cum eaque itaque iste sit necessitatibus nisi. 
</div>

色 : color

CSS
  div {
    color: red;
  }

文字の大きさ : font-size

CSS
  div {
    color: red;
    font-size: 22px;
  }

行の高さ : line-height

CSS
  div {
    color: red;
    font-size: 22px;
    line-height: 25px;
  }

文字の太さ : font-weight

CSS
  div {
    color: red;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
  }
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae cum laboriosam quis praesentium assumenda. Cumque nemo, dolor voluptatem quidem provident eius porro eum eos et nesciunt odit, blanditiis velit aut.

幅と高さ

width と height

px(ピクセル)、または、%(パーセント)で指定

CSS
div {
    width: 400px;
    height: 200px;
    /* または */
    width: 50%;
    height: 20%;
    color: red;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
  }
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae cum laboriosam quis praesentium assumenda. Cumque nemo, dolor voluptatem quidem provident eius porro eum eos et nesciunt odit, blanditiis velit aut.

背景

background

CSS
div {
    width: 400px;
    height: 200px;
    background: yellow;
    color: red;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
  }
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae cum laboriosam quis praesentium assumenda. Cumque nemo, dolor voluptatem quidem provident eius porro eum eos et nesciunt odit, blanditiis velit aut.

背景画像を表示させる

CSS
div {
    width: 400px;
    height: 200px;
    background-image: url("./img/cat.jpg");
    background-size: cover;  
    color: red;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
  }
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae cum laboriosam quis praesentium assumenda. Cumque nemo, dolor voluptatem quidem provident eius porro eum eos et nesciunt odit, blanditiis velit aut.

文字の配置

text-align

CSS
div {
    width: 400px;
    height: 200px;
    background: yellow;
    color: red;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
    text-align: center; /* 中央揃え */
    text-align: left; /* 左寄せ */
    text-align: right; /* 右寄せ */
  }
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae cum laboriosam quis praesentium assumenda. Cumque nemo, dolor voluptatem quidem provident eius porro eum eos et nesciunt odit, blanditiis velit aut.

枠線

border

border: 線の太さ 線の種類 線の色

CSS
div {
    width: 400px;
    height: 200px;
    background: yellow;
    color: red;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
    text-align: center; /* 中央揃え */
    border: 1px solid black;
  }
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae cum laboriosam quis praesentium assumenda. Cumque nemo, dolor voluptatem quidem provident eius porro eum eos et nesciunt odit, blanditiis velit aut.

線の種類

border: dotted 3px #333;
border: double 3px #333;
border: dashed 3px #333d;

外側の余白

margin

CSS
div {
    width: 400px;
    height: 200px;
    background: yellow;
    margin: 50px;
    color: red;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
    text-align: center; /* 中央揃え
    border: 1px solid black;
  }
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae cum laboriosam quis praesentium assumenda. Cumque nemo, dolor voluptatem quidem provident eius porro eum eos et nesciunt odit, blanditiis velit aut.

その他の設定

CSS
  div {
    margin: 50px 100px 150px 200px;
    /* margin: 上  右  下  左*/

    margin: 50px 200px;
    /* margin: 上下  左右*/

    margin: 50px auto;
    /* margin: 上下  左右中央寄せ*/
  }

内側の余白

padding

CSS
  div {
    width: 400px;
    height: 400px;
    background: yellow;
    padding: 30px;
    color: red;
    font-size: 22px;
    line-height: 25px;
    font-weight: bold;
    text-align: center; /* 中央揃え
    border: 1px solid black;
  }
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae cum laboriosam quis praesentium assumenda. Cumque nemo, dolor voluptatem quidem provident eius porro eum eos et nesciunt odit, blanditiis velit aut.

その他の設定

CSS
  div {
    margin: 20px 30px 50px 60px;
    /* margin: 上  右  下  左*/

    margin: 30px 50px;
    /* margin: 上下  左右*/
  }

hover

マウスが要素(ようそ)(うえ)()(とき)状態(じょうたい)

HTML
<style>
  .box{
    width: 400px;
    height: 200px;
    background: blue;
  }
  .box:hover{
    background: red;
  }
</style>
  
<div class="box"></div>    

transition 遷移(せんい)

HTML
<style>
    .box{
      width: 400px;
      height: 200px;
      background: blue;
      transition: 0.5s ease;
    }
    .box:hover{
      background: red;
    }
  </style>
        
  <div class="box"></div>    

transform 変形(へんけい)

translate

HTML
<style>
    .box3{
      width: 400px;
      height: 200px;
      background: blue;
      transition: .5s ease;
    }
    .box3:hover{
      transform: translate(50px, 50px);
    }
    /* transform: translate(X軸, Y軸)  */
</style> 

<div class="box3"></div>

rotate

HTML
<style>
    .box3, .box4{
      width: 400px;
      height: 200px;
      background: blue;
      transition: .5s ease;
    }
    .box4:hover{
      transform: rotate(360deg);
    }
</style> 

<div class="box4"></div>

scale

HTML
<style>
    .box3, .box4, .box5{
      width: 400px;
      height: 200px;
      background: blue;
      transition: .5s ease;
    }
    .box4:hover{
      transform: scale(1.5);
    }
</style> 

<div class="box5"></div>

overflow

hidden (はみ出た部分(ぶぶん)(かく)す)

HTML
<style>
    .img{
      width: 600px;
      height: 380px;
      overflow: hidden;
    }
    img{
      transition: 0.3s ease;
    }
    img:hover{
      transform: scale(1.3);
    }
</style>

<div class="img">
    <img src="./img/cat.jpg" alt="ネコ">
</div>
ネコ

scroll (はみ出た部分をスクロールさせる)

HTML
<style>
        .outer{
          width: 300px;
          height: 200px;
          overflow: scroll;
        }
        .inner{
          width: 1000px;
          height: 1000px;
          background: blue;
        }
    </style>
    
    <div class="outer">
      <div class="inner">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, fuga
        quas dolor eum rerum, quis libero cumque qui voluptates quibusdam
        culpa tempore fugiat officia possimus nulla voluptatem sed?
        Voluptate, aut.
      </div>
    </div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, fuga quas dolor eum rerum, quis libero cumque qui voluptates quibusdam culpa tempore fugiat officia possimus nulla voluptatem sed? Voluptate, aut.

display

インライン要素をブロックレベル要素に変更

HTML
<style>
  span{
    height: 50px
    background: red;
    color: #fff;
  }
</style>
      
<span>span1</span>
<span>span2</span>
<span>span3</span>

結果

span1 span2 span3

display: block;を追加

CSS
span{
  display: block;
  height: 50px
  background: red;
  color: #fff;
}

結果

縦並びになり、横幅いっぱいになり、高さも50pxになる。

span1 span2 span3

インラインブロック(inline-block)

インラインブロックはインライン要素とブロックレベル要素の良いところ取り。

CSS
span{
  display: inline-block;
  height: 50px
  background: red;
  color: #fff;
}

結果

横並びになり、幅と高さが設定できる。

span1 span2 span3

flexbox フレックスボックス

display: flexでレイアウトができる。

HTML
<style>
  .flex{
    width: 500px;
    height: 200px;
    border: 1px solid black;
  }
  .flex-box{
    width: 100px;
    height: 50px;
    border: 1px solid black;
  }
</style>
    
<div class="flex">
  <div class="flex-box">1</div>
  <div class="flex-box">2</div>
  <div class="flex-box">3</div>
</div>

結果

1
2
3

親要素にdisplay: flexを追加

CSS
.flex{
    display: flex;
    width: 500px;
    height: 200px;
    border: 1px solid black;
  }
  .flex-box{
    width: 100px;
    height: 50px;
    border: 1px solid black;
  }

結果

1
2
3

justify-content 水平方向の配置

justify-contentで水平方向の配置ができる。

CSS
.flex{
    display: flex;
    justify-content: center;
    width: 500px;
    height: 200px;
    border: 1px solid black;
  }

結果

1
2
3
flex-start 左寄せ
center 中央寄せ
flex-end 右寄せ
space-around 中央に均等寄せ
space-between 左右に配置し、中身を均等にする

align-items 垂直方向の配置

align-itemsで垂直方向の配置ができる。

CSS
.flex{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 200px;
  border: 1px solid black;
}

結果

1
2
3
flex-start 左寄せ
center 中央寄せ
flex-end 右寄せ

折り返し flex-wrap:wrap

HTML
<div class="flex">
  <div class="flex-box">1</div>
  <div class="flex-box">2</div>
  <div class="flex-box">3</div>
  <div class="flex-box">4</div>
  <div class="flex-box">5</div>
</div>
CSS
.flex{
    display: flex;
    width: 500px;
    height: 200px;
    border: 1px solid black;
  }
  .flex-box {
    width:200px
  }

結果

横並び1列で、横幅が効いていない。(widthが200pxになっていない)

1
2
3
4
5

親要素にflex-wrap: wrapを追加。

CSS
.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 200px;
    border: 1px solid black;
  }
1
2
3
4
5

position

static 通常の位置で配置される(初期値)
relative 通常の位置を基準に相対位置を指定
absolute body、または親要素を基準に絶対位置を指定
fixed ウィンドウを基準に絶対位置を指定

relative

要素にposition: relativeを指定することにより、 その場所からの、相対位置を指定することができる。

HTML
  <div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
css
  .wrapper{
    display: flex;
    justify-content: space-between;
    border: 1px solid #333;
    height: 100px;    
  }
  .wrapper .box1,
  .wrapper .box2,
  .wrapper .box3 {
    width: 80px;
    height: 40px;
    background: blue;
  }
  .wrapper .box2{
    position: relative;
    top: 40px;
    left: 80px;
  }

もともとあった場所から、top,leftで位置を指定できる。

absolute

画面の左上を基点として、絶対位置を指定できる。

laptop

親要素を基点とする

親要素にposition: relativeを指定することにより、 親要素の左上を基点として、絶対位置を指定できる。

HTML
  <div class="oya">親要素
    <div class="ko">子要素</div>
  </div>
css
  .oya{
    position: relative;
    height: 200px;
  }
  .ko{
    position: absolute;
    padding: 15px;
    height: 140px;
    width: 80%;
  }
top: px
left: px
親要素
子要素

fixed

画面左上からの位置を指定し、スクロールしても その位置を動かずに留まる。

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇