Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
「Cascading Style Sheet」の略で、Webページの見た目を変更するための言語です。
HTMLへの適用
CSSファイルを読み込んで適用
1つのCSSファイルを複数のHTMLファイルに読み込ませることができるので、CSSを管理しやすく、修正が入った場合も1つのCSSファイルを修正するだけで済む。
HTMLファイルの<head>内に<link>タグを使ってCSSファイルを指定します。
HTMLファイル<head>内に<style>タグで指定する
<head>内に<style>で指定する場合以下の3つの方法で適用する部分を指定できます。
- classで指定
- 要素すべて
- idで指定
<head>
<style>
#midori {
font-size: 1.5em;
color: green;
}
.sorairo {
font-size: 0.5em;
color: skyBlue;
}
div {
color: orange;
}
</style>
<meta charset="utf-8">
<title>ＣＳＳを理解する</title>
</head>タグの中にstyle属性を指定する
文章の一部を<span style="font-size:2em; color:red;">2倍サイズの赤</span>に変えますIDとクラス
IDはページ内で同じID名を複数使うことができません。
クラスはページ内で何度でも使える
CSSではファイル内で下の方に書かれている指定の方が優先される。
プロパティ
CSSのobject-fitプロパティは画像をどのようにはめ込むかを決めるものです。object-fitを使えば、決められた大きさにフィットするように画像の一部をトリミング（切り抜き）したり、リサイズしたりすることが可能です。
object-fit:cover
画像の縦横比を保ったまま正方形に切り抜くことができる。object-fitは「150 × 150pxの枠に画像をどうはめこむか」を決めており、coverという値は「画像の比率を保ったまま、枠が埋まるように中央配置して」と指示する
object-fit:contain
切り抜かれずに、リサイズされておさまる
object-fit:cover
縦横比を保ち、はみ出る部分はトリミング
object-fit:none
リサイズせず元の画像の大きさで表示
bject-fitは、自分のイメージ通りのサイズに画像をはめこみたいときに便利です。
文字の太さを変える
1~1000の任意の数値で指定することができます。
標準の太さにする
font-weight:normal;
太くする
font-weight:bold;| font-weight | |
|---|---|
| normal | 標準の太さ |
| bold | 太字 |
| lighter | 一段階細く |
| bolder | 一段階太く |
フォントの種類を変える
font-familyプロパティを使ってフォントの種類を指定します。
フォント名にスペースがある場合はダブルクォーテーションで囲みます。
h1{
font-family:serif;
}| font-family | |
|---|---|
行の高さを指定する
| line-height | |
|---|---|
| font-style | |
文章を揃える
テキストを揃える位置を指定します。
| text-align | |
|---|---|
| left | 左揃え |
| right | 右揃え |
文字に色を付ける
背景に色を付ける
| background-color | |
|---|---|
h1{
background-color:#ffd800;
}背景に画像を設置
| background-image | |
|---|---|
背景画像の繰り返し表示
文字の大きさ
h1{
color:#ff0000;
font-size: 10px;
}
