00.画面表示

Hello, world.

まずは画面の構成から

textareaを使うことに決めちゃいましたので、それっぽい画面を構成します。それっぽいということで背景黒で文字が緑で……という感じのレトロ感あふれるものをイメージ。ただ調べてみると背景黒に緑文字って実は目にあまり良くないらしいので、オレンジにしておきます。指定はスタイルシートを使うことにしました。部分的な色変更を動的にすることは考慮していませんので固定でよさそう。サイズは80x25文字のたぶん一般的なもの。

      textarea {
        cursor: default; /* textarea でカーソルが縦棒にならないようにする */
        font-size: inherit; /* フォントサイズは引き継ぐ */
        font-weight: bold; /* 太字にして見やすくする */
        line-height: 1; /* 行の高さは余白なしのぴったりにしてそれっぽくする */
        border-width: 0; /* 枠は不要 */
        outline: none; /* ブラウザが勝手にフォーカス強調するのを防ぐ */
        overflow: hidden; /* もし文字が収まらないような状況が発生しても意図していないはずなので影響させない */
        white-space: pre; /* 改行は自前で管理 */
        resize: none; /* サイズは固定 */
        width: 40em; /* emは文字の高さを単位にするので、等幅フォント半角80文字分なら40em */
        height: 25em; /* 高さは文字数のまま指定すればよい */
        /* むかしのディスプレイぽい色合いにする, グリーンではなくアンバーのほうにした */
        background-color: black;
        color: orange;
      }

画面らしさの追求

このままだと「画面らしさ」がない単なる板なので、角を丸くするとかいろいろやってみます。画面はベゼルというかブラウン管での電子ビーム範囲外の余白ぽい感じがあるほうがそれっぽい気がしますので、外枠としてdivを設定しました。これにより色を反転させることがあっても「表示外の黒枠」になるので画面らしさが向上しそう。今後を考えてidを付与（"gconsole"）しておいて、それを起点としてCSSを設定します。

      #gconsole {
        box-sizing: border-box; /* レイアウトをイメージしやすくする */
        font-family:monospace; /* 等幅フォントにする */
        font-size: 1.0rem; /* ここを調整して文字サイズを決める */
        padding: 0.25em; /* ちょっと余白をつける */
        border-radius: 0.5em; /* 角を丸めてモニタっぽく見せる */
        border-width: 0; /* 枠線自体は不要 */
        background-color: black; /* 背景は黒 */
        display: flex; /* 中はtextareaひとつだけどblockの無駄な余白が出ないようにするために使用 */
        width: fit-content; /* divだけど行単位ではなく必要な幅だけにしたい */
        & textarea {
          /* 省略 */
        }
      }

実際に画面を表示する

単純なtextareaを構成するだけです。例にならって Hello, world. を出しておきましょう。

      <div id="gconsole">
        <textarea readonly>Hello, world.</textarea>
      </div>

リソース

gconsole.css

00.画面表示

まずは画面の構成から

画面らしさの追求

実際に画面を表示する

リソース

関連