【メモ】CSSまとめ①

CSSの基本構造について(書き方3種類)

  • HTML ファイルとは別に記述する場合

　CSSファイルをHTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（<head>～</head>の間）に以下の記述を行い CSS ファイルの取り込みを行います。

<link href="CSS ファイルのパス名" rel="stylesheet" type="text/css">

セレクタ{　　　　　　　　→セレクタ：スタイル対象を指定
プロパティ:値;　　　　 　 →プロパティ：スタイル種別を指定
}　　　　　　　　　　　　→値：スタイル値を指定
/*コメント*/　　　　　　 →外部には反映されないコメント

【CSSファイルに記述】

@charset “utf-8”; 　　　　 →文字コード宣言

p{ 　　　　　　　 　　　　 →対象をタグ名で指定

color: red; 　　　　 　　 　→文字色を赤に設定

}

.class-1{ 　　　　 　　　　→ 対象をクラス名で指定

font-size: 20px; 　　　　　→フォントサイズを20pxに設定

}

#id-1{ 　　　　 　 　　 　 →対象をID名で指定

padding: 10px; 　　　　 　→まわりに10pxの空間を確保

}

  • HTML ファイル内に記述する場合

HTML ファイル内に CSS を記述する時は、HTML ファイルの head タグ内（</head>の直前が良い）に以下の記述を行います。

セレクタ{　　　　　　　　→セレクタ：スタイル対象を指定
プロパティ:値;　　　　 　 →プロパティ：スタイル種別を指定
}　　　　　　　　　　　　→値：スタイル値を指定
/*コメント*/　　　　　　 →外部には反映されないコメント

【HTMLのHEAD部に記述】

<style>　　　　　　　　　→CSSの開始

p{　　　　　　　　　　　　→対象をタグ名で指定
color: red;　　　　　　→文字色を赤に設定
.class-1{ 　　　　 　　　　→ 対象をクラス名で指定

font-size: 20px; 　　　　　→フォントサイズを20pxに設定

}

#id-1{ 　　　　 　 　　 　 →対象をID名で指定

padding: 10px; 　　　　 　→まわりに10pxの空間を確保

}
</style>　　　　　　　　　→CSSの修了

  • HTML タグにインラインで記述する場合

HTML タグにインラインで記述する時は、スタイル（style）属性を使用して以下の記述を行います。

<div style=”プロパティ:値;”>　　　→特定のタグにスタイルを設定

【HTMLのタグにstyle属性で記入】

<div style=”width: 600px; hight: 400px;”>
　　<h1 style=”font-size: 20px;”>大見出し</h1>

　　<p style=”color: blue;”>

　　　文章・・・・<br>

　　　文章・・・・<br>

　　　<span style=”color: red;”>キーワード</span>

　　　文章・・・・<br>

　　</p>

</div>

CSS：セレクタの記載方法

  • 全称セレクタ
  • 型セレクタ
  •  id セレクタ（#）
  • class セレクタ（.）
  • 子孫結合子セレクタ
  • 子結合子セレクタ（>）
  • 隣接兄弟結合子セレクタ（+）
  • 一般兄弟結合子セレクタ（~）

CSS：幅・高さの単位

  • px（ピクセル値）
  • %（要素の割合（百分率））
  • em（要素の割合）
  • rem（ルート要素の割合）
  • vw（画面の表示幅の割合）
  • vh（画面の高さの割合）
  • calc 関数（値の計算）

CSS：色の指定方法

  • カラーネーム
  • #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
  • #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
  • #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
  • rgb(r,g,b)（rgb 関数）
  • rgba(r,g,b,a)（rgba 関数）
  • hsl(h,s,l)（hsl関数）
  • hsla(h,s,l,a)（hsla関数）
  • 線形グラデーション（linear-gradient 関数）
  • 放射グラデーション（radial-gradient 関数）

コメント