スタート!CSS入門

マーカーの画像

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

ぜひご覧ください。

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

字幕

リストマーカーに画像を指定するにはlist-style-image プロパティを使います。このレッスンでは list-style-imageプロパティの使い方について紹介します。list-style-image プロパティに使える値は「 URL 」と「 none 」キーワードです。「 URL 」は URL 関数で指定します。「 none 」キーワードは背景画像を使わないという指定です。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ここでは ol 要素以下のマーカーに画像を指定してみましょう。ウェブブラウザを見ると ol 要素については現在1から9の数字の連番がマーカーに設定されています。マーカーに使用する画像はあらかじめ準備してあります。「 list.png 」という画像ファイルを用意していますのでダウンロードしてお使いください。それでは CSS を書いてみましょう。ol 要素に対して list-style-image プロパティを使います。画像を指定するのは URL です。URL 関数の中に「 list.png 」先ほどあらかじめ用意しておいた「 list.png 」という画像ファイルを指定します。 ウェブブラウザを見るとol 要素以下のマーカーに画像ファイルが指定できていることを確認できます。なおマーカーに画像を指定するlist-style-image プロパティと種類を指定する list-style-type プロパティの両方を指定すると画像の list-style-image プロパティが優先されます。このレッスンではリストマーカーに画像を指定するlist-style-image プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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