sit in a circle and chat happily

ＣＳＳ　５日目

投稿日：2021-10-28
更新日：2022-03-24
HTML・CSS

第１４章：リストのスタイルを定義

リストのスタイルを定義

リストのデフォルトデザイン

●番号なしリスト
　ul要素の上下にmargin、左にマーカー表示用のpaddingがあらかじめ設定されている

●番号つきリスト
　ol要素の上下にmargin、左にマーカー表示用のpaddingがあらかじめ設定されている

●定義リスト
　dl要素の上下にmargin、dd要素の左にマージンがあらかじめ設定されている

このデフォルトデザインを変更する際はCSSを記述する

開始番号を変更するstart属性

　ol要素にstart属性を記述して変更できる

<ol start="5">
  <li>Windows</li>
  <li>Macintosh</li>
  <li>Linux</li>
</ol>

連番を変更するvalue属性

　li要素にvalue属性を記述して変更できる
　次の項目は変更した番号から連番になる

<ol>
  <li>Windows</li>
  <li value="5">Macintosh</li>
  <li>Linux</li>
</ol>

リストマーカーの種類を定義する：list-style-type

list-style-type: マーカーの種類;
list-style-type
ul {
  list-style-type: circle;
}

ol {
  list-style-type: upper-roman;
}
circle：白丸
upper-roman

リストマーカーの画像を定義する：list-style-image

list-style-image: url（画像の場所）;

list-style-typeとlist-style-imageを同時に指定すると、list-style-imageが優先される

ul {
  list-style-type: circle;
  list-style-image: url(img/icon00.png);
}

※list-style-imageを使ったマーカー画像はサイズ調整や位置調整が難しいため
　background（背景画像）を使用することが多い

リストマーカーの位置を定義する：list-style-position

list-style-position: マーカー位置の値;

※list-style-positionプロパティはマーカー位置を外側にするか、内側にするか定義することができる（padding領域にするか、コンテンツの内側か）

代表的な値解説・記述例
outside（初期値）コンテンツ領域外にマーカーを表示
insideコンテンツ領域内にマーカーを表示
list-style-position
list-style-position: inside（コンテンツ領域内）

リストマーカーを一括定義する：list-style

list-style: マーカーの種類もしくは画像 マーカー位置の値;

「list-style-type」の指定を文字数の少ない「list-style」で省略することが多い

リストのインデントを定義する：padding-left

padding-left: 左右余白の値;

リストマーカー画像を背景画像で定義する

※list-style-imageを使ったマーカー画像はサイズ調整や位置調整が難しいため
　background（背景画像）を使用することが多い

①まずはul要素を定義

  1. マーカーを非表示
  2. 左のpaddingを0にする
ul {
  list-style: none;
  padding-left: 0;
}

②その次にli要素を定義

  1. 背景画像を定義
  2. 〃サイズ調整
  3. 〃繰り返しなし
  4. 〃表示位置の左内余白をとる
  5. 〃位置調整
    　　　5～7は検証ツールを使用するといい
li {
  background-image: url(img/icon01.png);
  background-size: auto 1em;
  background-repeat: no-repeat;
  background-position: 0 0.2em;
  padding-left: 1.5em;
}

※「list-style: none;」は使用頻度が高い

●セレクタ「ul li」で子孫セレクタul要素内にあるli要素にのみデザインを反映させることができる

左）liで指定した時はolにも反映されてしまってる　右）ul内のliにのみ反映させた
ul li {
  background-image: url(img/icon01.png);
  background-size: auto 1em;
  background-repeat: no-repeat;
  background-position: 0 0.2em;
  padding-left: 1.5em;
}

アイコン素材サイト

ICOOON MONO

FLAT ICON DESIGN

第１５章：テーブルのスタイルを定義

テーブルのスタイルを定義

●文字関係の定義は「継承される」

table要素に定義した「文字サイズ」は子要素（thやtd）にも反映される
親要素に定義したスタイルが子孫に受け継がれることを「継承」と呼ぶ
　※文字・文章関係

●ボックス関係の定義は「継承されない」

table要素に定義した「枠線」は子要素（thやtd）には反映されない
そのため、th要素とtd要素であらためて「枠線」を定義しないとダメ

「継承」を使うとCSSを簡潔に記述できる

テーブルの枠線を定義：border

border: 線種の値（必須） 線幅の値 色の値;

borderプロパティを使うと複数の値を半角スペースで区切りながら一括指定できる
記述順は自由

table {
  border: solid 1px #333;
}

th {
  border: solid 1px #333;
}

td {
  border: solid 1px #333;
}

テーブルの枠線隙間を定義する：border-collapse

border-collapse: 枠線間隔の値;

border-collapseプロパティはtable要素に対して定義する
（テーブル全体に定義される）

separate（初期値）隣接する枠線の間隔をあけて表示
collapse隣接する枠線の間隔を重ねて表示
table {
  border: solid 1px #333;
  border-collapse: collapse;
}
collapseで枠線の間隔を潰した結果

テーブルの文字サイズを定義する：font-size

font-size: 文字サイズの値;

テーブルの背景色・文字色を定義：background-color，color

background-color: 色の値;
color: 色の値

文字色の時は「font～」の記述にならないので注意

※td要素の背景色はデフォルト「透明」になっているため、body要素に色が入ると
　透過してしまうので＜background-color>を定義しておく

td {
  border: solid 1px #333;
  font-size: 25px;
  background-color: #fff;
}

セル余白を定義する：padding

padding: 内余白の値;

paddingプロパティはth要素、td要素に対して定義する

セル内の横方向行揃えを定義する：text-align

text-align: 行揃えの位置;

th要素の初期値は「center」、td要素の初期値は「left」

代表的な値解説・記述例
left左揃え
center中央揃え
right右揃え
justify最終行を除いて両端揃え
text-align

セル内の縦方向行揃え位置を定義する：vertical-align

vertical-align: 行揃えの位置;
代表的な値解説・記述例
top上揃え
middle中央揃え
bottom下揃え
vertical-align

テーブル幅を定義：width

width: 幅の値;

テーブル幅やセル幅を指定できる
初期値は「auto」、中のコンテンツに応じて幅が可変し、親要素の幅を超えることはない

テキストの折り返し方法を定義する：white-space

white-space: 折り返し方法の値;

widthプロパティで指定した幅を超えた場合、幅指定は無視される
見出しセルを自動改行したくないときに使用する＜white-space: nowrap;＞

代表的な値解説・記述例
nomal（初期値）連続する半角スペースやタブ、改行を１つの半角スペースとして表示し、要素の大きさが指定されている場合は、その大きさに応じて自動的に改行する
nowrap連続する半角スペースやタブ、改行を１つの半角スペースとして表示し、要素に大きさが指定されていても自動改行しない
pre連続する半角スペースやタブ、改行をそのまま表示し、要素に大きさが指定されていても自動改行しない
white-space

はみ出た部分の定義：overflow

overflow; 横と縦の値;
overflow-x; 横の値;
overflow-y; 縦の値;

overflowを有効にするためには幅や高さを指定するか、white-spaceプロパティに
「nowrap」を指定しなければならない

代表的な値解説・記述例
visible（初期値）はみ出たコンテンツが次以降のコンテンツと重なって表示される
スクロールバーは表示されない
hiddenはみ出たコンテンツは非表示
スクロールバーは表示されない
scrollはみ出たコンテンツはスクロールバーを使って表示
スクロールバーが常に表示される
autoはみ出たコンテンツはスクロールバーを使って表示
コンテンツがはみ出た時のみスクロールバーを表示する
overflow
.scrollbox {
  /* 表示領域の幅 */
  width: 600px;
  /* はみ出た時の扱い */
  overflow-x: auto;
}

テーブルの表示方法を定義：table-layout

table-layout: 表示方法;
代表的な値解説・記述例
auto（初期値）自動レイアウト
fixed固定レイアウト
table-layout

テーブル内のセル幅の表示方法を指定する
初期値「auto」の場合、テーブル全体を読み込んだ後にセル内の内容を元にセル幅（列幅）を決定する。セルを指定した値どおりに表示されないことがある

「fixed」を指定した場合、指定した各列のセル幅で表示される
基本的に１行目の各セルにwidthプロパティを使って幅を指定する
幅を指定していないセル（列）は残りの幅を均等に自動割振りされる

はみ出た内容が非表示が非表示の時に省略文字で知らせる：text-overflow

text-overflow: 省略文字の設定;
代表的な値解説・記述例
clip（初期値）省略文字を表示しない
ellipsisはみ出たテキストがあることを省略文字を使って知らせる
text-overflow
text-overflow: ellipsis

（補足）よく使う手法

●テーブル内の特定のセルを目立たせたい

CSSでクラスを作成しておく

table .pickup {
  color: red;
  background: #ffc;
  font-size: 1.2em;
  font-weight: 700;
}

HTMLで目立たせたいセルにクラス名を付与する

 <tr>
   <th>1</th>
   <td>ブラジル</td>
   <td>2,609,040</td>
   <td>43,484</td>
   <td class="pickup">33.1%</td>
 </tr>

★ここまでがHTML・CSSの基本★

カテゴリー
ブログ一覧

コメントは受け付けていません。