CSS｜Agile育成ブログ

「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;
}

CSS