Keep Talking and Nobody Explodes Mod Webデザイン

モジュール詳細：Webデザイン

Webデザインの授業へようこそ。Webデザインの極意その1、「Comic Sans MSについて話すべからず」。極意その2、「Comic Sans MSについて絶対に話すべからず」。極意その3、「ColorにUを入れて綴るべからず」。

  • モジュールは、画面上にCSSファイル内のスニペットを表示する。
  • 与えられた情報を用いて、コードを採用 (✓)、検討(Δ)、不採用(✗)のどれかを行わなければならない。

ステップ1：Webサイトを選択する

コードの引用元のWebサイトを見つける。コードのセレクタ部分({より前の部分)を用いて、一つのサイトに絞り込み、閾値を書き留める。

Edison Daily (ニュースサイト)

要素: body, a, h3, blockquote

ID: #header, #comments

クラス: .post, .title, .author

閾値: #00FF00

Buddymaker (ソーシャルメディア)

要素: div, span, img, a

ID: #msg, #cover, #content, #sidebar

クラス: .post, .title, .share

閾値: #8040C0

PNGdrop (画像管理)

要素: div, img

ID: #main, #comments, #fullview

クラス: .username, .share, .large

閾値: #BADA55

BobIRS (チャットルーム)

要素: ul, ol, img, b, i

ID: #sidebar

クラス: .avatar, .username

閾値: #03E61E

Vidhost (動画管理)

要素: div, iframe, b, i

ID: #main, #rating, #comments

クラス: .username, .share, .channel

閾値: #60061E

Go Team Falcon online (オンラインゲーム)

要素: body, iframe

ID: #rating, #comments

クラス: .rating, .fullscreen

閾値: #501337

Stufflocker (クラウドストレージ)

要素: div, h3, img, iframe

ID: #sidebar, #download

クラス: .menu, .author

閾値: #B020E5

Steel Nexus (フォーラム)

要素: body, div, img, blockquote

ID: #header, #content, #sidebar

クラス: .avatar, .reply

閾値: #BEA61E
ページ 1/2
Keep Talking and Nobody Explodes Mod Webデザイン

ステップ2：カラーターゲットを探す

CSSファイル内にある最初の色の名前を探し、下の表を使ってその色の十六進数の値を求める。 この値は カラーターゲットであり、後程利用することになる。色の名前が表示されていない場合、#7F7F7Fを用いる。

色 十六進数 色 十六進数 色 十六進数
Blue #0000FF Yellow #FFFF00 Red #FF0000
Green #00FF00 White #FFFFFF Orange #FFA500
Purple #800080 Magenta #FF00FF Gray #808080

注意： 色の十六進数表記は、#RRGGBB形式で色を表す。

ステップ3：サイトスコアを計算する

以下の手順でサイトスコアを求める：

  • {中括弧}内のコードの行数から始める。 行の終端を示すセミコロンを数えるのも一つの手である。
  • それぞれにつきスコアを+3する：
    • カラーターゲットのRの値が閾値のRの値未満である。
    • カラーターゲットのGの値が閾値のGの値以上である。
    • カラーターゲットのBの値が閾値のBの値より大きい。
  • margin/paddingそれぞれにつきスコアを+2する。
  • 0pxまたは50%ではないborder/border-radiusそれぞれにつきスコアを+1する。
  • モジュール上にpositionの指定がないなら、z-indexそれぞれにつきスコアを-1する。
  • font-familyそれぞれにつきスコアを+1する。ただし、それが“Comic Sans MS”なら、スコアを-5する。
  • noneではないbox-shadow/text-shadowそれぞれにつきスコアを+2する。
  • モジュールのボタンが3色の場合、スコアを×2し、グレー1色の場合はスコアを-3する。
    • 色覚モードが有効である場合、代わりにボタンが白であるならスコアを×2し、黒の場合はスコアを-3する。
  • スコアが0以下の場合、正の数になるまで16を足し続ける。
  • 一桁の数字になるまで、左の桁の数字と右の桁の数字を足し続ける。そして、次の表を使って、どのボタンを押せばよいかを決定する。
採用(✓) 検討(Δ) 不採用(✗)
2, 3, 5, 7 6, 8 1, 4, 9
ページ 2/2