WEBページの見出しコレクション

WEBページの見出しのサンプルを紹介します。

サンプルその１

サンプル例

<p style="border-bottom: 2px solid #EE00EE; border-left: 10px solid #EE00EE; padding: 8px;">

    <span style="font-size: 16pt;">桃</span>

</p>

#CC0000

<p style="border-bottom: 2px solid #CC0000; border-left: 10px solid #CC0000; padding: 8px;">

    <span style="font-size: 16pt;">赤</span>

</p>

#EE8800

<p style="border-bottom: 2px solid #EE8800; border-left: 10px solid #EE8800; padding: 8px;">

    <span style="font-size: 16pt;">橙</span>

</p>

#EEEE00

<p style="border-bottom: 2px solid #EEEE00; border-left: 10px solid #EEEE00; padding: 8px;">

    <span style="font-size: 16pt;">黄</span>

</p>

#88EE00

<p style="border-bottom: 2px solid #88EE00; border-left: 10px solid #88EE00; padding: 8px;">

    <span style="font-size: 16pt;">黄緑</span>

</p>

#008800

<p style="border-bottom: 2px solid #008800; border-left: 10px solid #008800; padding: 8px;">

    <span style="font-size: 16pt;">緑</span>

</p>

#00AAAA

<p style="border-bottom: 2px solid #00AAAA; border-left: 10px solid #00AAAA; padding: 8px;">

    <span style="font-size: 16pt;">青緑</span>

</p>

#0088EE

<p style="border-bottom: 2px solid #0088EE; border-left: 10px solid #0088EE; padding: 8px;">

    <span style="font-size: 16pt;">空</span>

</p>

#0000EE

<p style="border-bottom: 2px solid #0000EE; border-left: 10px solid #0000EE; padding: 8px;">

    <span style="font-size: 16pt;">青</span>

</p>

#8800EE

<p style="border-bottom: 2px solid #8800EE; border-left: 10px solid #8800EE; padding: 8px;">

    <span style="font-size: 16pt;">紫</span>

</p>

コラム

色は「#◯◯◯◯◯◯」で指定します。ここでは「#EE00EE」となっています。
◯の中には16進数（0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, Fの計16種類の文字で表記する数）の値のいずれかが入ります。
どんな値を入力すれば希望の色になるのかは、Webで「RGB カラー」と検索するか、twitter（Twitter Web Client）の「ホーム」＞「プロフィール」＞「プロフィールを編集」＞「テーマカラー」で確認できます。

サンプルその２

サンプル例

<p style="border-bottom: 2px solid #00a0a0; border-left: 10px solid #00a0a0; padding: 8px;">

    <span style="font-size: 16pt;">サンプル1</span>

</p>

<p style="border-top: 2px solid #00a0a0; border-bottom: 2px solid #00a0a0; padding: 8px;">

    <span style="font-size: 16pt;">サンプル2</span>

</p>

<p style="background-color: #00a0a0; padding: 8px;">

    <span style="font-size: 16pt; color: #ffffff;">サンプル3</span>

</p>

<p style="border-bottom: 8px solid #00a0a0; background-color: #808080; padding: 8px 8px 4px 8px;">

    <span style="font-size: 16pt; color: #ffffff;">サンプル4</span>

</p>

<p style="border-top: 8px solid #00a0a0; border-bottom: 8px solid #00a0a0; background-color: #808080; padding: 4px 8px 4px 8px;">

    <span style="font-size: 16pt; color: #ffffff;">サンプル5</span>

</p>

<p style="border-left: 12px solid #00a0a0; background-color: #808080; padding: 8px;">

    <span style="font-size: 16pt; color: #ffffff;">サンプル6</span>

</p>

<p style="border-left: 12px solid #00a0a0; border-right: 12px solid #00a0a0; background-color: #808080; padding: 8px;">

    <span style="font-size: 16pt; color: #ffffff;">サンプル7</span>

</p>

コラムA：色を変えるには

色を変えたい場合は「#◯◯◯◯◯◯」部分に各々16進数の値（0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, fのいずれかの文字）を入れてください。
色は光の三原色で表現します。
左2つの◯には赤色成分の値を、真ん中2つの◯には緑色成分の値を、右2つの◯には青色成分の値を指定します。
「成分」という言葉がわかりにくい場合は、「光の強さ」と捉えてもらって構いません。
どの成分も「00」〜「ff」までの256段階の値で指定します。色の成分は「00」が最も弱く「ff」が最も強くなります。
全ての色の成分を00、すなわち「#000000」とした場合は黒になります。
逆に全ての色の成分をff、すなわち「#ffffff」とした場合は白になります。
その他の色の指定方法については、Webブラウザから「RGB カラーコード」などのキーワードで検索するとよいです。

コラムB: なぜ各色の成分は256段階で表現するのか

各色の成分は16進数2桁で表現されます。16進数の世界では文字通り16種類の文字を用いて数を表現します。
つまり16進数2桁は、16種類の文字を2つ組み合わせることと同じになります。
したがって、各色の成分は 16^2 = 256 段階の値で指定できるのです。（ ^ は累乗のことです）

せっかくなので、16進数2桁を我々が普段使用している10進数に変換するための方法を3つの例で紹介します。

例1: 16進数「ff」の場合

　f × 16^1 + f × 16^0

　= 15 × 16 + 15 × 1

　= 240 + 15

　= 255（ = 最大値）

例2: 16進数「00」の場合

　0 × 16^1 + 0 × 16^0

　= 0 × 16 + 0 × 1

　= 0 + 0

　= 0（ = 最小値）

例3: 16進数「3C」の場合

　3 × 16^1 + C × 16^0

　= 3 × 16 + 12 × 1

　= 48 + 12

　= 60