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

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

ただいまの
回答率

90.99%

  • CSS

    4817questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3396questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

html、cssでリストを表のように表示したい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 178

aazzkk

score 9

web制作初心者です。
メニューなどを表示するリストを、枠線と罫線を使用し、表のように表示したいです。
完成図としては、枠・罫線ありのリストで、メニュー(リンク)に触れると背景色変更という風にしたいです。
最初は、<ul>要素にborderで枠をつけて、<li>要素にborder-bottom:で下線をつけるという風にしてました(最後の<li>は:last-childで線を消す)。
色々試してみても微妙にズレ(リンクの背景色が枠線からはみ出したり、罫線が枠線からはみ出る)が生じてしまい、うまく出来ませんでした。どなたか、良い方法がありましたら教えてください。
日々勉強しながら作っています。おかしい記述なども指摘いただければ幸いです。よろしくお願いいたします。

1/12追記
先ほど試した方法(<li>にborderをつける)でcssを編集いたしました。
罫線が重なり、触れたときの背景にもズレが生じてます。
先に申し上げました方法とは違ってますが、修正して直せましたらこの方法でいきたいと思ってます。よろしくお願いします。

1/13追記
CSS下部タグの追加、現在の状態のスクショを載せました。
引き続きよろしくお願いいたします。

イメージ説明

●HTML●

<!--サイドバー-->
  <div id="sidebar">
    <ul class="sidebar-list">
      <li><a href="#infomation">infomation</a></li>
      <li><a href="#template">template</a></li>
      <li><a href="#material">material</a></li>
      <li><a href="#bookmark">bookmark</a></li>
      <li><a href="#contact">contact</a></li>
    </ul>
    <p>サンプルサンプルサンプル</p>
    <p>サンプル2サンプル2サンプル2</p>
  </div>
<!--サイドバーここまで-->

●CSS●

body {
  font-size: 80%;
  color: rgb(120,120,100);
  font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'MS ゴシック', sans-serif;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: rgb(63,63,53);
}

a:hover {
  background-color: rgb(215,215,207);
}

p {
  margin:0;
}

/*ここからサイドバー*/
#sidebar {
  float: right;
  width: 210px;
}
.sidebar-list {
  padding: 0;
  margin: 0;
}
.sidebar-list li {
  list-style: none;
  width: 210px;
  border: dotted 1px rgb(215,215,207);
}
.sidebar-list a {
  display: inline-block;
  padding: 10px;
  margin: 0;
  width: 190px;
  text-align: center;
}
.sidebar-list li + li{
  border-top: none;
}
/*ここまでサイドバー*/
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/01/11 21:43

    borderの指定が見当たらないなど、現状のCSSでは問題が再現できません。書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。

    キャンセル

  • Kogma

    2018/01/12 16:49

    どのように「メニューに触れると背景色変更」の挙動をさせているのかコードを提示していただけますか。

    キャンセル

  • defghi1977

    2018/01/13 10:52

    ご提示の画像・CSSでは極めて色を判読しにくいです. 検証コード内の色をredやblue等の判りやすいものに変えて下さい. また, border-styleがdottedによる「見せかけの隙間」による影響を排除するため, solidに変更してその挙動を試して下さい.

    キャンセル

回答 2

checkベストアンサー

+1

とりあえず、罫線の重なりを消す方法だけ。2番目以降のliのborder-topを無しにすればOKです。
cssに下記を追加して

.sidebar-list li + li{
  border-top: none;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/13 09:43

    ありがとうございます。罫線はうまく表示できました。
    触れたら変わる背景だけ、まだ少しズレ(微妙な空白)ができてしまいます。
    スクショを追加・CSSのbody部分を追加いたしましたので、引き続きよろしくお願いいたします。

    キャンセル

  • 2018/01/13 16:17

    違ったらすみません。
    スクショを見て思ったのですが、もしかして拡大表示してますか? ブラウザのズーム機能とかで。

    キャンセル

  • 2018/01/14 18:25

    返信ありがとうございます。
    まさにその通りでした。お恥ずかしい限りです。
    全く気が付きませんでした。
    100%に戻しましたら綺麗に表示できました。
    色々ありがとうございました。

    キャンセル

0

box-sizingを使うと大体解決できます。box-sizingで調べてみてください。
あとは邪道かもしれませんがulにbackgroundで背景色を付けて要素をmarginで離して
枠線っぽく見せることもできます。marginも前後左右で重なってくれますからね。

jsfiddle

追記
空白を確認できません。原因は他にあると思います。
ソースそのままで実行した場合

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/12 16:31

    解決策をありがとうございます。
    box-sizingで調べてみて、試してみましたがやはり微妙にズレてしまいました(罫線がはみ出たり、背景色に1pxほどの小さな余白ができる)。
    box-sizingを使用する方法ではありませんが、本文の修正をいたしましたのでよければまたご覧いただけますでしょか。よろしくお願いいたします。

    キャンセル

  • 2018/01/12 17:35

    基本的にborderは重なりません。縦に並んだ要素の上下に引いた場合は
    「上の要素の下枠線」と「下の要素の上枠線」が必ずかち合ってしまいます。
    逆にいえばそれさえなんとかすればいいということです。
    「罫線がはみ出る」や「背景に1px~」は実際にコードを見ていない
    こちら側ではどうなっているかも不明ですしどうすることもできません。

    キャンセル

  • 2018/01/13 09:45

    言葉足らずで申し訳ありません。
    cssの追加と、現在のスクショを貼りましたので、お手数ですがご確認ください。
    引き続きよろしくお願いいたします。

    キャンセル

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

  • ただいまの回答率 90.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    4817questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3396questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。