なまのHTML,CSSのサンプル

カスタマイズ 新人研修

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello</h1>
  <div>
    <p>This is a paragraph.</p>
  </div>
</body>
</html>

+CSS

タイトル色を変更する

  • クラス名を付ける
  • スタイルを定義する
  • リンクさせる
<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
  <h1 class="red">Hello</h1>
  <div>
    <p>This is a paragraph.</p>
  </div>
</body>
</html>
@charset 'UTF-8';

.red{
  color: red;
}