WEBエンジニア
css 分類

プロパティを複数指定したいとき

投稿者情報

  • 運営局 投稿
  • 投稿日

コンテンツ情報

本文内容

ひとつのセレクタに対して、プロパティは複数指定することができます。

たとえば、フォントサイズを20px・文字の色を青にしたいときには、

h1{font-size: 20px, color: blue;}

のように書きます。
また、コードには空白部分は無視されるという性質があるので、{  }で囲んだ設定を見やすく並列に並べてもいいでしょう。

h1{
  font-size: 20px,
  color: blue;
}

プロパティの種類

プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。「CSS リファレンス」などで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。

 

下記の表は、CSSを書く上でよく使われるプロパティをまとめています。プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう。

プロパティ 説明文
color 文字色を指定する
background 背景の指定をする
background-color 背景の色を指定する
font-family フォントの種類を指定する
font-weight フォントの太さを指定する
line-height 行の高さを指定する
text-align 行の揃え位置を指定する
width 幅を指定する
height 高さを指定する
margin マージンの指定をする
padding パディングの指定をする
border ボーダーの色や太さを指定する
position 要素の配置方法を指定する
display 要素の表示形式を指定する
float 左か右に寄せて配置する
z-index 要素の重なりの順序を指定する

 

実践〜スタイルの例

では実際に、プロパティを駆使して、簡単なスタイルを作ってみましょう。

今回は、次のHTMLコードをもとに進めます。

<!DOCTYPE html>
<html lang=“ja”>
  <head>
    <meta charset=“UFT-8”>
    <title>CSS</title>
  </head>
  <body>
    <h1>CSS入門</h1>
    <p>はじめてのCSS</p>
  </body>
</html>

 

関連資料

新着投稿


  • 投稿がありません。

新着書込み


  • 書込みがありません。
アラート 0