講師：湊 有香里

1限目
学科 CSS基礎①
マークアップの練習について

2限目
学科 CSS基礎①
マークアップの練習について

3限目
学科 CSS基礎①
リセットCSSとセレクタの得点について

4限目
学科 CSS基礎①
Chrome検証ツールについて

5限目
学科 CSS基礎①
本日の講義のまとめ

本日はCSSのテキストの色や文字飾について教わる。

感想・質問
  • 感想　ブラウザの種類によって、使えないプロパティーがあることには驚いた。プロパティーの構文はできるだけ省略しない方が良いらしい。
  • 質問　text-decoration-style プロパティの例文がtext-decoration-lineになっています。
Web ページのタイトル
Web ページの内容を記述
このヘッドは何色
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キーワード">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web ページのタイトル</title>
<link href="styls.css" rel="stylesheet"  type="text/css">
<link href="ファビコンファイルのパス名" rel="icon">
</head>
<body>
	<h1>Web ページの内容を記述</h1>
	<h2>このヘッドは何色</h2>
</body>
</html>
@charset "utf-8";
/* CSS Document */

h1 {
	background-color: white;
	border: 1px #ccc solid;
	/*color: rgba(55,65,167,1);*/
	/*opacity: 0.6;*/
	text-align: center;
	/*text-decoration: line-through double red;*/
	/*text-shadow: 2px 2px 2px green;*/
	color: white;
	text-shadow:
		0px 0px 3px black;
}
h2 {
	border: 1px #ccc solid;
	color: rgba(55,65,167,1);
	/*opacity: 0.6;*/
	text-align: center;
	/*text-decoration: line-through double red;*/
	text-decoration-line: line-through;
	text-decoration-style: double;
	text-decoration-thickness: 1px;
	text-decoration-color: red;
	/*text-shadow: 2px 2px 2px green;*/
	/*color: white;
	text-shadow:
		0px 0px 3px black;*/
}