スタイルシートについて - WEB制作の備忘録

(2020-04-16 復習)

CSSとは

CSS = Cascading Style Sheets = HTML言語に装飾・レイアウトをほどこすための言語

CSSの基本書式

セレクタ(どこの){プロパティ(なにを):値(どうする);}

p  { color: #F00; }

CSSをHTMLに適用

style属性で一部にスタイルを適用する
head内にstyle要素で適用する（embed）
head内にlink要素で外部CSSファイルを読み込み適用する

style属性で一部にスタイルを適用する

<p style="color: red;">文字色が赤になります</p>

head内にstyle要素で適用する（embed）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<style>
p { color: red;}
</style>
</head>
<body>
<h1>見出し</h1>
<p>文字色が赤になります</p>
</body>
</html>

head内にlink要素で外部CSSファイルを読み込み適用する

＜html＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p>文字色が赤になります。</p>
</body>
</html>

＜style.css＞

@charset "UTF-8";

p { color: red; }

CSS コメントアウト

/* 1行のコメント */

/*
複数行のコメント
*/

odnax.hatenablog.com

ベンダープレフィックス＝接頭辞 =

ブラウザベンダーが独自の拡張機能や新しい仕様を先行実装する場合に、拡張機能であることを明示した識別子のこと

-moz-      = Firefox
-webkit-   = Google Chrome、Safari
-ms-         = Internet Explorer

用語集

border = 境界線
- border: 太さ種類色;
- border-radius = 角丸にする
- border-collapse: collapse; = テーブルのセルの罫線を重ねて表示
- border-collapse: separate; = テーブルのセルの罫線を離して表示
padding = 境界線の内側の余白
margin = 境界線の外側の余白
- padding/margin: 上右下左; (全/上下左右)
- border/padding/margin:*-top,*-right,*-left,*-bottom
line-height = 行の高さを調整
text-indent: 1em; = 文字を1文字下げる
text-align: left/center/right = 文字の寄せを調整
- align = 行揃え
font-weight(: bold;) = 文字の太さを調整
letter-spacing = 文字の間隔を調整
float = 浮動 = 指定した領域を右側や左側に浮き上がって表示するためのプロパティ
- ひとつ上の階層にoverflow: hidden;
- margin-bottomを使用できない。
cursor: pointer; = リンク部同様の指マークを表示
box-shadow: 1px 1px 7px 7px #666; ＝　ボックスに影をつける
- 2〜4つの長さの値で定義、任意で色、insetキーワードを指定
- 水平方向（オフセット距離・正負値指定）、垂直方向（オフセット距離・正負値指定）、ぼかし距離（正値指定）、広がり距離（正負値指定）、色指定、inset（内側影）
text-shadow: 0 1px 1px #666; = テキストに影をつける