html箇条書きリストの黒丸を消すcss

「ul要素」に「list-style-type: none;」を指定して黒丸（リストマーク）を消します。

左側に空間（マークボックス）は残りますので、左パディングを「0」にして詰めます。

リンクを指定している場合は、スマートフォンでもタッチしやすいように、各項目１０ｐｘ以上の間隔を空けましょう。

箇条書きリストをリンクメニューにした状態

先ず初期の黒丸（リストマーク）のある例を記載します。

箇条書きリストにリンク「a href」を付けてリンクメニューにして、間隔はＣＳＳで１０ｐｘにします。

ＨＴＭＬソース（箇条書きリストにリンク設定）

<p>当サイトの主要メニューは以下の通りです。</p>
<div class="menu-1">
<ul>
<li><a href="http://www.gs4.jp/">ホームページ作成方法</a></li>
<li><a href="http://www.gs4.jp/
html5/">ＨＴＭＬ５</a></li>
<li><a href="http://www.gs4.jp/
css3/">ＣＳＳ３</a></li>
<li><a href="http://www.gs4.jp/
web-image/">フォトショップ・エレメンツ</a></li>
<li><a href="http://www.gs4.jp/
responsivewebdesign/">レスポンシブWebデザイン</a></li>
<li><a href="http://www.gs4.jp/
mobilefriendly/">モバイルフレンドリー</a></li>
<li><a href="http://www.gs4.jp/
wai-aria/">ＷＡＩ－ＡＲＩＡ実装方法</a></li>
<li><a href="http://www.gs4.jp/
seo/">ＳＥＯ</a></li>
</ul>
</div>

ＣＳＳソース（リンクの底は１０ｐｘの間隔を空ける）

.menu-1 li{
margin-bottom: 10px;
}

ブラウザ表示（黒丸のある状態）
上：初期の箇条書きリスト
下：リンク設定後（スマホ対応表示向け：１０ｐｘ間隔）

当サイトの主要メニューは以下の通りです。

  • ＨＴＭＬ５
  • ＣＳＳ３
  • フォトショップ・エレメンツ
  • レスポンシブWebデザイン
  • モバイルフレンドリー
  • ＷＡＩ－ＡＲＩＡ実装方法
  • ＳＥＯ

当サイトの主要メニューは以下の通りです。

黒丸（リストマーク）を消すCSS

「ul要素」に「list-style-type: none;」を指定すると黒丸（リストマーク）は消えますが、左に空間（マーカーボックスの跡）と下に少し空間があります。

ＣＳＳソース（黒丸を消す）

.menu-1 ul{
list-style-type: none;
}
.menu-1 li{
margin-bottom: 10px;
}

ブラウザ表示（黒丸を消した状態）

当サイトの主要メニューは以下の通りです。

広告

空間（マーカーボックス）の調整

マージンを「０」にすると、下の空間が適度になります。

ＣＳＳソース（マージンを０にする）

.menu-1 ul{
list-style-type: none;
margin: 0;
}
.menu-1 li{
margin-bottom: 10px;
}

ブラウザ表示（マージン０）

当サイトの主要メニューは以下の通りです。

左パディングを「０」にすると、上の「p要素（テキスト）」とぴったり揃います。

ＣＳＳソース（パディング左を０にする）

.menu-1 ul{
list-style-type: none;
margin: 0;
padding-left: 0;
}
.menu-1 li{
margin-bottom: 10px;
}

ブラウザ表示（パディング左０）

当サイトの主要メニューは以下の通りです。

更に左パディングに１０ｐｘの空白を作って、リンクを見やすくします。

ＣＳＳソース（左パディングを１０ｐｘにする）

.menu-1 ul{
list-style-type: none;
margin: 0;
padding-left: 0;
}
.menu-4 li{
margin-bottom: 10px;
}

ブラウザ表示（左パディング１０ｐｘ）

当サイトの主要メニューは以下の通りです。

ビューポート設定

「head」にビューポートを実装しました。

「head」にビューポートを実装

ＣＳＳ３ に戻る

ホームページ作成方法 TOPに戻る