> ①CSSの基礎〜CSSの使い方 – ネットワークエンジニアチュートリアル

①CSSの基礎〜CSSの使い方

スポンサーリンク

無料でプログラマへ!30歳までなら無料でプログラミング学校に通うことが出来ます。下の画像をクリックして無料相談会でGO!

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">として連携させるとこのようになります。文字が赤くなったら成功です!!

次のページ



スポンサーリンク

ネットワークエンジニアになりたければ下記から無料相談会に参加!
なんと無料で授業を受けれてエンジニアになれます

投稿日:2017-09-15 更新日:

執筆者: