Photo by
mericanadesico
リストとナビゲーションのスタイリング
リストの先頭につく図形や数字の指定
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;
}