●コードブロックのファイル名の見た目を変える

目的

コードブロックの中身を視覚的にわかりやすくするため

テーブルのタイトルをクリックした時の挙動をわかりやすくするため

配色・デザインを自分好みにするため

code:style.css

code:script.js

code:index.html

code:text.txt

code:quote.qte

code:tweets.tw

table:table

やっていること

コードブロックとテーブルのファイル名部分の配色などを変更

背景を白、フォント変更、box-shadowでボタン風に

コードブロックのtitle（コードの種類）に応じて表示するアイコンとカラーを設定

テーブルのファイル名に表アイコンと「.csv」を設定、右側にダウンロードのアイコンを表示

ファイル名をクリックするとcsvファイルがDLされることがわかるように

「.csv」はCSSのcontentで表示しているだけなのでテーブル名として入力しているわけではない

備考

コードブロックでtxt、qte、twをつけてテキストを記載する使い方はこのプロジェクト内ではやっていないが、そのうちやるかもしれないのでついでに設定

qteとtwはアイコンと色を変えるために便宜上拡張子として設定しているもの

自分用のCSSではコードブロック内もフォントをUDデジタル教科書体にしている

一般的にコードはコード用のフォントであったほうが良いであろうと思われるので閲覧者用ではそのまま