トレーニング-(8)Receipt

35287 ワード
htmlcss テキストリンク

Receipt



😎 html


htmlコード

<h1>
  Bill sharing request
  <span>from frenchkebab</span>
</h1>

<div class="receipt">
  <h2>
    McDonald's
    <strong class="barcode"><img src="./assets/barcode.svg" alt="Barcode" /></strong>
  </h2>

  <span aria-label="Issued on June 24th, 20xx"> 24.06.20xx </span>
  
  <div>
    <dl>
      <div>
        <dt>Cock Light - 0.3<span aria-label="litter">L</span></dt>
        <dd>&dollar;1.50</dd>
      </div>
      <div>
        <dt>Chicken McNuggets</dt>
        <dd>&dollar;21.00</dd>
      </div>
      <div>
        <dt>In total</dt>
        <dd>
          <strong>&dollar;25.75</strong>
        </dd>
      </div>
    </dl>
  </div>
</div>

結果画面



😎 cssを加える


cssコード


receipt.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>
      Bill sharing request
      <span>from frenchkebab</span>
    </h1>

    <div class="receipt">
      <h2>
        McDonald's
        <strong class="barcode"><img src="./assets/barcode.svg" alt="Barcode" /></strong>
      </h2>

      <span aria-label="Issued on June 24th, 20xx"> 24.06.20xx </span>

      <div>
        <dl>
          <div>
            <dt>Cock Light - 0.3<span aria-label="litter">L</span></dt>
            <dd><strong>&dollar;1.50</strong></dd>
          </div>
          <div>
            <dt>Heineken Beer - 0.5<span aria-label="litter">L</span></dt>
            <dd><strong>&dollar;3.25</strong></dd>
          </div>
          <div>
            <dt>Chicken McNuggets</dt>
            <dd><strong>&dollar;21.00</strong></dd>
          </div>
        </dl>
        <dl>
          <dt>In total</dt>
          <dd>
            <strong>&dollar;25.75</strong>
          </dd>
        </dl>
      </div>
    </div>
  </body>
</html>
styles.css
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap');

* {
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2d3d;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background-color: #1f2d3d;
}

body::after {
  content: 'frenchkebab©';
  display: block;
  margin-top: 50px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

body > h1 {
  margin-bottom: 32px;
  font-size: 20px;
  line-height: 28px;
  color: #fff;
}

body > h1 span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  opacity: 0.5;
}

body > h1 a {
  color: #fff;
  text-decoration: none;
}

body > h1,
.receipt {
  width: 100%;
  max-width: 320px;
}

.receipt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 32px 32px;
  border-radius: 12px;
  background-color: #fff;
  background-image: url('./assets/logo-mcdonalds.png');
  background-repeat: no-repeat;
  background-size: 40px auto;
  background-position: 91% 28px;
}

.receipt > span {
  order: 1;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #80868e;
}

.receipt h2 {
  order: 2;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #333e47;
}

.receipt .barcode {
  order: 3;
  width: 120px;
  margin-bottom: 32px;
}

.receipt img {
  width: 100%;
  height: auto;
}

.receipt > div {
  order: 4;
}

.receipt dl {
  width: 100%;
}

.receipt dl div,
.receipt dl:last-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
  color: 333e47;
  opacity: 0.8;
}

.receipt dl:last-child {
  margin-bottom: 16px;
}

.receipt > div {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

結果画面



😎 知っておくべきこと。


タイトルの内容


タイトルのfrom frenchkebabはh 1ラベルにspanで包むだけでいい!

バーコードは何で処理しますか?


これは重要な情報なので、強いラベルで包みましょう.

発行日はどのように処理しますか?


タイトルのfrom frenchkebabと同様に、span処理を行います!
この程度になると、いつspanを使うのか少しずつ見てきたようです.

総価格が重要だから!


強いラベルで勝手に包む.
他の金額とは違って、詩的な意味が強調されています!

Lのようなアルファベット単位をどのように処理しますか?


spanで包むとaria-labelが使えます!

意味的には総額が自然に底に現れるから...


以下に総額を記入し、cssに引き上げます!

価格は強調しましょう。


strongで価格を強調するともっとロマンチックな感じがします!
8.0 Qwebレポート作成手順
TypeScriptを紹介し、開発環境を構築!