このバナーのコーディングの組み方を教えてください。

テストテストテストテストテストテストテストテストテストテストテストテストテストテスト

2017/05/06 14:26

回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、本文を削除するのはやめましょう。画面右上の「2017/05/06 23：24 編集」というボタンを押すと編集履歴を見れます。そこから過去の投稿を確認できるので、それを使って記事を復元してください。

行動規範の内容に同意します

回答2件

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        em, strong, span, a {
13            display: inline-block;
14            vertical-align: middle;
15        }
16
17        em span {
18            display: block;
19            text-align: center;
20            font-style: normal;
21        }
22
23        .box::before {
24            display: inline-block;
25            vertical-align: top;
26            content: "";
27            width: 0;
28            height: 0;
29            border-style: solid;
30            border-width: 10px 10px 0 0;
31            border-color: #ff0000 transparent transparent transparent;
32        }
33
34        .btn {
35            color: #ffffff;
36            font-size: 20px;
37            background: #fc3c3c;
38            padding: 10px 20px 10px 20px;
39            text-decoration: none;
40        }
41    </style>
42</head>
43<body>
44<div class="box">
45    <em><span>東京校</span>TOKYO</em>
46    <span>03.13(月) 卒業コレクション</span>
47    <a class="btn" href="">&gt;&gt;&gt; 閲覧予約をする</a>
48</div>
49</body>
50</html>

投稿2017/02/06 23:06

s8_chu

総合スコア14731

HTML
1<h2>
2  <em><span>東京校</span>TOKYO</em>
3  <strong>03.13(月) 卒業コレクション</strong>
4  <a href="">&gt;&gt;&gt; 観覧予約をする</a>
5</h2>

CSS
1h2 {
2  position:relative;
3}
4h2:before {
5  position:absolute;
6}
7h2 em,h2 strong,h2 a {
8  display:inline-block;
9  vertical-align:middle;
10  width:auto;
11}
12h2 em span {
13  display:block;
14  text-align:center;
15}