こんにちは！サイバーブリッジweb担当の久保田です。
前回HTMLについて書いたので、今回はCSSについて書いていきますね！
CSSとはCascading Style Sheetの頭文字をとった、HTML文書のデザインやレイアウトといったスタイルを整えるためのスタイルシート言語のひとつです。
webページは基本的にHTMLで情報や構造を定義し、その後にCSSでHTMLタグで囲んだ要素の背景色や文字色、レイアウトを指定できます。
また、CSSで文字や要素に動きを付けることもできますが、少し難しくなってしまいますので後日改めて紹介します。
CSSは、「セレクタ」と呼ばれる指定で対象の要素を選択し、波括弧{}の中に「プロパティ」と「値」を指定しスタイルを整えます。
上記の画像はHTMLの<h1></h1>で囲まれた要素に対して、文字の色を黄色、文字のサイズを50pxに変更するように指定しました。
セレクタに続けて{}を記述し、{}内にプロパティと値を記述します。
その際、プロパティと値の間に必ず：(コロン)を加えることで、２つの項目を区別します。
そして、最後に；(セミコロン)を記述することで、プロパティの終わりを指定します。
<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”>⬅︎の部分を確認してみてください。
この記事を書いた人
その他記事はこちら
久保田 里佳子
Web事業部 マネージャー / デザイナー1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。
関連記事
櫻井 邦則 
久保田 里佳子 
