【初心者】Webサイト作る

【初心者】Webサイト作る #4 「CSSの基礎」

解説動画

動画はこちら

わからないことがあれば、Twitterか動画のコメント欄でお願いします。

HTMLとは

HTMLの役割は”文章の役割を書く“事です。

たとえば下記のようなHTMLだとどうでしょうか

<h1>CSSを学ぼう</h1>
<h2>第一章 HTMLとつなげる</h2>
<p>HTMLとCSSを繋ぐ方法を解説...</p>

“CSSを学ぼう”という本の中に”第一章 HTMLとつなげる”という章があって、その中に”HTMLとCSSを繋ぐ方法を解説…”という文章があります。

人間なら

CSSを学ぼう

第一章 HTMLとつなげる

HTMLとCSSを繋ぐ方法を解説…

と書かれていれば分かりますがコンピューターにはわからないので、このようにHTMLを作成して教えてあげます

CSSとは

HTMLは役割を教えて、CSSは装飾を書く言語です。

CSS設定の仕方

第3回で作成したHTMLにCSSを追加してみます。

HTMLの変更

HTMLを下記のように変更してみましょう

<head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link rel="stylesheet" href="style.css">
</head>

CSSファイルを作成

`style.css` とういうファイル名で作成

`style.css` に下記のように書いて見ましょう

h1 {
    color: red;
}

HTMLとCSSどちらも保存して、HTMLをブラウザで確認してみましょう!

間違いではないけど、ほぼ間違い

↑みたいなコード書いてたらしばかれます。

こう書き直しましょう

<!-- index.html -->
...(省略)
<h1 class="red">見出し1だよ</h1>
...(省略)
// style.css
.red {
    color: red;
}

なぜしばかれる?

冒頭で書いたとおり、HTMLは文章の役割を書くことです。一番はじめのh1に対してスタイルを書くと役割に装飾することになります。
つまり違う役割に同じ装飾をつけることができなくなります。

入門書などでは分かりやすいようにタグに対してCSSを書きますが、ほぼ間違いです。

CLASS?

要素(タグ)の属性の一つで、主にCSSやJavascriptと連携するために設定する値になります。

CSSを学ぶ前に心がけること

CSSはかなり覚えることが多く、2,3日で習得できる言語ではないです。

覚えることと、上手くいかないことがめちゃめちゃあります。一歩づつ確実に学びましょう

Chromeの便利機能を知っておこう

Chromeなどにはデベロッパー機能がついています。F12を押して起動してみましょう

Elementsというタブをクリックすると要素(タグ)にかかっているCSSが表示されます。

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ