Zenn
🧩

CSS -記事,表,リストのスタイル-

2022/05/01に公開
CSS
初心者
#
勉強記録
tech

記事のスタイル

文章のサイズ調整をします。

都合によるサイズ指定

サイズを割合で指定することができます。
以下の画像のように、水色の四角が親要素でその中に緑色の四角があるページがあったとします。

親要素にはwidthとheightそれぞれ100pxを指定し、子要素にwidthに50%をheightに70%を指定するとこうなります。

また、親要素にサイズの指定が無い場合は、その上の要素のサイズが適用され、最終的に画面の描画サイズの割合となります。

ここで、文章のサイズ調整をするためには、まず、pタグ(文章を囲っているタグ）にclass属性をつけます。
ここでは、class="content"とします。

その後、cssの方で、サイズ調整を行います。
横幅を親要素の70%に変更して、実際に書くと、以下の通りです。

.content{
width:70%;
}

また、文章を太字にするには、font-weightというCSSプロパティを使います。

基本的にboldを使うと太字のフォントとなります。
数字で表すと700と同じです。

ただし、boldを使用すると、環境によって文字の太さが変わったりすることがあります。
ですので、基本的には700を使用することをオススメします！

実際に書くとこうなります。

.content{
font-weight:700;
}

表のスタイル

表の調整をします。

枠線と背景

枠線についてはborderを、背景についてはbackgroundというCSSプロパティを使います。
例えば、背景の色を赤に変える場合は以下のように書きます。

background: red;

また、borderやbackgroundはまとめて記述することができます。
例えば、枠線を太さ10px、線のタイプsolid、色redに指定する場合、

border-width: 10px;
border-style: solid;
border-color: red;

というプログラムを

border: 10px solid red;

と、スペースで区切ってまとめることで、格段に記述量を減らすことができます。

この2つ以外にもまとめて記述することができるCSSプロパティはいくつかあるので、別の機会に記事にしようと思います！

おまけですが、枠線の隙間がなくなるようにするにはborder-collapseというCSSプロパティにcollapseを指定します！

複数のセレクタ

セレクタは一度に複数の条件を付けることができます。
複数の条件を付けることで、記述量を減らすことができます。

例えば以下のようなCSSがあるとします。

.elem1 {
  text-align: center;
  font-size: 20px
  color: red;
  }

.elem2 {
  text-align: right;
  font-size: 20px
  color: red;
}

これをかぶっているところをまとめて記述すると以下のようになります。

.elem1{
  text-align: center;
  }

.elem2{
  text-align: right;
  }

.elem1, .elem2{
  font-size: 20px;
  color: red;
  }

複数のセレクタを記述するときはコンマで区切ります。
また、セレクタを2つだけでなく、3つ4つとまとめることも可能です。

コンビネータセレクタ

コンビネータセレクタを使用することで、子要素だったり、隣接要素に対してスタイルを適用することができます。

コンビネータセレクタには４種類あるのですが、今回は、子孫セレクタのみ紹介します。
ここは少し複雑なので、別の記事で他の種類もまとめた深掘り記事を書こうと思っています。

  • 子孫セレクタ
    子孫セレクタはスペースによって区切られます。

例えば、HTMLに以下が書かれていたとする。（表を作るプログラム）

<table class="sales-table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>2017年</th>
                            <th>2018年</th>
                            <th>2019年</th>
                            <th>2020年</th>
                        </tr>
                        <tr>
                            <th>10~20代</th>
                            <td>380</td>
                            <td>2300</td>
                            <td>5300</td>
                            <td>1500</td>
                        </tr>
	            </thead>
</table>

ここから、子孫セレクタを活用して、CSSに以下のように書くとclass属性を持つsales-table内の全てのth要素に適用されます。

.sales-table th{
    font-weight: 700;
    background:#808080;
}

また、例えば「sales-table要素と子要素内のth要素、子要素内のtd要素に対し、まとめて
太さ 1px、線のタイプ solid、色 #000000で指定したい」となった場合は以下のように書きます。

.sales-table,
.sales-table th
.sales-table td{
border: 1px solid #000000;
}

セレクタはコンマで区切るのと、スペースで区切ってまとめるのは上記した通りですね！

リストのスタイル

リストを調整します。

リストのカスタマイズ

ul要素やol要素に付けられるマーカーを変更することができます。
リストのカスタマイズには、list-styleというCSSプロパティを使います。

表示されるマーカーはいくつかあります。
下記がマーカーを変更したときの例です。

また、noneを使えばマーカーが非表示になります。

要素の変更

HTML要素の並びは、ブロックレベル(block)要素とインライン(inline)要素の2つに分けることができます。

ブロックレベル要素は縦並びになります。
逆にインライン要素は横並びになります。

また、ブロックレベル要素はデフォルトで可能な限りの横幅をとり、さらに縦幅と横幅を指定することができます。
インライン要素はデフォルトで要素分の横幅しかとらず、さらに基本的に横幅・縦幅を指定する事ができません。

それぞれの代表的な要素は以下の通りです。

  • ブロックレベル要素
    div、h1~h6、p
  • インライン要素
    a、img、span

これは是非暗記しておきたいですね。

ブロックレベルの要素を横並びにしたい場合や、インライン要素の横幅や縦幅を変更したい場合は、CSSプロパティのdisplayを使います。

例えば、見出しを横並びにしたい場合は、

h1{
 display: inline;
 }

とすることでh1要素がインライン要素となり横並びになります。

では、基本的には横幅が指定できないインライン要素に横幅を指定したい場合はどうすればいいでしょうか。
その場合は、

span{
 display: block;
 width: 20px;
 }

とすることでspan要素はブロック要素に縦並びに横幅を指定することができます。

つまり、インライン要素をブロック要素に変換することで、横幅が指定できるようになったということですね。

また、インライン要素を横並びのまま、横幅・縦幅を指定したい場合や、ブロックレベル要素を横並びにして横幅・縦幅をそのままで指定する場合はinline-blockを使用します。

inline-blockを使用することでインライン要素のように横並びになり、ブロックレベル要素のように横幅・横幅を指定することができます。

用途に合わせて、inline、block、inline-blockを使い分けていきましょう！

Discussion