HTML/CSS

    よく使うCSSのまとめ

    Webページ作成でよく使うCSSをまとめました。

    コピーして使えます。

     

    要素の・・・

    背景色

    .sample{
      background-color: pink;
    }
    <p class="sample">おはようございます</p>

     

    おはようございます

     

     

    背景画像を設定する

    .sample{
    background-image: url(“ファイル名.jpg”);
    background-size: cover
    }

     

     

    影をつける

    .sample{
      box-shadow: 3px 3px 3px 3px black;
    }
    

     

    おはようございます

     

     

    透過する

    .sample{
      opacity: 0.5;
      background-color: pink;
    }
    

     

    おはようございます

     

     

    境界線、枠線をつける

    .sample{
      border: 1px solid red;
    }

     

    おはようございます

     

     

    角を丸くする

    .sample{
      border-radius: 10px;
    }

     

    おはようございます

     

     

    インライン要素をブロック要素にする

    .sample{
      display: block;
    }

     

     

    文字

    太くする

    .sample{
      font-weight: bold;
    }

     

    おはようございます

     

     

    サイズを変える

    .sample{
      font-size: 30px;
    }

     

    おはようございます

     

     

    間隔をあける

    .sample{
      letter-spacing: 10px;
    }

     

    おはようございます

     

     

    色を変える

    .sample{
      color: red;
    }

     

     

    影をつける

    .sample{
      text-shadow: 3px 3px 15px black;
    }

     

    おはようございます

     

     

    リンクの下線を消す

    .sample{
      text-decoration: none;
    }

     

    おはようございます

     

     

    行の高さ(間隔)を調整

    .sample{
      line-height: 35px;
    }

     

     

    リストの点を非表示にする

    .sample{
      list-style: none;
    }

     

     

    配置

    文字を中央へ移動する

    .sample{
      text-align: center;
      background-color: pink;
    }

     

    おはようございます

     

     

    ブロック要素(p,h1,div)を中央揃え

    .sample{
      margin:0 auto;
      width: 200px;
      background-color: pink;
    }

     

    おはようございます

     

     

     

    その他

    マウスカーソルがのった時だけCSSを適用する

    .blue:hover{
      color: white;
    }

     

     

    コメントを書く

    /*ここにコメントが書けます*/