HTML5 - CSS - Styling with Fonts and Colors: Expanding Your Vocabulary(hex color)

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)、SHARPEN YOUR PENCIL(No. 5898) を取り組んでみる。

SHARPEN YOUR PENCIL(No. 5898)

• #111111
• #222222
• #333333
• #444444
• #555555
• #666666
• #777777
• #888888
• #999999
• #aaaaaa
• #bbbbbb
• #cccccc
• #dddddd
• #eeeeee
• #ffffff

コード(Emacs)

HTML5

<ul id="colors0">
</ul>
<script src="sample4.js"></script>

CSS(Stylesheet)

JavaScript

let ul0 = document.querySelector('#colors0'),
    range = (start, end, step=1) => {
        let res = [];
        for (let i = start; i < end; i += step) {
            res.push(i);
        }
        return res;
    };

ul0.innerHTML = 
    range(1, 16)
    .map((n) => {
        let color = `#${n.toString(16).repeat(6)}`;

        return `<li style="color: ${color}; font-size:x-large;">${color}</li>`;
    })
    .join('');