CSSのセレクタ

セレクタによる操作

CSSはセレクタという指定方法で特定の要素を指定できる

一つの要素を指定

タグ名をそのまま指定する

body {

    /* スタイルを指定 */

}

複数の要素を指定

カンマで複数の要素を指定する

h1, h2 {

    /* スタイルを指定 */

}

特定の要素の子要素を指定

スペースで子要素を指定する

ol li {

    /* スタイルを指定 */

}

フォントの指定

基本的な指定方法

font-family: ‘フォント名(優先度1)’, ‘フォント名(優先度2)’;

デバイスにインストールされているフォント

• MacOS: Font Book で確認
• Windows: フォント設定 で確認

body {

    font-family: “游ゴシック体”, “YuGothic”, “游ゴシック”, “Yu Gothic”, sans-serif;

}

• sans-serif: セリフが無い書体 = ゴシック体など
• serif: セリフがある書体 = 明朝体など

※font-familyでこれらが指定されたときは、一致するデフォルトのフォントが利用される

Webフォント

Web上に公開されているフォントデータをダウンロードして利用する

例： Google Fonts https://fonts.google.com/?subset=japanese

@import url(‘https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap’);

body {

    font-family: ‘M PLUS Rounded 1c’, sans-serif;

}

※WebフォントはLICENSEを意識して利用しましょう

レイアウト調整

• Chromeを使った調整
• 余白marginと詰め物padding
• marginとpaddingの値の指定方法
• marginとpaddingの値の単位
• idとclass
• 非表示にする

Chromeを使った調整

Webページで、右クリックして「検証」をクリックすると、表示しているHTMLやCSSを画面上で変更できる
※実際のファイルは更新されない

• styles: 選択したタグに影響があるスタイルを確認できる
• computed: 最終的に適用されたスタイルを確認できる

余白(margin)と詰め物(padding)

• marginは要素の外側と最低限確保したい距離のこと
• paddingは要素の内側のコンテンツとの距離のこと

書き方の例

p {

    margin: 1px;

    padding: 2px;

}

div {

    margin-top: 3px;

    padding-left: 2px;

}

marginとpaddingの値の指定方法

marginとpaddingの値の単位

• px
  • 読み方：ぴくせる
  • 1px = ディスプレイの1つのドット分
• em
  • 読み方：えむ
  • 親要素のフォントサイズと同じ
  • デフォルトのフォントサイズの場合は16px
  • 1em = 16px(デフォルトのフォントサイズの場合)

絶対に変えたくない値の場合はpx、フォントサイズに合わせて相対的に変更したい場合はemを使う

idとclass

• id: HTML文書1つにつき1つのみしか同じものが無いもの
• class: 多数の要素にまたがって指定可能なもの

<div id=”id-sample”>

  <p class=”class-sample”></p>

  <div class=”class-sample”></div>

  <p></p>

</div>

/* id=”id-sample”が指定されている要素*/

#id-sample {

    /* スタイルを指定 */

}

/* すべてのclass=”class-sample”が指定されている要素 */

.class-sample {

    /* スタイルを指定 */

}

/** pタグのclass=”class-sample”が指定されている要素のみ */

p.class-sample {

    /* スタイルを指定 */

}

非表示にする

タグを画面上に表示しないときは以下を使う

div {

    display: none;

}

※上記をブロックレベル要素に指定すると、なかったものとして扱われます。
ただ非表示にしたい場合はvisibilityを使ってください。

文字の装飾

ラインを引く

span {

    border-bottom: solid #1e366a 1px;

}

リストのスタイルを変更する

li {

    list-style: upper-alpha;

}

AやB,1や2などのラベルをliタグの要素の中に定義する場合は以下を指定する

li {

    list-style-position: inside;

}

文字の太さを変更する

span {

    font-weight: bold;

}

色を変更する

span {

    color: #f05959;

}

擬似クラスによる装飾

特定の状態になったときに、CSSのスタイルを適用することができるものです。
具体的な種類は以下を参考してください。

例

/*

 * リストにマウスをおいたときだけスタイルが変わる

 */

ol.answers li:hover {

    /** 枠線が表示される */

    border: solid #1e366a 0.1em;

    /* 枠線の太さ分だけpaddingを調整する */

    padding: 0.9em;

    /* 背景色を変化させる */

    background-color: #e5ecfc;

    /* マウスのポインタを変化させる */

    cursor: pointer;

}