HTML/CSSの書き方(ちょっとhaml) #CSS

html/cssで作るときにいつも忘れがちなことを個人でメモしているものになります。
都度更新しておりますのでご了承ください。

いつも参考にさせていただいているサイト

⭐️色の見本
http://www.netyasun.com/home/color.html
⭐️Font-familyメーカー
https://saruwakakun.com/font-family
⭐️命名について
https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506#html%E3%81%A8css%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AE%E5%91%BD%E5%90%8D%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

基本

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" >
  <link rel="stylesheet" type="text/css" href="example.css">
  <script type="text/javascript" src="index.js"></script>　<!-- jsがあれば -->

  <title>サイト名</title>
</head>
  <body>
  <!-- 主にここからコードを書いていく -->

  <!-- ここまでの間にコードを書く -->
  </body>
</html>

リセットCSSが必要な場合は、好みのものを貼り付けてください。

画像の表示

html

<img src="dog.jpg" alt="［写真］">

haml

<%= image_tag 'dog.JPG'%>

画像を背景表示する

background-imageを使う

html

  <section class="works" >
    <div class="l-content">
      <h2 class="heading">Works</h2>
    </div>
  </section>

css


.works {
    width: 100%;
    height: 600px;
    background-image: url(画像のパス);
}

背景画像を透過する（テキストは透過しない）

opacityだとテキストも透過してしまうため、画像とテキストの間に１つ階層をはさめばOK！

html

  <section class="works" >
    <div class="l-content">　#これを挟む
      <h2 class="heading">Works</h2>
    </div>
  </section>

css

.l-content{
  height: 100%;
  background: rgba(255,255,255,0.5);
}

画像を中央寄せ

positionを使う

scss

.top-box {
  background-color: $BaseOrange;
  height: 100px;
  width: 100%;
  margin-bottom: 15px;
  position:relative;
  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
  }
}

画像リンク

      <a href="http://www.pckai.net/manboumaru/"><img src="image2.jpg"></a>

リスト（li,ul)

    <ul class=contents>
      店名：
        <li class=contents__details>
        ジャンル：
        </li>
        <li class=contents__details>
        住所：
        </li>

//リストの点を消す
  li {
    list-style: none;
  }

要素の加工

要素を丸くする

css

.work-block {
    height: 250px;
    width: 250px;
    border-radius: 125px;
}

/*border-radiusを正方形の半分で指定する*/