ゼロから始めるホームページ作成~6~

CSSとは?「Cascading Style Sheets(カスケーティング・スタイル・シート)」の略称で、HTMLタグをどのようにブラウザで表示するかを設定していくものです。

HTMLタグに「style属性」として記述する方法、headタグ内にstyleタグを記述して一つのファイル内に記述する方法、headタグ内にlinkタグを記述して別のファイルを読み込む方法の3パターンの設定方法があります。

今回は、1つのファイル内に記述していく方法と別のファイルを読み込む方法をご紹介していきます。

リセットCSSについて

リセットCSSとは?

edge、chrome、safariのようにWEBページを表示するブラウザはたくさんあります。そして、HTMLタグの見た目は、それぞれのブラウザによって決まっています。

文字の大きさや余白などですね。

前回の記事で作成したHTMLファイルをchromeやedgeで表示してみてください。多少ですが、見た目が違うはずです。

それらのデフォルトで決定されているCSSを初期化する目的で設定するのが「リセットCSS」です。

外部ファイルとして読み込めみますので、別ファイル「reset.css」というファイルを作成して、以下内容をコピペしてください。ファイルを保存するときは「UTF-8」にすることは忘れずに!

リセットCSS参照元→http://html5doctor.com/html-5-reset-stylesheet/

reset.css

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

HTMLの記述

さて、作成したreset.cssをsample.htmlと同じ場所に配置してください。配置が出来たらHTMLファイルのhead内に記述を追加してreset.cssを読み込みます。

作成しているHTMLファイルに赤字の行を追加してください。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>○○の自己紹介サイト</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
  
  </style>
</head>
<body>
<img src="./sample.jpg" alt="空の画像">
<header>
  <h1>○○の自己紹介サイト</h1>
  <nav>
    <ul>
      <li><a href="#name">氏名</a></li>
      <li><a href="#address">住所</a></li>
      <li><a href="#appeal">自己アピール</a></li>
    </ul>
  </nav>
</header>
<article>
  <section>
    <h2 id="name">氏名</h2>
    <p>○○</p>
    <h2 id="address">住所</h2>
    <p>●●</p>
    <h2 id="appeal">自己アピール</h2>
    <p>△△</p>
    <h2>ポートフォリオ</h2>
    <video src="./sample.mp4" controls></video>
  </section>
  <section>
    <h3>資格一覧</h3>
    <table>
    <caption>資格一覧表</caption>
    <thead>
      <tr>
        <th>取得年月</th>
        <th>資格名</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>2020年9月</th>
        <td>HTML5レベル1 取得</td>
      </tr>
      <tr>
        <th>2020年9月</th>
        <td>HTML5レベル2 取得</td>
      </tr>
    </tbody>
    </table>
  </section>
</article>
<footer>
  <h3>サイトマップ</h3>
  <nav>
    <ul>
      <li><a href="#name">氏名</a></li>
      <li><a href="#address">住所</a></li>
      <li><a href="#appeal">自己アピール</a></li>
    </ul>
  </nav>
  <p>© 2020 ○○</p>
</footer>
</body>
</html>

追加が完了したら、保存して各ブラウザで表示を確認してみましょう。文字のサイズや余白がどのブラウザで見ても同じ表示になっているはずです。

CSSで見た目を整えるときには、必ずリセットCSSを設定します。そうしないとせっかくCSSで見た目を設定してもブラウザによって見た目が変わってしまうからです。

CSSで見た目を整えるときには、必ずリセットすることを忘れないでください。

linkタグについて

<link rel="stylesheet" href="./reset.css">

headタグ内で別のファイルを読み込むときに使用されるのがlinkタグです。

「rel属性」と「href属性」が必須項目となっていて、rel属性は、読み込むファイルを表すキーワード、スタイルシートなら「stylesheet」と記述します。href属性は、読み込むファイルのURLを記述します。同じWEBサーバにある場合には「相対パス」で、別のWEBサーバにある場合には「絶対パス」で記述することができます。

今回は、同じ場所にreset.cssを配置したので、相対パスで記述してみました。

まとめ

今回は、WEBページをブラウザで表示するときに見た目を設定するCSSについてと、ブラウザでの表示差異をなくすリセットCSSについてご紹介しました。

スタイルを設定していく前に「リセットCSS」を設定するのを忘れないでください。

次回の記事から、いよいよ見た目を整えていきます。headタグ内に用意されている「styleタグ」の中に記述していきます。

トップへ戻る