Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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だとテキストも透過してしまうため、画像とテキストの間に1つ階層をはさめば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を正方形の半分で指定する*/
mokku
駆け出し!書け!!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away