pタグの中身が表示されない

前提・実現したいこと

Pタグの中身を示したい

発生している問題・エラーメッセージ

なし

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>ウェブ作成練習用</title>
6        <link rel="stylesheet" href="reset.css">
7        <link rel="stylesheet" href="style.css">
8    </head>
9    <body>
10            <div class="sidemenu">
11            <h2 class="heading">RANKING</h2>
12            <ol class="ranking">
13                <li class="ranking-item">
14                    <a href="#">
15                        <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
16                        <span class="order"></span>
17                        <p class="text">HTML/CSSコーティングと切っても切れないWebブラウザのシェア動画をチェックしよう</p>
18                    </a>
19                </li>
20                <li class="ranking-item">
21                    <a href="#">
22                        <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
23                        <span class="order"></span>
24                        <p class="text">HTML/CSSコーティングと切っても切れないWebブラウザのシェア動画をチェックしよう</p>
25                    </a>
26                </li>
27                <li class="ranking-item">
28                    <a href="#">
29                        <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
30                        <span class="order"></span>
31                        <p class="text">HTML/CSSコーティングと切っても切れないWebブラウザのシェア動画をチェックしよう</p>
32                    </a>
33                </li>
34                <li class="ranking-item">
35                    <a href="#">
36                        <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
37                        <span class="order"></span>
38                        <p class="text">HTML/CSSコーティングと切っても切れないWebブラウザのシェア動画をチェックしよう</p>
39                    </a>
40                </li>
41                <li class="ranking-item">
42                    <a href="#">
43                        <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
44                        <span class="order"></span>
45                        <p class="text">HTML/CSSコーティングと切っても切れないWebブラウザのシェア動画をチェックしよう</p>
46                    </a>
47                </li>
48                <li class="ranking-item">
49                    <a href="#">
50                        <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
51                        <span class="order"></span>
52                        <p class="text">HTML/CSSコーティングと切っても切れないWebブラウザのシェア動画をチェックしよう</p>
53                    </a>
54                </li>
55                <li class="ranking-item">
56                    <a href="#">
57                        <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
58                        <span class="order"></span>
59                        <p class="text">HTML/CSSコーティングと切っても切れないWebブラウザのシェア動画をチェックしよう</p>
60                    </a>
61                </li>
62            </ol>
63   </body>
64</html>

css
1@charset "utf-8";
2
3html{
4    font-size: 62.5%;
5}
6body{
7    color: #333;
8    font-size: 1.2rem;
9    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
10}
11*,*::before,::after{
12    box-sizing: border-box;
13}
14a link,a:visited, a:hover, a:active{
15    color: #d03c56;
16    text-decoration: none;
17}
18header{
19    width: 100%;
20    padding: 28px 0 10px;
21    background: url('./images/bg-header.gif') repeat-x;
22    box-shadow: 0 0 10px 1px #e3e3e3;
23}
24
25.sidemenu{
26    width: 275px;
27    float: right;
28}
29
30.ranking{
31    margin-bottom: 30px;
32    list-style-type: none;
33}
34.ranking .ranking-item{
35    margin-top: 15px;
36}
37.ranking .ranking-item a{
38    display: block;
39    font-size: 0;
40    transition: opacity 0.15s;
41}
42.ranking .ranking-item a:hover{
43    opacity: 0.8;
44}
45.ranking .image{
46    width: 55px;
47    height: 55px;
48}
49.ranking .text{
50    display: inline-block;
51    width: 182px;
52    color: #000;
53    vertical-align: top;
54    line-height: 1.5;
55}
56.ranking .order{
57    display: inline-block;
58    width: 18px;
59    height: 18px;
60    margin: 0 10px;
61    border: 1px solid #ccc;
62    color: #aaa;
63    vertical-align: 20px;
64    text-align: center;
65    font-weight: bold;
66    line-height: 16px;
67    -webkit-transform: rotate(45deg);
68    -ms-transform: rotate(45deg);
69    transform: rotate(45deg);
70}
71.ranking .ranking-item:nth-of-type(1) .order,
72.ranking .ranking-item:nth-of-type(2) .order,
73.ranking .ranking-item:nth-of-type(3) .order{
74    border: none;
75    color: #fff;
76    font-weight: normal;
77    line-height: 18px;
78}
79.ranking .ranking-item:nth-of-type(1) .order{
80    background-color: #dab413;
81}
82.ranking .ranking-item:nth-of-type(2) .order{
83    background-color: #6e7b84;
84}
85.ranking .ranking-item:nth-of-type(3) .order{
86    background-color: #a0541a;
87}
88.ranking .order::before{
89    content: '1';
90    display: inline-block;
91    font-size: 1.0rem;
92    -webkit-transform: rotate(-45deg);
93    -ms-transform: rotate(-45deg);
94    transform: rotate(-45deg);
95}
96.ranking{
97    margin-bottom: 30px;
98    list-style-type: none;
99    counter-reset: ranking;
100}
101.ranking .order::before{
102    content: counter(ranking);
103    counter-increment: ranking;
104    display: inline-block;
105    font-size: 1.0rem;
106    -webkit-transform: rotate(-45deg);
107    -ms-transform: rotate(-45deg);
108    transform: rotate(-45deg);
109}
110.documents{
111    margin: 10px 10px 30px;
112}
113.documents,
114.documents ul{
115    list-style-type: none;
116}
117.documents > li .title{
118    margin: 15px 0;
119    padding-left: 8px;
120    border-left: 5px solid #d03c56;
121    font-size: 1.4rem;
122    line-height: 1.2;
123    }
124    .documents > li + li{
125        margin-top: 25px;
126    }
127    .documents > li ul{
128        margin: 15px;
129    }
130    .documents > li ul > li{
131        margin-bottom: 15px;
132        padding-left: 10px;
133        background: url('./images/arrow.gif') no-repeat left center;
134    }
135    .documents a:hover{
136        text-decoration: underline;
137    }
138    .search-box{
139        padding: 15px;
140        background-color: #ccc;
141        font-size: 0;
142    }
143    .search-box > *{
144        font-size: 1.2rem;
145    }
146    .search-box .search-input{
147        width: 205px;
148        height: 26px;
149        padding: 0 10px;
150        border: none;
151    }
152    .search-box .search-buttom{
153        width: 40px;
154        height: 26px;
155        border: none;
156        background-color: #d03c56;
157        color: #fff;
158        cursor: pointer;
159    }
160    .search-box .text{
161        margin-top: 12px;
162    }
163
164    
165    footer{
166        width: 100%;
167    }
168    .clearfix::after{
169        content: '';
170        display: block;
171        clear: both;
172    }
173

reset
1/**
2 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
3 * Richard Clark (http://richclarkdesign.com)
4 * http://cssreset.com
5 */
6 html, body, div, span, object, iframe,
7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 abbr, address, cite, code,
9 del, dfn, em, img, ins, kbd, q, samp,
10 small, strong, sub, sup, var,
11 b, i,
12 dl, dt, dd, ol, ul, li,
13 fieldset, form, label, legend,
14 table, caption, tbody, tfoot, thead, tr, th, td,
15 article, aside, canvas, details, figcaption, figure,
16 footer, header, hgroup, menu, nav, section, summary,
17 time, mark, audio, video {
18     margin:0;
19     padding:0;
20     border:0;
21     outline:0;
22     font-size:100%;
23     vertical-align:baseline;
24     background:transparent;
25 }
26 body {
27     line-height:1;
28 }
29 article,aside,details,figcaption,figure,
30 footer,header,hgroup,menu,nav,section {
31     display:block;
32 }
33 nav ul {
34     list-style:none;
35 }
36 blockquote, q {
37     quotes:none;
38 }
39 blockquote:before, blockquote:after,
40 q:before, q:after {
41     content:'';
42     content:none;
43 }
44 a {
45     margin:0;
46     padding:0;
47     font-size:100%;
48     vertical-align:baseline;
49     background:transparent;
50 }
51 /* change colours to suit your needs */
52 ins {
53     background-color:#ff9;
54     color:#000;
55     text-decoration:none;
56 }
57 /* change colours to suit your needs */
58 mark {
59     background-color:#ff9;
60     color:#000;
61     font-style:italic;
62     font-weight:bold;
63 }
64 del {
65     text-decoration: line-through;
66 }
67 abbr[title], dfn[title] {
68     border-bottom:1px dotted;
69     cursor:help;
70 }
71 table {
72     border-collapse:collapse;
73     border-spacing:0;
74 }
75 /* change border colour to suit your needs */
76 hr {
77     display:block;
78     height:1px;
79     border:0;
80     border-top:1px solid #cccccc;
81     margin:1em 0;
82     padding:0;
83 }
84 input, select {
85     vertical-align:middle;
86 }
87

以上になります。
よろしくお願いいたします。

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

回答1件

ベストアンサー

フォントサイズが0なので表示されていません

css
1.ranking .ranking-item a{
2    display: block;
3    font-size: 0;	/* これが余計 */
4    transition: opacity 0.15s;
5}

投稿2020/07/22 07:37

SakuBlade

総合スコア375

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

pタグの中身が表示されない

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

関連した質問