<details>、<summary>タグの見出しが表示されない

前提・実現したいこと

掲示板のスレッドを日記代わりに使用しています。
長文になってしまう時に【続きを読む】や【ここをクリック】等の表示したいのですが、
【詳細】と表示されて任意の文字になりません。
表示するにはどうしたらいいのでしょうか？
スレッドはCSSでデザインをしてあります。

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

<summary>続きを読む</summary>と入力しても ▶　詳細と表示され、『続きを読む』の文字が詳細と書かれた文字のしたに表示されます。同じ掲示板で他のスレッドを使用している方は任意の文字が表示されています。写真は【ここをクリック】と入力した時の▼を開いた時の状態です。 ![イメージ説明](6a3e5f6a68c4eaca576cac7d90019831.jpeg)

試したこと

html
1<details>
2	<summary>続きを読む</summary>
3</details>

使用しているコード

css
1<!--
2@media(min-width:800px){
3 .all{
4  width: 80%;
5  margin: 0 auto;} }
6
7body,h1,h2,p{
8 margin: 0;
9 padding: 0;}
10
11body{
12 background-color:#ddc;
13 color:#664;
14 font-family: 'Petit Formal Script','ヒラギノ角ゴ Pro W3',メイリオ,sans-serif;
15 font-size: 13px;
16 line-height: 1.5;}
17
18a{
19 color:#330;
20 tap-highlight-color: rgba(0,0,0,0);
21 -webkit-tap-highlight-color:rgba(0,0,0,0);}
22
23a:hover{
24 text-decoration: none;
25 background-color: #330;
26 color: #664;}
27
28a:active{ color:#664;}
29
30h1{
31 font-family: 'Petit Formal Script', cursive;
32 font-size: 100%;
33 color: #b8b8a8;
34 top: 340px; /* 縦位置 */
35 right: 5%; /* 横位置 */
36 -webkit-transform: rotate(5deg); /* 角度 */
37 transform: rotate(5deg); /* 角度(上と同じ数値) */
38 position: absolute;}
39
40h2{
41 font-family: 'Petit Formal Script', cursive;
42 font-size: 120%;
43 border-bottom: 3px #666 double;
44 margin-bottom: 6px;}
45
46ul{
47 position: relative;
48 list-style-type: none;
49 font-size: 16px;
50 font-weight: bold;
51 margin: 30px 0;
52 display: table;}
53
54li a{
55 display: inline-block;
56 text-decoration: none;
57 border-bottom: 1px solid #330;
58 width: 100%;}
59
60.box{
61 background-color: #fcfcf8;
62 border: 5px #331 solid;padding: 2%;
63 margin: 5%;
64 position: relative;
65 z-index: auto;
66 box-shadow: 0 0 2px rgba(0,0,0,0.6);}
67
68.box::before{
69 content:"";
70 background-color: #fcfcf8;
71 border: 5px #442 solid;
72 width: 100%;
73 height: 100%;
74 -webkit-transform: rotate(3deg);
75 transform: rotate(3deg);
76 opacity: 0.9;
77 position: absolute;
78 top: -5px;
79 left: -1px;
80 z-index: -1;}
81
82p{ border-bottom: 1px #666 solid;}
83--></style>

HTML
1<html><head><link href="https://fonts.googleapis.com/css?family=Damion&display=swap" rel="stylesheet">
2<link rel="stylesheet" type="text/css" href="●●●"/></head><body><div class="all"><div class="box"><h2>●●●</h2>
3<font color=#4169e1>本文
4<details>
5    <summary>続きを読む</summary>
6</details>
7</font>
8</div></div></html>

補足情報（FW/ツールのバージョンなど）

表示確認はSafari（iPhoneⅩ）とChrome（PC)から行いました。
掲示板はWhocares?という無料レンタル掲示板です。

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

回答1件

ベストアンサー

はHTMLのコメントアウトなのでCSSファイルには使えません。 <style></style>はCSSファイル内には不要です。

蛇足：
fontタグはHTML5では廃止

HTML5で廃止された要素一覧

投稿2019/06/16 11:02

編集2019/06/16 11:13

m.ts10806

総合スコア80850

退会済みユーザー

2019/06/16 13:00

『このままコピーしてお使いください』とあったので、そのまま貼り付けていましたが余分なものが多かったのですね。教えていただいたとおり と<style></style>を消したところ、きちんと表示されました！また、fontタグについてもありがとうございます。廃止されていたことを初めて知りました。少しずつですが改めて勉強をし直すことにします。本当にありがとうございました！

m.ts10806

2019/06/17 01:02

どのような記事を参考にしたかを記載してもらうと良いかもしれません。嘘書いている記事なのか、はたまた質問者さんが誤解しているのかが判断できます。また、基礎の部分なので、下記のような基本を解説している記事をもとにすごく簡単なコードから（それこそ背景色や文字サイズから）試してみると良いです https://www.tagindex.com/stylesheet/basic/setting1.html

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