HTMLを使ってコンソールの表現をたびたびするのですが、ブログのテンプレートはフォントの修飾が定義されているので、そのまま書くといまいちコンソールっぽさが出ません。

普通に書くと、下記のような記述になります。


<table bgcolor="black" width="100%">
<tr><th>
<font color="white">
$ sudo apt-get update
</font>
</th></tr>
</table>


表示はこんな感じ。



$ sudo apt-get update



やはりフォントの修飾を消したくなりますよね。しかし、このフォントの修飾を消すのは意外と難儀な作業になります。テンプレートで定義されたCSSの内容を理解した上で消さないといけないからです。

私が使っているテンプレートの場合、"text-shadow" とフォントの "bold" が設定されているので、下記のように記述してキャンセルしてみました。


<table bgcolor="black" width="100%">
<tr><th>
<span style="text-shadow:none; font-weight:normal; color:white">
$ sudo apt-get update
</span>
</th></tr>
</table>


こんな感じになります。コンソールらしくなりました。



$ sudo apt-get update



簡単そうで意外と難しいTIPSでした！
( ´ ▽ ` )ﾉ





今すぐ使えるかんたん　ホームページ　HTML&CSS入門

  • 作者: リブロワークス
  • 出版社/メーカー: 技術評論社
  • 発売日: 2015/07/23
  • メディア: 大型本



HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

  • 作者: エビスコム
  • 出版社/メーカー: ソシム
  • 発売日: 2014/10/28
  • メディア: 単行本



HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

  • 作者: 草野 あけみ
  • 出版社/メーカー: 翔泳社
  • 発売日: 2013/03/12
  • メディア: 大型本