ホームページの装飾は別ファイルにすることをW3Cで推奨していますので、ホームページを自作するサイトでもstyle.cssという別ファイルを作ります。
デスクトップにstyle.cssファイルを作りましょう。
style.cssファイルを作る
テラパッドを開きます。
ファイル→名前を付けて保存をクリック、別窓が表示されるので、ファイル名をstyle.cssと書いて、保存先にデスクトップを選択し、保存をクリックします。
これで、style.cssというファイル名のcssファイルがデスクトップに保存されました。
テラパッドを閉じます。
head要素にstyle.cssファイルをリンクする
style.cssファイルを作りましたので、head要素内のlink要素にソースを書き、htmlファイルにlinkし、関連付けます。
htmlソース
<head> <link rel="stylesheet" href="style.css"> </head>
head要素のlink要素は、
link rel=”” href=””
となっていますので、書き換えましょう。
スタイルシートの文字エンコーディング
style.cssの書き始めに、スタイルシートで使う文字エンコーディングを定義します。
style.cssファイルをテラパッドにドラッグして開き、次の一行をコピペします。
cssソース
@charset "utf-8";
この一行は前方にスペースを入れないようにし、上の列も空けないようにして、ファイルの左上にピッタリ付けておきましょう。
次にスタイルのリセットをします。
スタイルのリセット
IE、edge、Firefox、chromeその他のブラウザはホームページを表示するソフトウェアで、それぞれがデフォルトで自分のスタイルを持っています。
ですから、ブラウザそれぞれが自分の持ってるスタイルで表示しようとするため、ユーザーが使用するブラウザの種類によっては、制作者が意図した表示と違うということがあり得ます。
それは制作者としては大変困るわけです。
そこで、ブラウザの持っているスタイルをリセットし、スタイルの必要なセレクタの値は制作者がスタイルを決めるようにします。
世界で多く使われているEric Meyer’s のCSS Resetをstyle.cssに書きます。（使用にあたっての注意 /*から*/まで、削除しないようにしてください。）
cssソース
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing=0' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
このソースコードを@charset “utf-8″の下にコピペします。
ビューポートに対する割合を書く
html、bodyのビューポートの幅、高さに対する割合を書いておきます。
cssソース
html, body {
width: 100vw;
height: 100vh;
}
幅、高さを画面の100%にする、という設定です。
少し難しいですが、javascript APIキーでgoogle mapを表示するときなどに必要な設定です。
メディアクエリ
今回はPCで表示するホームページを作りますが、htmlファイルのhead情報でビューポートを書いて、スマホ、タブレット表示の準備をしておきました。
スタイルシートでもメディアクエリを使用して準備をしておきましょう。
今回は使用しないので、このソースコードをスタイルシートの一番下に置きます。
cssソース
/*======メディアクエリ======*/
/*======▼mobile======*/
@media screen and (max-width: 600px) {
}
/*======▼タブレット======*/
@media screen and (min-width: 601px) and (max-width: 900px) {
}
/*======▼PC======*/
@media screen and (min-width: 901px) {
}
/*======▼背景画像======*/
#content{
background-size:cover;/*背景画像で全体を覆う
}
/*OR*/
#content{
background-size:100% auto;/*背景画像を横幅いっぱいに表示*/
}
/*======▼コンテンツは共通で、横向き用デザイン、縦向きデザインの2種類用意する場合======*/
div.landport {
/* 共通の装飾 */
}
@media screen and (orientation: landscape) {
div.landport {
/* 横向き専用の追加装飾 */
}
}
@media screen and (orientation: portrait) {
div.landport {
/* 縦向き専用の追加装飾 */
}
}
これでstyle.cssに装飾・スタイルを書く準備ができました。
ホームページフォルダーを作る
htmlファイル、style.cssファイル、jsファイルは、ファイルをバラバラに保存せずに、ホームページ毎にまとめて保存する必要があるので、デスクトップにフォルダーを作り、フォルダーの中で保存します。
デスクトップの何もないところで右クリック新規作成(X)→フォルダー(F)をクリック→デスクトップに「新しいフォルダー」が作成されます。
フォルダー名が選択されていますから、キーボードからフォルダー名を変えてください、例えばHPとか。
フォルダー名が選択されていなかったら、Wクリックで選択状態になります。
index.html、style.cssファイルをドラッグしてHPフォルダーに入れます。
次はbody要素の装飾をします。