CSSの基本について書いていきます。
CSSファイルを作成して、反映されるよう準備を整えましょう。
CSSとは
カスケーディングスタイルシート。フルネームです。
htmlで記述しただけだと、基本ルールが適用され、左寄り、背景は白、文字は黒、リンク文字は青字にアンダーライン…といった具合にされます。
その基本ルールを、自分ルールに調整してくれるのがCSSです。
CSSファイルをつくる
ホームページ作成フォルダを開いて、index.htmlをサクラエディタで開いてください。
左上のマークをクリックして新規ファイルを作成してください。（もしくは、「ファイル」クリック→「新規作成」クリック）
新しいファイルが開いたら、すぐ保存
ファイル名を「style」、文字コードを「UTF-8」にして、ホームページ作成フォルダに保存してください。
※style.cssは、index.htmlと違い、好きな名前で大丈夫です。今回は一般的な名前を付けました。猫の「ミケちゃん」的な感じです。
ホームページ作成フォルダを開き、保存したstyleファイルの拡張子をtxtからcssに変更してください。
ホームページ作成フォルダの中身が、こんな構成になりました。
ついでに…
慣れてきたら、「保存」の画面で直接拡張子を入力したら手間が省けます。今は、何をしているのか分かりやすいように手順を分けています。
拡張子って何だ？が分かってきたら、直接ファイル名に「style.css」と入力してください。
CSSの存在をhtmlに知ってもらう
同じフォルダに入っているだけだと、index.htmlさんはstyle.cssさんの存在を認識できません。
存在を知ってもらうために、index.htmlに以下の記述をしてください。
<link rel="stylesheet" href="style.css">
記述場所は、＜head＞～＜/head＞の間です。
これで大丈夫です。
CSSを記述してみる
作ったstyle.cssファイルを、サクラエディタで開いてください。index.htmlを開いたままなら、
「開く」ボタンから、style.cssを選択して開いてください。
開いたら、最初にお決まりの文句を書きます。htmlの「meta charset」と同じ意味合いのものです。
@charset "utf-8";
CSSの方がシンプルですね。
htmlではUTF-8だったのに、CSSではutf-8なの？？と思いましたよね。コレ、どっちでも大丈夫なんです。大文字でも小文字でもOKだよ～って意味で両方使いましたが、ややこしかったら一方を採用してください。
背景に色を付けてみる
赤にしてみましょっか。
以下のコードをstyle.cssに記述してください。
body{background: #ff0000;}
保存して、index.htmlをブラウザで開いてみてください。
うわぁぁ…。
デザインセンスはともかく、無事にCSSで背景色を変えることが出来ました。
記述したコードの意味を見ていきましょう。
body → htmlの＜body＞～＜/body＞の範囲に適用しますよ。って意味です。
｛｝ → ここから、ここまでがbodyに適用する内容ですよ。っていう囲いです。
background → そのままですね。背景を、どうするか。という意味です。
＃ff0000 → 赤にする。という意味です。redと記述しても同じく赤くなりますが、選択肢が限られます。この指定方法だと、細かい中間色が使えるので、漫画描きさんはこっちを使うのが向いていると思います。
色のコードを探す方法ですが、無料で色探しできるサイトがあるので検索してみてください。
クリスタをお持ちなら、色の設定のHEXに当たる部分です。
この英数字の頭に、＃を付けて指定します。
：； → CSSが効かないときは、大体コレの記述漏れです。地味ですが絶対に記述を忘れないようにしてください。
どの範囲に｛なにを：どうするか；｝
基本は、こんな感じだと思ってください。
おまけ
今回のコードを置きます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="ここにサイトの内容を記載">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<title>ここに自分のサイト名を記載</title>
</head>
<body>
<p>漫画サイトつくるぞ！</p>
<img src="image/top.png" alt="トップ画像">
<a href="comic.html">漫画ページへ移動</a>
<a href="https://mangasite.work">いまから漫画サイトつくる</a>
</body>
</html>CSS
@charset "utf-8";
body{background: #ff0000;}CSSを記述していく準備が出来ました。お疲れさまでした。
コメント