CSSの書き方

* {
  margin: 0;
  padding: 0;
  background: radial-gradient(#05FBFF, #1E00FF);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  text-align: center;
  line-height: 80px;
  z-index: 1;
}

h1 {
  font-size: 50px;
  color: #000;
  text-shadow: 1px 1px 0 #fff,
               -1px 1px 0 #fff,
               1px -1px 0 #fff,
               -1px -1px 0 #fff;
}

.wrapper {
  position: relative;
}

p {
  display: inline-block;
  height: 600px;
  width: 33%;
  text-align: center;
  font-size: 300px;
  font-family: 'Press Start 2P', cursive;
  line-height: 600px;
  float: left;
}

button {
  display: inline-block;
  height: 50px;
  width: 100px;
  font-size: 20px;
  box-shadow: 4px 4px;
  border-radius: 4px;
  margin-left: 120px;
}

button:hover {
  opacity: 0.7;
}

button:active {
  transform: translateY(4px);
  border-bottom: none;
}

これがスロットアプリのCSSコードです。CSSの基本的な書き方は、下記のとおり。

セレクタ {プロパティ: 値;}

セレクタ …… スタイルを当てる対象です。HTMLの要素名ならそのまま書きます(例: <p> ならば p)。class属性が設定してある場合、「.class名」とします(例: <div class=”wrapper”> ならば .wrapper)。id属性が設定してある場合、「#id名」とします(例: <p id=”slot-number”> ならば #slot-number)。

プロパティ …… 適用するスタイルの種類です。「height」なら要素の高さを、「color」なら文字の色を指定します。

{}で囲んだ部分をブロック宣言、「プロパティ:値」の部分をスタイル宣言と言います。

セミコロン(;)はスタイル宣言の区切りを表すので、最後のスタイル宣言には必要ありません。ただし、後々追加する場合もあるので、つけておいた方がベターでしょう。

index.htmlにstyle.cssを読み込ませます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SLOT</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <h1>SLOT</h1>
    </header>

    <div class="wrapper">
      <p id="slot-number"></p>
    
      <p id="slot-number-two"></p>
    
      <p id="slot-number-three"></p>
    
      <button id='slot-start' onclick='startSlot()'>START</button>
      <button id='slot-stop' onclick='stopSlot()'>STOP</button>
    
      <button id='slot-start-two' onclick='startSlotTwo()'>START</button>
      <button id='slot-stop-two' onclick='stopSlotTwo()'>STOP</button>
      
      <button id='slot-start-three' onclick='startSlotThree()'>START</button>
      <button id='slot-stop-three' onclick='stopSlotThree()'>STOP</button>
    </div>
  </body>
</html>

headタグの中に<link rel=”stylesheet” href=”style.css”>を記述します。

ちゃんとスタイルが適用されましたね。それではまた次回。

コメント

タイトルとURLをコピーしました