見出し画像

リストとナビゲーションのスタイリング

リストの先頭につく図形や数字の指定

li{list-style-type:種類;}

代表的なlist-style-typeプロパティの種類

none/*なし*/
disc/*黒丸*/
circle/*白丸*/
square/*黒四角*/
decimal/*数字*/
cjk-ideographic/*漢数字*/
decimal-leading-zero/*0から始まる数字*/
lower-roman/*小文字のローマ数字*/
upper-roman/*大文字のローマ数字*/
lower-greek/*小文字のギリシャ文字*/
lower-alpha/*小文字のアルファベット*/
lower-latin/*小文字のアルファベット*/
upper-alpha/*大文字のアルファベット*/
upper-latin/*大文字のアルファベット*/
georgian/*グルジア語*/
hebrew/*ヘブライ語*/
hiragane/*ひらがな*/
hiragana-iroha/*ひらがな(いろは順)*/
katakana/*カタカナ*/
katakana-iroha/*カタカナ(イロハ順)*/

リストマーカーを画像にする

li{list-style-type:url(画像の場所/ファイル名)}
例 li{list-style-type:url(../images/mark.jpg)}

定義リストの装飾

HTML

<body>
<dl>
<dt>2019.07.28</dt>
<dd>お盆期間の営業について</dd>
<dt>2019.6.25</dt>
<dd>意見交換会を開催しました</dd>
</dl>
</body>

CSS

dt{
float:left;
clear:left;
margin-right:10px;
}


ナビゲーションを装飾する

a{color:色の指定;}
*疑似クラスa:link{color:色の指定}よりも文字数を少なくできるためこちらを使う

アニメーションによる変更を施す

セレクタ{transition:アニメーションを加えるプロパティ名 変化の時間と単位 変化の種類;}
記述例 a{transition:color 0.2s linear;}


時間指定の単位

s:second(秒)
ms:mili second(1/1000秒)

変化の種類と指定


default:変化なし
ease:開始と終了時は穏やかに変化
linear:開始から終了時まで一定に変化
ease-in:開始時は穏やかに変化
ease-out:終了時は穏やかに変化
ease-in-out:開始と終了がかなり穏やかに変化

リンク要素の装飾を外す


a{text-decoration:値;}
text-decorationプロパティの値
none:装飾をつけない(初期値)
underline:テキストに下線をつける(リンク要素の場合はこちらが初期値)
overline:テキストに上線をつける
line-through:テキストに打ち消し線をつける

マウスオーバー時の透過処理

セレクタ{opacity:透明度;}

リンク要素の性質をブロックレベルに変更する

セレクタ{display:block;}
/*a要素をブロックレベルにすることによりa要素のボックスモデルが親要素の中に収納されるため、意図しない空白が生じにくくなりレイアウトが崩れにくくなる。navを作成する際のa要素はブロックレベルにすること*/

HTML

<body>
<nav id="global_navi">
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="course.html">講座案内</a></li>
<li><a href="works.html">作品紹介</a></li>
</ul>
</nav>
</body>

CSS

#global_nav ul{
list-style-type:none;
margin:0;
padding:0px;
display:flex;
border-left:1px solid #cccccc;
}

#global_nav ul li{
border-right:1px solid #ccccc;
}

#global_nav ul li a{
display:block;
padding:6px 20px

ぱんくずリストを作成する

HTML

<body>
<ol class="breadcrumb">
<li><a href="/l">トップページ</a></li>
<li><a href="/">ご利用案内</a></li>
<li><a href="/">注意事項</a></li>
</ol>
</body>

CSS

ol.breadcrumb{
margin:0;
padding:0;
list-style-type:none;
display:flex;
}
ol.breadcrumb li::after
content:">"
margin:10px;
}
ol.breadcrumb li:last-child::after{
content:none;
}

この記事が気に入ったらサポートをしてみませんか?