CSSとは? – HTMLとセットで覚えよう!-

CSS, HTML5 / CSS3基礎知識

こんにちは!サイバーブリッジweb担当のリクです。

前回HTMLについて書いたので、今回はCSSシーエスエスについて書いていきますね!

CSSとは?

CSSとはCascading Style Sheetカスケーディング スタイル シートの頭文字をとった、HTML文書のデザインやレイアウトといったスタイルを整えるためのスタイルシート言語のひとつです。

webページは基本的にHTMLで情報や構造を定義し、その後にCSSでHTMLタグで囲んだ要素の背景色や文字色、レイアウトを指定できます。

また、CSSで文字や要素に動きを付けることもできますが、少し難しくなってしまいますので後日改めて紹介します。

CSSの書式

CSSは、「セレクタ」と呼ばれる指定で対象の要素を選択し、波括弧{}の中に「プロパティ」と「」を指定しスタイルを整えます。

上記の画像はHTMLの<h1></h1>で囲まれた要素に対して、文字の色を黄色、文字のサイズを50pxに変更するように指定しました。

セレクタに続けて{}を記述し、{}内にプロパティと値を記述します。

その際、プロパティと値の間に必ず:(コロン)を加えることで、2つの項目を区別します。
そして、最後に;(セミコロン)を記述することで、プロパティの終わりを指定します。

HTMLファイルにCSSを埋め込む

<h1 style="colo:red; font-size:50px"> タイトル </h1>

HTMLタグに⬆︎のようにスタイルを指定する方法もありますが、これだと記述内容が増えた際にごちゃごちゃしてしまうので…

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello World !</title>
     <link rel="stylesheet" href="◆ここにcssファイル名◆">
    </head>
    <body>
        <h1>タイトル</h1>
    </body>
</html>

上記のようにHTMLファイルの<head>内に<link rel="stylesheet" href="◆ここにcssファイル名◆">と記述し、外部ファイルであるCSSを埋め込みます。

※基本的に、CSSファイルはindex.htmlと同じ階層に「cssフォルダ」を作成し、その中に格納します。

それでは実際に、HTMLタグにスタイルを当ててみましょう。

実際の書き方と実画面

まず、デスクトップに「テスト」などのフォルダを作り、その中にテキストエディタやメモ帳などで作成したindex.htmlと、「css」フォルダを作成し、cssフォルダ内にstyles.cssを格納します。

⬇︎はindex.htmlとstyles.cssの雛形になります。

styles.cssの1行目には必ず「@charset “UTF-8";」と記述してください。
※これはスタイルシートで使う文字エンコーディングを定義するものです。

デスクトップ常にあるindex.htmlをダブルクリックしブラウザで開くと⬇︎のように真っ白な画面に<h1>タグ内容の「タイトル」と文字が表示がされます。

styles.cssに先ほど指定したプロパティを記述して保存します。

すると見事文字の色が赤に変わり、文字サイズも大きく表示されました!

もし、スタイルがうまく当たってないない場合(変化がない場合)は、
<link rel="stylesheet" href="css/styles.css">⬅︎の部分を確認してみてください。

Posted by リク