関東の鉄道の駅番号表示用CSS

2016年11月20日 公開

不慣れな外来者のために、複雑な路線を持つ都市部では駅に順に番号を振るのが流行しています。とくに、東京圏ではオリンピックを控え、ガイジンの利用が見込まれるため、一気にそちらに流れに乗ったように感じます。

1120.jpg

でも、使われているのは駅の現場のみ。各鉄道会社のウェブサイトを見ても、まだまだ書いていないなど対応が遅れている状況で、広告に駅番号を振って案内するなんてのは要望されないどころか話題にものぼりません。

書くことが増えすぎてもspamですからね。

そこで、フォトPが運営するあるサイトで実験的に関東だけ駅番号を表示をしてみることにしました。新しいコンテンツはもちろん、すでに世に放ったコンテンツもだんだん追加していく予定です。

しかし、表示するのって面倒なんですよね。文字情報がただ増えるのもどうかと思うし、ただ書いたってただ見過ごされるのがオチなのではないかとも思います。そこで、ラインカラー等を使って、駅に表示されているものに少し近づけた見た目を用意したらどうかと考えました。

そのためのCSSを、せっかくなので置いておきます。

/*囲み*/
.meg, .mez, .mef, .mem, .meh, .met, .mec, .mey, .men, .mea, .mei, .mes, .mee, .nt, .kk, .ti, .tn, .td, .tj, .ts, .kk, .en, .tr, .ks, .sl, .hs, .sr, .oh, .oe, .ot
{border-radius:6px; padding:1px;}
/*地下鉄*/
.meg {border: 2px #f39700 solid;}
.mez {border: 2px #9b7cb6 solid;}
.mef {border: 2px #bb641d solid;}
.mem {border: 2px #e60012 solid;}
.meh {border: 2px #9caeb7 solid;}
.met {border: 2px #00a7db solid;}
.mec {border: 2px #009944 solid;}
.mey {border: 2px #d7c447 solid;}
.men {border: 2px #00ada9 solid;}
.mea {border: 2px #e85298 solid;}
.mei {border: 2px #0079c2 solid;}
.mes {border: 2px #6cbb5a solid;}
.mee {border: 2px #b6007a solid;}
/*東武*/
.kk {border: 2px #33C2E4 solid; color:#5A6389}
.ti {border: 2px #E61919 solid;}
.tn {border: 2px #F5A200 solid;}
.td {border: 2px #40B4E5 solid;}
.tj {border: 2px #00428E solid;}
.ts {border: 2px #006CBA solid;}
/*京急*/
.kk {border: 2px  solid;}
/*小田急*/
.oh,.oe,.ot {border: 2px #0D82C7 solid; color:#0D82C7}
/*箱根 小田急と記号が同じなのでどうしたらいいか悩む*/
.ohh{border: 2px #EA4D15 solid; color:#6A3906}
/*江ノ電*/
.en {border: 2px #F6BE18 solid;}
/*東葉*/
.tr {border: 2px #5AB65C solid;}
/*京成*/
.ks {border: 2px #005AAA solid; color:#005AAA}
.sl {border: 2px #EF59A1 solid; color:#EF59A1}
.hs {border: 2px #00BDF2 solid; color:#00BDF2}
.sr {border: 2px  solid; color:#00A650}


/*ベタ*/
.jk, .jy, .ja, .js, .jt, .jo, .jh, .jn, .ji, .jb, .jc, .jm, .ju, .jj, .jl, .je, .mo, .r, .u, .ty, .dt, .mg, .om, .ik, .tm, .sg, .kd, .mm, .so, .b, .g
{border-radius:6px; padding:3px}
/*JR東*/
.jk {background: #00accd; color: #FFF;}
.jy {background: #71c11d; color: #fff;}
.ja {background: #00c3a4; color: #fff;}
.js {background: #e11f24; color: #fff;}
.jt {background: #ff8920; color: #fff;}
.jo {background: #006ec5; color: #fff;}
.jh {background: #71c11d; color: #fff;}
.jn {background: #fcd600;}
.ji {background: #fcd600;}
.jb {background: #fcd600;}
.jc {background: #ff5710; color: #fff;}
.jm {background: #ff5710; color: #fff;}
.ju {background: #ff8920; color: #fff;}
.jj {background: #00b883; color: #fff;}
.jl {background: #a6a6a6; color: #fff;}
.je {background: #b81e36; color: #fff;}
.mo {background: #26326a; color: #fff;}
.r {background: #38257d; color: #fff; border:2px #89c6cb solid}
/*ゆりかもめ*/
.u {background: #1662b8; color: #fff; border:2px #1662b8 double;}
/*東急*/
.ty {background: #da0042; color: #fff;}
.dt {background: #00aa8d; color: #fff;}
.mg {background: #009bd2; color: #fff;}
.om {background: #f08c42; color: #fff;}
.ik {background: #ee86a7; color: #fff;}
.tm {background: #ae0078; color: #fff;}
.sg {background: #fbc700;}
.kd {background: #0071be; color: #fff;}
.mm {background: #00489A; color: #fff;}
/*相鉄*/
.so {background: #0071C1; color: #fff;}
/*横浜地下鉄*/
.b {background: #2F56A5; color: #fff;}
.g {background: #28846E; color: #fff;}


/*囲みベタ*/
.ko>span, .in>span, .si>span, .ss>span, .sy, .sk>span, .st>span, .sw>span {padding: 1px}
.ko, .in, .si, .ss, .sy, .sk, .st, .sw {padding: 0 1px 0 0}
/*京王*/
.ko {border: 2px #d07 solid;} .in>span {background: #d07; color: #fff;}
.in {border: 2px #04058b solid;} .in>span {background: #04058b; color: #fff;}
/*西武*/
.si {border: 2px #EF7A00 solid;} .sn>span {background: #EF7A00; color: #fff;}
.ss {border: 2px #00A6BF solid;} .ss>span {background: #00A6BF; color: #fff;}
.sy {border: 2px #EC4840 solid;} .sy>span {background: #EC4840; color: #fff;}
.sk {border: 2px #38B35C solid;} .sk>span {background: #38B35C; color: #fff;}
.st {border: 2px #F7AA2C solid;} .st>span {background: #F7AA2C; color: #fff;}
.sw {border: 2px #F17C24 solid;} .sw>span {background: #F17C24; color: #fff;}


/*念のため色だけ付ける*/
/*TX*/
.tx {color:#F00}
/*舎人ライナ*/
.nt {color: #ff69b4}

大きく分類してみると、囲み・ベタ・囲みベタの3種類でした。末尾のTXと日暮里舎人ライナーは、特に表示方法も無いようですが、念のため着色だけ用意しました。シーサイドラインについては用が無いので様子見で放置。小田急は新宿〜小田原と小田原以西と色が違うだけで記号がOHなのが曲者です。

CLASS名においては、路線記号が他路線とかぶらないことが前提のようなので、路線記号をそのまま利用、東京の地下鉄は、もともとの記号に「me」を付けました。

文字色は原則としてもともと黒であることが前提なので、とくに指定していません。また、背景も白であることが前提なので同系色に飲み込まれるための用意はしていません。

.