
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
ITコラム
2017.05.13
要点を分かりやすく列挙する場合など、リストはWebサイトでよく使われるHTML要素です。
そして、CSSではリストに関するプロパティが用意されています。
今回は、リスト用のCSSプロパティをまとめたいと思います。
また、displayプロパティでも、リストのような表示を指定することができます。
displayプロパティでリストを作成する際の指定方法等については、CSS【 display 】2 ~ list-itemをご覧下さい。
1.リスト用のCSSプロパティ
2.list-style-typeプロパティ
3.list-style-positionプロパティ
4.list-style-imageプロパティ
リスト用のCSSプロパティは、次の通りです。
list-style-type リストマークの種類を指定
値:disc(デフォルト)、none、circle、square、decimal、lower-roman、upper-roman、他
(list-style-imageを指定する場合は無効)list-style-position リストマークの位置を指定
outside(デフォルト)、inside、hanginglist-style-image リストマークに画像を指定
値:none(デフォルト)、url(“画像ファイルのURL”)list-style ショートハンドプロパティ
複数の値を半角スペースで区切ってまとめて指定(順不同)
list-style-typeプロパティは、リストマークの種類を指定する際に使用するプロパティです。
li要素について、li { list-style-type : 値 } のように指定します。
list-style-typeプロパティで値を指定すると、次のようなリストマークが付きます。
none
- リストマークなし
disc
- 黒丸(デフォルト)
- 黒丸(デフォルト)
- 黒丸(デフォルト)
circle
- 白丸
- 白丸
- 白丸
square
- 四角
- 四角
- 四角
decimal
- 数字(ol要素でのデフォルト)
- 数字(ol要素でのデフォルト)
- 数字(ol要素でのデフォルト)
decimal-leading-zero
- 先頭に0が付いた数字
- 先頭に0が付いた数字
- 先頭に0が付いた数字
lower-roman
- ローマ数字(小文字)
- ローマ数字(小文字)
- ローマ数字(小文字)
upper-roman
- ローマ数字(大文字)
- ローマ数字(大文字)
- ローマ数字(大文字)
lower-greek
- ギリシャ文字(小文字)
- ギリシャ文字(小文字)
- ギリシャ文字(小文字)
lower-latin
- アルファベット(小文字)
- アルファベット(小文字)
- アルファベット(小文字)
lower-alpha
- アルファベット(小文字)
- アルファベット(小文字)
- アルファベット(小文字)
upper-latin
- アルファベット(大文字)
- アルファベット(大文字)
- アルファベット(大文字)
upper-alpha
- アルファベット(大文字)
- アルファベット(大文字)
- アルファベット(大文字)
hebrew
- ヘブライ数字
- ヘブライ数字
- ヘブライ数字
armenian
- アルメニア数字
- アルメニア数字
- アルメニア数字
georgian
- グルジア数字
- グルジア数字
- グルジア数字
cjk-ideographic
- 漢数字
- 漢数字
- 漢数字
cjk-earthly-branch
- (子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥..)
- (子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥..)
- (子 丑 寅 卯 辰 巳 午 未 申 酉 戌 亥..)
cjk-heavenly-stem
- (甲 乙 丙 丁 戊 己 庚 辛 壬 癸..)
- (甲 乙 丙 丁 戊 己 庚 辛 壬 癸..)
- (甲 乙 丙 丁 戊 己 庚 辛 壬 癸..)
hiragana
- ひらがな(あいうえお順)
- ひらがな(あいうえお順)
- ひらがな(あいうえお順)
hiragana-iroha
- ひらがな(いろは順)
- ひらがな(いろは順)
- ひらがな(いろは順)
katakana
- カタカナ(アイウエオ順)
- カタカナ(アイウエオ順)
- カタカナ(アイウエオ順)
katakana-iroha
- カタカナ(イロハ順)
- カタカナ(イロハ順)
- カタカナ(イロハ順)
数字、アルファベット、あいうえお等のリストマークは、もともとol要素(番号付きリスト)のためのものですが、ul要素内のli要素でも指定できます。
但し、ol要素特有のstart属性やreversed属性などは、ul要素では使用できません。
list-style-positionプロパティは、リストマークの位置を指定する際に使用するプロパティです。
list-style-positionプロパティは、次の通り外側か内側かで指定します。
outside リストマークを、li要素のボックスの左端より外側に配置(デフォルト) inside リストマークを、li要素のボックスの左端より内側に配置
外側と内側の違いは、次の通りです。
ソースは次の通りです。
(CSS) ul#sample { border:solid 1px #ccc; padding:0; margin:0} ul#sample li { padding:0; background:#EEE; margin:1em 1em 1em 2em} ul#sample li:nth-child(2) {list-style-position:inside} (HTML) <ul id="sample"> <li>outside <li>inside </ul>
比較しやすいように、li要素の背景に色を付けています。
insideは、リストマークがli要素のボックス(色付け部分)の内側に表示され、outsideは、外側に表示されます。
list-style-imageプロパティは、画像をリストマークに指定できるプロパティです。
list-style-imageプロパティの値は、次の通りです。
none 画像無し(デフォルト) URL 画像ファイルのURLを指定
画像がある場合とない場合を並べると、次のようになります。
ソースは次の通りです。
(CSS) ul#sample { border:solid 1px #ccc; padding:0; margin:0} ul#sample li { padding:0; margin:1em; list-style-type:circle; list-style-position:inside} ul#sample li:nth-child(2) { list-style-image: url("img/mark.jpg")} (HTML) <ul id="sample"> <li>画像なし <li>画像あり </ul>
li要素全体に、list-style-typeプロパティで白丸のリストマークを指定していますが(list-style-type:circle;)、list-style-imageプロパティの指定がある場合は、そちらが優先されます。
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.