connecting...
Google translation for articles :
3 NEMBER donated to you!!

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

nem1.35xem (3) 395 4 2

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

 

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

 

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber
YUTO
2019-04-04 23:36:12ID:96525

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

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

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

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

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

NEMber who posted this article

NEMのユートピアを目指してるYUTOです!!
nemlogでは、イベント情報のまとめ記事や、記事の感想記事を中心に書いています。
また、ネムログサイエンス同好会やモナコイン同好会を開き、コミュニティが活発になるようにしています。
nemlogがユートピアになるように、着々と計画中です!!
18710
0