①CSSの基礎〜CSSの使い方

Contents

CSS

cssとはから初めてみましょう。先ほどはHTMLというものを使いました。しかしHTMLだけではただ単に文字を並べただけになります。例えば図を左寄せにしたり、文字を赤くしたりなどなどをする場合CSSが必要になります。

HTMLにCSSを適用するには、インライン、内部、外部の 3つの方法があります。

インラインスタイルは、style属性を使用してHTMLタグに直接入力します。

<p style="color: red">text</p>

これはちなみに

text

赤色表示になります。

埋め込まれた、または内部のスタイルは、ページ全体に使用されます。head要素の内部では、styleタグがページのすべてのスタイルを決めます。つまりはこんな感じ

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...

ここでのPはP要素　{}このかっこに何をしたいかを書く　color : 何色にするか redで色を決めて;で終了を意味します。p { color: red; }　この形でCSSを書いてきますきます

これによりa要素のページのすべての段落が赤くなり、すべてのp要素のリンクが青くなります

例えばこのファイルがあります

p {
    color: red;
}

a {
    color: blue;
}

これをstyle.cssという形で保存します。HTMLのときと一緒ですね。

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">

このようにstyle.cssをhtml内にリンクさせることでa要素とp要素に色をつけることができるんですね。htmlのリンクされたページ全てに適用されます。

<link rel="stylesheet" href="style.css">　href="style.css"の部分に保存CSSの名前を当てはめるとリンクされます。今回はstyle.cssなのでhref="style.css"ですね

例えばこれにstyle.cssを適用させます

これを<link rel="stylesheet" href="style.css">として連携させるとこのようになります。文字が赤くなったら成功です！！