リストマーカーの位置がずれる

1 前提・実現したいこと

リストマーカーの位置がずれているので改善したい
また原因を教えて頂きたいです

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

リストマーカーが文字の上にくる

3 該当のソースコード

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <header>
      <div>
        <img src="image/siteTitle.png" alt="ロゴ画像">
      </div>
      <div class="description">
        <p>“地域に根付いた歯科医院” デンタル クリニック</p>
      </div>
      <div class="adress">
        <div class="phone">
          <p><i class="fa fa-phone fa-flip-horizontal" aria-hidden="true"></i>03-0000-0000</p>
        </div>
        <div class="day">
          <p>予約受付時間 10:00～19:30 <span>日祝 休診</span></p>
        </div>
      </div>
      <nav>
        <div class="header-navi">
          <ul>
            <li><a href="#" class="first">
              <span class="titleJa">トップページ</span><br>
              <span class="titleEg">HOME</span>
            </a></li>
            <li><a href="#">
              <span class="titleJa">医院紹介</span><br>
              <span class="titleEg">CLNIC</span>
            </a></li>
            <li><a href="#">
              <span class="titleJa">診療案内</span><br>
              <span class="titleEg">SEARVICE</span>
            </a></li>
            <li><a href="#">
              <span class="titleJa">院長・スタッフ紹介</span><br>
              <span class="titleEg">STAFF</span>
            </a></li>
            <li><a href="#" class="last">
              <span class="titleJa">アクセス</span><br>
              <span class="titleEg">ACCESS</span>
            </a></li>
          </ul>
        </div>
      </nav>
    </header>
    <main>
      <div class="menu">
        <div class="title1">
          <h2>一般歯科</h2>
        </div>
        <div class="list1">
          <ul>
            <li><a href="#">虫歯治療</a></li>
            <li><a href="#">歯周病治療</a></li>
            <li><a href="#">入れ歯</a></li>
            <li><a href="#">予防歯科</a></li>
          </ul>
        </div>
        <div class="title2">
          <h2>審美歯科</h2>
        </div>
        <div class="list2">
          <ul>
            <li><a href="#">ホワイトニング</a></li>
            <li><a href="#">オールセラミック</a></li>
            <li><a href="#">セラミックインレー</a></li>
            <li><a href="#"> PMTC</a></li>
          </ul>
        </div>
      </div> 
      <div class="main">
        <img src="image/in01.jpg" alt="メイン画像">
        <article>
          <h2>新着情報</h2>
          <div>
            2012年08月01日
          </div>
          <div>
            【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。
          </div>
          <div>
            2012年07月24日
          </div>
          <div>
            【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。
          </div>
          <div>
            2012年07月02日
          </div>
          <div>
            【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。
          </div>
          <div>
            2012年06月20日
          </div>
          <div>
            【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。
          </div>
          <div>
            2012年06月01日
          </div>
          <div>
            ホームページをリニューアルしました。
          </div>
        </article>
      </div>
    </main>
  </div>
</body>
</html>

css

@charset "utf-8";

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

body {
    border-top: 8px solid #6cc;
    background-color: #f6f6f6;
}
.container {
    margin: 0 auto;
    width: 920px;
}
header {
    position: relative;
}
header img {
    position: absolute;
    top: 27px;
}
.description {
    position: absolute;
    font-size: 10px;
    right: 0;
    top: 16px;
}
.adress {
    position: absolute;
    right: 0px;
    top: 46px;
}
.phone {
    font-size: 24px;
}
.fa-phone {
    opacity: 0.6;
    margin-right: 16px;
}
.day {
    font-size: 10px;
    border: 1px solid #d6d6d6;
    margin-top: 12px;
    padding: 10px 20px;
}
.day span {
    color: #b22c00;
}

header {
    height: 220px;
}
.header-navi {
    position: absolute;
    top: 130px;
    border: 1px solid #6cc;
    border-radius: 6px;
}
.header-navi li {
    display: block;
    width: 182px;
    float: left;
}
.header-navi a {
    color: #fff;
    font-weight: bold;
    background-color: #6cc;
    display: block;
    text-decoration: none;
    border-left: 1px solid #71c9c7;
    border-right: 1px solid #99e1df;
    text-align: center;
    padding: 20px 25px;
}
.titleJa {
    font-size: 14px;
}
.titleEg {
    font-size: 10px;
}
.header-navi a:hover {
    opacity: 0.8;
}


.main {
    float: right;
    width: 640px;
}
.menu {
    float: left;
    width: 260px;
}
.title1 {
    border: 1px solid #6cc;
    border-radius: 6px;
    background-color: #6cc;
    padding: 16px;
}
.title1 h2 {
    font-weight: bold;
    color: #fff;
}
.list1 {
    background-color: #f6f6f6;
    border: 1px solid #6cc;
}
.list1 li {
    list-style-position: inside;
    list-style-type: "◆";
    border-bottom: 1px solid #6cc;
}
.list1 a {
    color: #000000;
    display: block;
    text-decoration: none;
    font-size: 14px;
}
.list1 a:hover {
    color: #6cc;
}

.title2 {
    border: 1px solid #6cc;
    border-radius: 6px;
    background-color: #6cc;
    padding: 16px;
}
.title2 h2 {
    font-weight: bold;
    color: #fff;
}
.list2 {
    background-color: #f6f6f6;
    border: 1px solid #6cc;
}
.list2 li {
    list-style-position: inside;
    list-style-type: "◆";
    border-bottom: 1px solid #6cc;
}
.list2 a {
    color: #000000;
    display: block;
    text-decoration: none;
    font-size: 14px;
}
.list2 a:hover {
    color: #6cc;
    opacity: 0.8;
}

article {
    width: 640px;
    height: 420px;
    background-color: #fff;
    margin-top: 20px;
}

4 自分で調べたことや試したこと
display: inline;
5 使っているツールのバージョンなど補足情報
visual studio code

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

回答1件

ベストアンサー

.list2 a {
color: #000000;
display: block;
text-decoration: none;
font-size: 14px;
}

↑のaタグのdisplay: block;をdisplay: inline;にするとマーカーと同じ行に表示ができます。

ただリンク範囲が文字の部分のみになってしまうので、<li>タグを<a>タグで囲うと、行が選択範囲となるので良いのかなと思います。

投稿2021/01/29 15:32

motoo888

総合スコア65

退会済みユーザー

2021/01/30 09:50 編集

回答して頂きありがとうございました。リストマーカーの位置を変更できました。リンク範囲についても参考にさせて頂きます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

リストマーカーの位置がずれる

関連した質問