線の引き方
- 指定した要素に対して線を引く指定を行う
- borderプロパティで指定すると4辺が囲まれる
- 個別で指定することも可能
見出しのh1などのタグに指定すると、ボックス要素に指定することになるので画面幅いっぱいに適応される。
親要素の幅を指定するか、要素ごとに幅を指定することで変更できる。
下の例はすべて「width: 400px;」で幅を指定している。
border-widthプロパティ
border-width: 1px;
border-width: thick;
border-width: 1px 4px 8px 12px;
border-styleプロパティ
border: 4px double;
border: 4px dashed;
border: 4px dotted;
border: 4px groove;
border: 4px ridge;
border: 4px inset;
border: 4px outset;
border-style: double dotted solid ridge;
border-colorプロパティ
border-color: #0bd;
border-color: tomato;
border-color: tan #0bd tomato #000;
borderプロパティ（まとめて表記）
border-bottom: 2px solid #0bd;
border: 5px dotted tomato;
リストを修飾する
list-style-typeプロパティ
- HTMLの基礎
- CSSの基礎
- デザインの基礎
リストマーカーを表示しない
「list-style-type: none;」とするとリストマーカーが非表示になる
ナビメニューなどを作るときによく使う手法のひとつ。
list-style-positionプロパティ
outsideの場合
リストマーカーが要素の幅に含まれない。要素の外に表示される。
insideの場合
リストマーカーが要素の幅に含まれる。レイアウトを維持したままリストを使うことができる。
- HTMLの基礎
- CSSの基礎
- デザインの基礎
リストマーカーに画像やアイコンを表示する
リストマーカーに画像を表示させることは可能だが
Font Awesomeを使って表示するほうがあとから編集しやすい。
アイコンで設定すると、色やサイズの変更をCSSのみで行えるようになる。
Font Awesomeの導入方法
HTMLファイルのheadタグ内にFont AwesomeのCDNファイルを読み込ませるリンクを記述する。
iタグのリンクをコピーしてhtml内に貼り付けて使う。
もしくはCSSファイルに「li::before」として疑似要素を作って表示する。
そのときは「list-style-type: none;」でリストマーカーを非表示にしておく。
Font Awesomeの実用例
この例ではliタグにクラスを指定して、liタグの前に表示させている。