スタート!CSS入門

マーカーの位置

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
リストマーカーの位置を指定するには、list-style-positionプロパティを使います。ここでは、list-style-positionプロパティの使い方について紹介します。
講師:
03:45

字幕

リストマーカーの位置を指定するにはlist-style-position プロパティを使います。このレッスンでは list-style-positionプロパティの使い方について紹介します。list-style-position プロパティに使える値は「 inside 」「 outside 」の各キーワードです。「 inside 」はリスト項目を構成するマーカーボックスを主要ブロックボックスの内側に含めます。反対に「 outside 」は外側に配置します。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザにはリストが表示されています。list-style-position プロパティのデフォルト値は「 outside 」ですので現在のリストマーカーの位置は主要ブロックボックスの外側に配置されているはずです。これを Google Chrome のデベロッパーツールを使って確認してみましょう。他の PC 向けの主要なウェブブラウザでも同じようにデベロッパーツールや開発者向けツールを使って確認することができます。ここでは Google Chrome を使います。 メニューボタンから「ツール」「デベロッパーツール」をクリックしてデベロッパーツールを起動します。Google Chrome のデベロッパーツールでは「 Elements 」タブを使って今ウェブブラウザで表示しているそれぞれの要素の状態についてマウスでロールオーバーしながら状態を確認することができます。ここでは ol 要素の中にある li 要素、リスト項目にマウスをロールオーバーしてみます。するとマーカーに当たる連番の部分、ここでは数字の1から9の連番になっている部分、こちらがハイライトされた li 要素から外側に配置されていることが分かります。これを内側に変更してみましょう。一旦デベロッパーツールを閉じます。それでは CSS を記述していきます。ol 要素に対してlist-style-position プロパティを設定します。ここでは値を「 inside 」内側に設定します。ここではデベロッパーツールを使いますので一旦ウェブブラウザを再読込します。再度デベロッパーツールを起動しましょう。メニューボタンから「ツール」「デベロッパーツール」を選んでデベロッパーツールを起動します。再度先ほどと同じ li 要素に対してマウスをロールオーバーすると、先ほどと違ってマーカーが li 要素の内側に配置されていることが分かります。 これによって list-style-position プロパティでマーカーボックスを主要ブロックボックスの内側に配置することができました。このレッスンではリストマーカーの位置を指定するlist-style-position プロパティの使い方について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。