marker-offsetとは?CSSのmarker-offsetでリストマーカーの感覚を指定する方法

今回はHTMLを書く上で欠かせないリストマーカーの間隔の変え方のお話。

CSSの【marker-offset】プロパティで思い通りにリストマーカーの間隔を決めようと思っても・・初心者のうちは

うまくリストマーカーの間隔の指定ができない!!
リストマーカーの間隔を指定しても、うまく反映されない!!

今回は、そんなCSSの【marker-offset】プロパティに関する

・基本的な使い方
・リストマーカーの間隔の変え方

について説明します。

【marker-offset】とは

【marker-offset】の読み方

【marker-offset】プロパティは、リストマーカーとリスト内容の間隔を指定するためのプロパティです。

【marker-offset】の説明

【marker-offset】プロパティは、リストマーカーとリスト内容の間隔を指定するためのプロパティですが、CSS2.1の仕様では削除されており、一般的なブラウザでもサポートされていません。

現在のところ、リストマーカーとリスト内容の間隔を指定する場合には、marginプロパティやpaddingプロパティでリストの余白を指定するのが一般的です。

【marker-offset】で利用できる値

【marker-offset】プロパティでは以下の値を使うことができます。

説明
auto 自動設定(初期値)
数値+単位 数値にpxなどの単位をつけて指定

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
Internet Explorer  非対応
Opera 非対応
Safari 非対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera  非対応
iOS版Safari 非対応
Samsung Internet 非対応

【marker-offset】の基本的な使い方

【marker-offset】の使い方

ここでは、【marker-offset】プロパティの基本的な使い方について説明していきます。

各属性値の設定の仕方も合わせて説明していきます。

HTML

CSS

      ⬇

 IE、opera、safariなど一部非対応のブラウザあり

すでに説明しましたが、CSSプロパティ【marker-offset】多くのブラウザで反映されないのでご注意ください。

 margin,paddingで設定する

上記で説明しましたが、CSSプロパティ【marker-offset】多くのブラウザで反映されません。

そこで、代わりにCSSプロパティ【margin】、【padding】を使用することをオススメします。

ここでは、【margin】、【padding】プロパティの基本的な使い方について説明していきます。

margin・・・境界線の外側の余白を指定する際に使用します。
padding・・・境界線の内側の余白を指定する際に使用します。

全ての要素は表示領域とその境界線、余白があり、この3つを合わせた領域のことをボックスと呼びます。

ボックスは共通して次のような構造になっています。

上記の図のように、表示領域の周りにはボーダーと呼ばれる境界線があり、これは【border】プロパティで表示できます。

また境界線の内側と外側は余白をとることができ、ボーダー内側の余白をpadding、外側の余白をmarginと呼びます。

この特徴を利用し、ボーダーとリストの間隔を指定してみましょう!

margin,paddingで余白を調整

HTML

CSS

      ⬇

 

このようにCSSプロパティ【marker-offset】の代わりに、【margin】、【padding】プロパティで間隔の調整ができます。

まとめ

今回は【marker-offset】プロパティの基本的な使い方を説明しました。これで、【marker-offset】プロパティを使って、リストマーカーとリスト内容の間隔を自在に設定できますね!

Webコンテンツの作成の際に、大きく役立つことでしょう。しかし、【marker-offset】プロパティが対応しているブラウザは数が少ないです。対応ブラウザを持ち合わせていない閲覧者には正しく表示されません。

その代用として、CSSプロパティ【margin】、【padding】を使用されてはいかがでしょうか?これなら簡単なコーディングで多くの閲覧者のブラウザ上で正しく表示されるはずです。

閲覧者が見やすいように、工夫してみてください!!この記事がお役に立てれば幸いです。

参考文献:http://www.htmq.com/style/marker-offset.shtml

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?