CSS基礎6(リスト,表,疑似要素)

WEB基礎

list-style-type

リストの頭の装飾を決める。「none」で使って横並びにして、項目やメニューを作ったりすることが多い。

listはもともとblock。これをdisplay: inlineに指定することで、文字幅のみになる。

margin-bottom: 30px;
background-color: #ffffff;
border-collapse: collapse;
/*collapseはセルの罫線をくっつける。separateはセルとセルの間を放す*/

疑似クラス・疑似要素

よく使う疑似要素:before,after。「::」でつなげる。
contentは「””」で中身書ける。

記述意味
要素名:link未訪問のリンク
要素名:visited訪問済のリンク
要素名:hoverカーソルが乗っている要素
要素名:activeクリック中の要素
要素名:nth-child(n)n番目の子となる要素(nは数式可能)
要素名:nth-last-child(n)後ろから数えてn番目の子となる要素
要素名:nth-of-type(n)n番目の[タグtype]の要素
要素名:nth-last-of-type(n)後ろから数えてn番目の要素
よく使う疑似クラス

記述例

p.example::before {
    content: "要素の直前にコンテンツを追加";
    color: # ff0000;
}

CSSで作るリストデザイン38選!オシャレな箇条書きを実現

CSSでcontentに特殊文字を入れる場合は16進数法で記入すること!

タイトルとURLをコピーしました