最近迷走している で おなじみのニャログです
今日も志向を変えて CSS(スタイルシート)でラインマーカーっぽいことをやってみようと思います
本来あまり装飾されているwebページはあまり好きじゃなかったりするのですが
なんだか今日はラインマーカーを引いてみたい気分だったのです
うん そんな気分だったンじゃしょうがない
wikiより
大航海時代(だいこうかいじだい)とは、
15世紀中ごろから17世紀中ごろまで続いたヨーロッパ人による
インド・アジア大陸・アメリカ大陸などへの海外進出をいう。主に西南ヨーロッパ人によって開始された。
以前は地理上の発見あるいは大発見時代と呼ばれていたが、ヨーロッパ中心の概念であるので大航海時代と名称が変わりつつある。
教科書みたいで見ただけで眠くなってきますね
「ここテストに出るぞ!」と言われたら引いてみましょう
↓以下 種明かし(っていう程のことでもないけど)
太い方
/* ラインマーカー(太)のCSS */
.linemarker2_p {background-color: #ff3399;}
.linemarker2_y {background-color: #eeff11;}
spanで指定した部分だけ〈span class="linemarker2_y"〉
太いマーカー〈/span〉でマークされる
細い方
/* ラインマーカー(細)のCSS */
.linemarker_p {background-image: url("細いラインの画像(ピンク)");}
.linemarker_y {background-image: url("細いラインの画像(イエロー)");}
spanで指定した部分だけ〈span class="linemarker_p"〉
細いマーカー〈/span〉でマークされる
「なんだ 画像かよ!」とがっかりされる率80%
アニメーションしない方が 見破られないかもしれない
文字にかからなくていいなら 下線少し太めにすれば画像なしでもいけますね
画像も置いときます 使用するならコピーして使ってくださいね (いわゆる直リン禁止)


さらに おまけ
ちょっとした「クイズの答え」や「スクラッチ(銀はがし)」に便利そうなのを
↓灰色の部分をクリックすると文字が出てきたりします
なぞなぞ: パンはパンでもたべられないパンはな~んだ?
答え:
フライパン今日の運勢 (ひとつだけクリックしてね)
回線切れに注意して!タロットで女帝が出るかも!?レアアイテムGetのチャンスチャットで誤爆しちゃうかも
/* スクラッチのCSS */
.linemarker_s { background-color: #aaaaaa; color: #aaaaaa;}
答え: 〈span class="linemarker_s" onclick="this.className=''"〉
反転したら見えちゃうけどね〈/span〉