아무래도 7note입니다. 사용해 보는 것은 좋지만, summary 태그에 오는 검은 화살표를 지우는 방법을 모르는 사람에게

details・summary 태그를 사용했을 때 「▶」← 이런 화살표가 표시되어 사라지지 않는 경우의 비표시로 하는 방법입니다.


↑이 검은색 화살표를 지웁니다.

style.css

summary {
  display: block;
  list-style: none;
}

/* 一部ブラウザで消えなかった場合は以下も追記 */
summary::-webkit-details-marker {
  display:none;
}

검증 툴(F12)로 보면 알 수 있습니다만, 「::marker」라고 불리는 것이 있습니다. 이 녀석이 원인입니다.
이것은 list-style-type의 일종이므로, 자주 사용되는 <li> 에 대해서 오는 리스트 마크(・)와 동종에 해당합니다.



그 때문에, <li> 의 리스트 마크의 점(・)을 지울 때와 같은 방법으로, list-style: none; 로 숨길 수가 있습니다.

요약

사용하고 있던 reset.css등에 따라서는, 초기치를 무효화하고 있지 않거나 하기 때문에, 만약 검정 화살표가 남아 있으면, 개별적으로 CSS를 써도 좋을 것입니다
앞으로도 필요 없다고 하는 경우라면 reset.css등의 CSS파일에 추기해도 좋을지도 모르겠네요.

참고 : htps : // 놀라운 l. 코m/쿠에 s치온 s/155649

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임