Wait a moment...

見出しサンプルコレクション

18710
YUTO
nem1.35xem (3)
731
4
2019-04-04 11:26:04
見出しサンプルコレクション

この記事は過去記事から内容をまとめたものです。
使ってみたい人は自由にどうぞ!!

 

目次VOLUME.1
VOLUME.2

 

VOLUME.1

 

 

ソースコード

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

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

</p>

 

 

 

ソースコード

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

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

</p>

 

 

 

ソースコード

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

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

</p>

 

 

 

ソースコード

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

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

</p>

 

 

黄緑

 

ソースコード

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

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

</p>

 

 

 

ソースコード

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

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

</p>

 

 

青緑

 

ソースコード

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

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

</p>

 

 

 

ソースコード

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

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

</p>

 

 

 

ソースコード

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

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

</p>

 

 

 

 

ソースコード

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

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

</p>

 

 

ここまでソースコードをご覧いただけると、各々違いがあるのは色を指定する部分だけであることがわかります。
色は「#◯◯◯◯◯◯」で指定します。
◯の中には16進数(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, Fの計16種類の文字で表記する数)の値のいずれかが入ります。
どんな値を入力すれば希望の色になるのかは、Webで「RGB カラー」と検索するか、twitter(Twitter Web Client)の「ホーム」>「プロフィール」>「プロフィールを編集」>「テーマカラー」で確認できます。

 

VOLUME.2

 

 

サンプル1

 

ソースコード

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

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

</p>

 

 

サンプル2

 

ソースコード

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

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

</p>

 

 

サンプル3

 

ソースコード

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

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

</p>

 

 

サンプル4

 

ソースコード

<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>

 

 

サンプル5

 

ソースコード

<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>

 

 

サンプル6

 

ソースコード

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

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

</p>

 

 

サンプル7

 

ソースコード

<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>

 

 

色を変えたい場合は「#◯◯◯◯◯◯」部分に各々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 カラーコード」などのキーワードで検索するとよいです。

 

 

☕️Column: なぜ各色の成分は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

 

Comment
YUTO
YUTO
2019-04-04 23:36:12ID:96525

>>ほなねむ::さん
たくさんあり過ぎてまようぇーい!!
この記事を見ると、見出しのカスタマイズの仕方がわかるから、いろんなバリエーションが作れるうぇーい!!

ほなねむ
ほなねむ
2019-04-04 23:29:16ID:96503

たくさんあって迷ううぇーい(๑•̀ㅂ•́)و✧

YUTO
YUTO
2019-04-04 12:46:35ID:96196

>>Radio NEMber::さん
ぜひ、使ってみてください。

Radio
Radio
2019-04-04 12:44:54ID:96195

ありがとうございます。今度使ってみます〜

この記事を書いた人
NEMのユートピアを目指してるYUTOです!! nemlogでは、イベント情報のまとめ記事や、記事の感想記事を中心に書いています。 nemlogがユートピアになるように、着々と計画中です!!