CSS例

<style>
/* h1要素のスタイルを指定 */
h1.h1-style {
    color: red;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #000;
}
/* h2要素のスタイルを指定 */
h2.h2-style {
    color: green;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    border: 1px solid #000;
}
</style>
<h1 class="h1-style">見出し（h１）の色をレッド、サイズを２0px、テキストの位置をセンタリングしている</h1>
<h2 class="h2-style">見出し（h2）の色をグリーン、サイズを16px、テキストの位置を右寄せにしている</h2>

表示サンプル

CSS例

<style>
.bkcolor-pink {
  background-color: #f9b8f3;
  　width: 100%;
　　　　　height: 200px;
		}
.bkcolor-green {
  background-color: #06e5b5;
  　width: 100%;
　　　　　height: 200px;
		}
</style>
<div class="bkcolor-pink">
	<h1>背景の色を変える</h1>
	<p>背景の色を「background-color」でピンク（色コードは#f9b8f3）に設定している</p>
</div>

<br>
<div class="bkcolor-green">
	<h1>背景の色を変える</h1>
	<p>背景の色を「background-color」でグリーン（色コードは#06e5b5）に設定している</p>
</div>

表示サンプル

CSS例

<style>
.container {
 background-color: #f7be2e;
 padding: 20px;
 width: 400px;
 height: 300px;
}
</style>
<div class="container">
　　<h1>要素のレイアウトを指定する</h1>
　　<p>「container」で背景色をオレンジ（色コードは#f7be2e）を指定<br>
要素の内側の余白を上下左右20pxに指定<br>
要素の幅を400px、高さを300pxに指定</p>
</div>

表示サンプル

CSS例

<style>
ul {
list-style: square;
　　　　　　　　}
ol {
list-style: lower-alpha;
　　　　　　　　}
	</style>
	<ul>
		<li>りんご</li>
		<li>バナナ</li>
		<li>みかん</li>
	</ul>
	<ol>
		<li>りんご</li>
		<li>バナナ</li>
		<li>みかん</li>
	</ol>

表示サンプル

CSS例

<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}
		th, td {
			padding: 8px;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}
		th {
			background-color: #f2f2f2;
		}
	</style>
	<table>
		<tr>
			<th>本のタイトル</th>
			<th>著者</th>
			<th>ジャンル</th>
		</tr>
		<tr>
			<td>吾輩は猫である</td>
			<td>夏目漱石</td>
			<td>風刺小説</td>
		</tr>
		<tr>
			<td>銀河鉄道の夜</td>
			<td>宮沢賢治</td>
			<td>ファンタジー</td>
		</tr>
		<tr>
			<td>斜陽</td>
			<td>太宰治</td>
			<td>中編小説</td>
		</tr>
	</table>

表示サンプル

CSS例

<style>
		.box {
			width: 200px;
			height: 200px;
			border: 5px solid red;
			padding: 20px;
			text-align: center;
		}
	</style>
</head>
	<div class="box">
		<p>このボックスの線は、色はred、太さは５pxです。</p>
	</div>

表示サンプル

CSS例

<style>
		form {
			width: 500px;
			margin: 0 auto;
			padding: 20px;
			border: 2px solid black;
			background-color: #f2f2f2;
		}
		
		input[type=text], select {
			width: 100%;
			padding: 12px 20px;
			margin: 8px 0;
			box-sizing: border-box;
			border: 2px solid #ccc;
			border-radius: 4px;
		}
		
		input[type=submit] {
			background-color: #74c2c9;
			color: white;
			padding: 12px 20px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}
		
		input[type=submit]:hover {
			background-color: #63a0b2;
		}
	</style>
</head>
	<form>
		<label for="name">名前:</label><br>
		<input type="text" id="name" name="name" placeholder="ここに名前を入力"><br>

		<label for="email">メールアドレス:</label><br>
		<input type="text" id="email" name="email" placeholder="ここにメールアドレスを入力"><br>

		<label for="gender">性別:</label><br>
		<select id="gender" name="gender">
			<option value="male">男性</option>
			<option value="female">女性</option>
			<option value="other">他</option>
		</select><br>

		<input type="submit" value="送信">
	</form>
</body>
</html>

表示サンプル

CSS例

<style>
.im {
  color: red;
}
.im {
  color: blue !important;
}
</style>
<p class="im">文字の色を優先的に青にする</p>

「important」の前に半角の「!」をつけて「!important」と記述します。

表示サンプル