セレクタによる操作
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;
}
