バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[CSS]リストマーカーの位置

先週雪が降ったときは、昨年の大雪を思い出してドキドキしましたが、あまり大雪にはならずにすんでほっとしたスタッフ「ほ」です。

さて、今日は受講生の方からいただいた質問がありましたので、ご紹介です。

HTMLでリストのマークアップを行うと、各リスト項目の先頭にマーク(リストマーカーといいます)が自動的に表示されます。

普段はあまり意識しないのですが、このリストマーカーはli要素が持っているボックスの外側についています。※厳密にはブラウザによって異なったりもしますが…

上記は、li要素を見やすく赤いボーダーをつけた例です。リストマーカーがボックスの外側にあるのがわかると思います。

レイアウトの都合などで、リスト周りから余白をなくした場合、リストマーカーが親ボックスの外側に飛び出してしまいます。

リストのul要素に再び余白を設定することで、リストマーカーを親ボックスの中に入れることができますが、CSSで以下の指定を行うと、リストマーカーをli要素の内側に移動させることができます。

li { list-style-position:inside; }

ただし、一点だけ気をつけたいのが、リスト内容が長文になる場合です。

2行目の先頭位置がリストマーカーの下に流れ込んでしまいます。

リストマーカーが外側にある場合は、インデントをかけたようにキレイに文字の先頭位置が揃います。

リストをどのように見せたいのか?で使い分けましょう。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

The following two tabs change content below.
アバター画像

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。グラフィック制作の流れを体験していただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ