HTML5 - CSS - Styling with Fonts and Colors: Expanding Your Vocabulary(color codes, hex, rgb(red, green, blue))

Head First HTML and CSS

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 8.(Styling with Fonts and Colors: Expanding Your Vocabulary)、CRACK THE SAFE CHALLENGE(No. 5853) を取り組んでみる。

CRACK THE SAFE CHALLENGE(No. 5853)

Our Elixir

Green Tea Cooler

Chock …

Rasberry Ice Concentration

Combining …

Blueberry Bliss Elixir

Blueberries …

Carnberry Antioxidant Blast

Wake …

Our Elixir

Green Tea Cooler

Chock …

Rasberry Ice Concentration

Combining …

Blueberry Bliss Elixir

Blueberries …

Carnberry Antioxidant Blast

Wake …

red: green: blue:

コード(Emacs)

HTML5

<div id="d0" style="background-color: #b817e0;">
  <h1>Our Elixir</h1>    
  <h2>Green Tea Cooler</h2>
  <p>Chock …</p>
  <h2>Rasberry Ice Concentration</h2>
  <p class="blue">Combining …</p>
  <h2>Blueberry Bliss Elixir</h2>
  <p class="purple">Blueberries …</p>
  <h2>Carnberry Antioxidant Blast</h2>
  <p>Wake …</p>
</div>
<div id="d1">
  <h1>Our Elixir</h1>    
  <h2>Green Tea Cooler</h2>
  <p>Chock …</p>
  <h2>Rasberry Ice Concentration</h2>
  <p class="blue">Combining …</p>
  <h2>Blueberry Bliss Elixir</h2>
  <p class="purple">Blueberries …</p>
  <h2>Carnberry Antioxidant Blast</h2>
  <p>Wake …</p>
</div>
<label for="red0">red: </label>
<input id="red0" type="number" min="0" max="255" step="1" value="184">
<label for="green0">green: </label>
<input id="green0" type="number" min="0" max="255" step="1" value="23">
<label for="blue0">blue: </label>
<input id="blue0" type="number" min="0" max="255" step="1" value="224">

<script src="sample3.js"></script>

CSS(Stylesheet)

let div1 = document.querySelector('#d1'),
    input_red = document.querySelector('#red0'),
    input_green = document.querySelector('#green0'),
    input_blue = document.querySelector('#blue0'),
    inputs = [input_red, input_green, input_blue];

let color = () => {
    let red = parseInt(input_red.value, 10),
        green = parseInt(input_green.value, 10),
        blue = parseInt(input_blue.value, 10);
    
    div1.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
};

inputs.forEach((input) => input.onchange = color);
    
color();