実践コーディングスキル - 第8章 Lesson2

第2回:スタイルシートを読み込んでみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ウェブマガジンを作成するためのスタイルシートを読み込む方法を解説しています。
ここでは、linkタグを使って実際にcssを読み込み、確認します。



この動画で学べること

・スタイルシートを読み込ませる方法
・リセットCSSを読み込ませる方法



スタイルシートを読み込ませる方法

前回作ったスタイルシートをHTMLファイルに読み込ませていきましょう。
スタイルシートを読み込むタグはテンプレート化されているので<head>タグの中に、こちらの下にあるコードを貼り付けてください。



 <link href="style.css" type="text/css" media="screen" rel="stylesheet">



貼り付けができたら、HTMLファイルとCSSを両方保存しておきます。
ブラウザで見てみると画面が赤くなります。
これで、スタイルシートがちゃん読み込まれていることが確認できました。
ではCSSに書いたbackground-color: red;はもう必要ないので消しておきましょう。




ヘッダーを作成し、リセットCSSの読み込みをしよう

では、早速コーディングに入っていきましょう。
まずは、<body>タグの中にヘッダーのボックスを作るための<header>タグを書いていきます。
そして、CSSに横幅と縦幅、背景色を記述します。



<body>
<header></header>
</body>


header{
width: 100%;
height: 102px;
background-color:green;
}<span></span>



では保存してブラウザで見てみます。
ヘッダーのボックスが表示されていれば大丈夫です。
よく見てみると、ヘッダーの上や横に余分な余白が空いています。
これは、ブラウザが初期状態で読み込むスタイルが適応されているためなので、リセットCSSを適応させて余分な余白がなくなるようにしましょう。
こちらの下のコードをCSSにコピー&ペーストしていただければリセットCSSを読み込むことができます。



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html{overflow-y: scroll;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
input, textarea{margin: 0; padding: 0;}
ol, ul{list-style:none;}
table{border-collapse: collapse; border-spacing:0;}
caption, th{text-align: left;}
a:focus {outline:none;}


/* micro clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {clear: both;}
.cf {*zoom: 1;}



では保存してブラウザで見てみましょう。
ヘッダーの外側にあった余分な余白を消すことができました。