CSSとは？

こんにちは、パキラです。

今回は『CSS』について調べてまとめました。
『HTML』はテキストの文章の段落、箇条書きリスト、画像の使用、表のなどの組み合わせです。

Cascading Style Sheets
『css』の記述場所
styleタグに書く方法
インラインに書く方法
外部ファイルに書く方法
まとめ

Cascading Style Sheets

まず『CSS』とはCascading Style Sheets(カスケーディング・スタイル・シート)の頭文字から略したした言葉になります。
主に『HTML』のテキストを装飾する役割があります。
色・サイズ・レイアウトや文字のスタイルなどWebページの見た目に関することを指定ができます。
『HTML』は文書構造で『CSS』は見栄えですね。
その二つを組み合わせてWebページは作られています。

『HTML』でも装飾目的の要素はありますので、『HTML』だけでWebページの見栄えを制御することはできます。
しかし、Webページのスタイリングに『HTML』を用いるのはベストプラクティスではないそうです。
ちなみにこのベストプラクティスとはよくプログラミングをしていると聞く言葉です。
意味は、最善の方法、最良の事例などの意味を持ちます。
要は推奨しているということですね。

『HTML』は情報構造を定義するための言語であり、見栄えの制御のために本来の役割と違う使い方をすると、文書の情報構造がでたらめになってしまいます。
『HTML』の要素をどのように表示するかは、ブラウザによって異なります。
つまり閲覧環境によってはまったく意図しないレイアウトになってしまうこともあります。
ですから、文書構造とスタイル指定を分離するのがベストプラクティスです。

初心者のためのブログ始め方講座

『css』の記述場所

『CSS』を記述する方法は3つあります。

styleタグに書く方法
インラインに書く方法
外部ファイルに書く方法

それぞれに応じて書く場所も変わりますので、説明します。

styleタグに書く方法

まずは下記の『HTML』をご覧下さい。
このファイルの<head>の中に<style>を書きます。
そこでスタイル(色、大きさ、位置など)を指定して、<body>内にスタイルを適応させます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>css</title>

<style>ここにスタイルを指定します</style>

</head>
<body>
    <h1>styleタグに書く方法</h1>
    <p>cssの書き方</p>
</body>
</html>

この中に書き込む書き方は、<style>指定したい箇所 { ✖✖✖✖✖✖ : ✖✖✖ ; }</style>と書き込みます。
この指定したい箇所に、スタイル(色や大きさ、位置など)をあてることができます。
例えば　h1 { color : green ; }と書くと<h1>の中を『styleタグに書く方法』　と色を変えることができます。
正しい名称ですが、セレクタ { プロパティ : プロパティ値 ; }といいます。

インラインに書く方法

次はインラインに書く方法です。
インラインは直接タグに、属性としてスタイルを指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>css</title>
</head>
<body>
    <h1>styleタグに書く方法</h1>

    <p　ここにスタイルを指定します >cssの書き方</p>

</body>
</html>

書き方はstyle = ” ✖✖✖✖✖✖ ： ✖✖✖ ； “と書きます。
例えばstyle = ” color : green ; “と色(カラー)と変えると宣言して、その後に色を指定します。

そうすると『cssの書き方』とスタイルを指定することができました。

先ほど<head>内に書き込むときは<style>h1 {color: green ;}</style>と書きました。
書き方が少し変わりますので注意ですね。

外部ファイルに書く方法

最後に、外部ファイルに書く方法を紹介します。
上記で紹介した２つは少ないコードのときであればいいですが、コードが増えて複雑になると読み取ったり変更するのが苦労します。
ですので、実務で実装する際はこの外部ファイルに書く方法が一般的だそうです。

まずは新規でファイルを作成します。
ファイルの拡張子は『ここにファイルの名前を入れる.css』にして保存します。
このとき、ファイルを保存する場所はHTMLファイルと同じ階層に保存するのが一般的ですね。
次に、このCSSファイルを、HTMLファイルに紐付け(リンク)させます。

その際に使うのが、『link』タグといいます。
特定のファイルと紐付けることができる要素です。
『link』は終了タグはつけません。

<link rel="stylesheet" href="style.css">

relは読み込むファイル、hrefはrelで読み込むファイルがどこにあるかを指定します。
同じ階層ならファイル名を指定するだけです。

これでstyle.cssのスタイルシートを読み込むということになります。

htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>
    <h1>styleタグに書く方法</h1>
    <p>cssの書き方</p>
</body>
</html>

CSSファイル

h1{  color : green ; }

『styleタグに書く方法』

これで上記2つと同じようにスタイルをあてることができました。
この外部に書く方法が一般的であり、htmlのコードもすっきりして見やすいですね。
ぜひ、この外部に書く方法を覚えましょう。

違う階層のCSSを適応させることも可能です。
その場合相対パスを書きますが、自分自身(HTML)からみて、そのファイルがどこにあるかで記述方法が変わります。

同じ階層に読み込むファイルがあるなら、そのファイル名の指定だけで大丈夫です。
一応ファイル名の前に『./』を書く場合もありますが、書かなくても大丈夫です。
下の階層にファイルがある場合は、その下の階層に入るためのフォルダにフォルダ名と『/』で入ります。
上の階層に上がる場合は『../』です。
もし、そこからまた別ファルダに入る場合は『/』で入ります。
そうして指定ファイルまで入り、指定します。

まとめ

ここまで読んでいただき、ありがとうございました。
今回はCSSについてまとめました。
まだまだ初心者ですので、これからも勉強したことを発信していきますので、よろしくお願いします。

【今さら聞けない】CSSとは？