スタイルシートに悩まされた日々でした。スキルとしてはかなりある方ですが、制作したものを編集することがほとんどで、ゼロから作ることなんてありませんでした。検索&検索の日々でしたね。おそらく、まだ修正があるのかな? Webサイトの制作作業って、マッサージと一緒で「ここ、そこ、あこ、どこ?」と言われるのと似ていませんか?

pen

制作中に、このスタイルシートは使える! と思い、忘れずにテクニックをメモしておこうと思います。それが、タイトル見出しに記載した、蛍光ペンで好きな領域まで引くスタイルシートです。例えば、賢威7.0では既に用意されています。

脱出ゲームの謎解き好きな講師のWebサイト!

賢威7.0を過大評価するわけではありませんが、まるでパレットから色を選ぶようにソースコードが共通しているので、ほんと美しいゆえに使いやすいです。ただ、今回のお仕事ではマーカーを文字の下半分だけ塗るというアクセントを出したかったので、このような結果となりました。

以下は、span style でダイレクトに記述してあります。

脱出ゲームの謎解き講師のWebサイト!

脱出ゲームの謎解き講師のWebサイト!

脱出ゲームの謎解き講師のWebサイト!

当サイトのタイトルでもあるTransparentという透過性を増やせば増やすほど、マーカーの幅が狭くなっていく、といった感じですね。また、色指定のあとのパーセンテージは、マーカー上部のぼやかし具合になります。ここは0%でもよさそうだけどね。

ソースコードは、このとおり。

クラス名を自分なりに定めてあげれば、使いたい放題ということですね。

勉強や仕事は、必ず黄色いマーカーを携えていたので、黄色いマーカー表記は大好きです。けれども、あまり使いすぎると、どこが大事なポイントかわからなくなってしまうんですけどね(^^;

管理人の大好きなCSSコードです。