【Web講座】CSS:スタイル設定

imash

HTMLをプレビューしている際に，文字のフォントや，色，背景色など表示スタイルを変更したいことが多々あるだろう．

このような場合に，CSS(Cascading Style Sheets)を用いる．
この記事は以下の記事の続きなので，以下を見ていない方はまず見ておいてほしい．

HTMLへのCSS（スタイル情報）の追加

CSSの記述を追加した，HTML は以下のように書ける：

<!DOCTYPE html>
<html>
   <head>
      // ヘッダ：タイトルや，スタイルなどの情報を記述する
      <style>
          // ここにCSS（スタイル）を書きます
      </style>
   <\head>

   <body>
      // ボディ：文章や，図などを表示する本体部分
   <\body>
<\html>

CSS の設定は正直，複雑で退屈なので，スタイルをこのように変えたいと思ったら，その都度調べるくらいでいいと個人的には思っている．

CSSが長い設定になる場合や，すでにあるテンプレートから読み出したいなど，外部から読み込む際には，以下のように書ける：

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


CSSの書き方

CSS コードは基本的に以下のルールセットを列挙することで書かれる：

ルールセットの一例．
https://developer.mozilla.org/ja/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content

セレクターの概念だけは押さえておきたい．
そこで，ここではHTMLの例を示しながら，セレクターの設定についてだけ触れておこう．

セレクターの設定

HTMLの例を以下に示す：

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

   <body>
      <h1> あいさつ </h1>
      <p> おはようございます </p>
      <p> こんにちは </p>
      <p id="casual"> おっす </p>
      <p class="night"> こんばんは </p>
      <p class="night"> おやすみ </p>
   </body>
</html>

以下のように，style.css を作成してみます：

/* h1 要素を指定 （要素型セレクタ） */
h1 {
   color: green;
}


/* #casual のように idセレクタ は # を使って指定 */
#casual {
   color: red;
}

/* .night のように，クラスセレクタは， .~~ のように指定 */
.night {
   color: blue;
}


より高度なセレクター設定は以下を参照のこと：


参考



いいなと思ったら応援しよう！