CSS3で透過指定

お疲れ様です。
５月１日に入社した三輪です。

今回エンジニアブログが初めて自分に回ってきたのですが、
書くネタがなさ過ぎて投稿が遅れました。
すみません。。

だいぶ前にCSS3の勉強をしていた時に、
こんなスタイル指定ができるようになったのかと感動した指定方法があったので、
ちょっとマイナーですがご紹介します。


背景色の透過

■背景色：skyblue(透過なし)

何もしない状態

■背景色：skyblue(透過あり opacity)

背景/文字が透過

■背景色：skyblue(透過あり CSS3でrgba指定)

背景だけ透過

【ソース(CSS/HTML)】

div#one {
  background:skyblue; opacity: 0.5;
}
div#two {
  background-color:rgba(135,206,250,0.5);
}
※0.5の部分が透過値

<p>■背景色：skyblue(透過なし)</p>
<div>何もしない状態</div>
<p>■背景色：skyblue(透過あり opacity)</p>
<div id="one">背景/文字が透過</div>
<p>■背景色：skyblue(透過あり CSS3でrgba指定)</p>
<div id="two">背景だけ透過</div>

エンジニアとしてまだまだ未熟なので、
これから色々と知識を身につけ、
成長していきたいと思っています。
それでは、今後ともよろしくお願いします。

Greasemonkey用スクリプト

こんにちは、またまた書くのが遅くなったhodori です。


今回はGreasemonkey用のスクリプトについて話そうと思います。


そもそも、GreasemonkeyとはFireFoxのアドオンで誰かが作った指定のページで
動作するjavascriptを実行できるようにしてくれるもので、
Chromeにも拡張機能で使う方法が幾つかあったりします。


主な使い方はＷｅｂサービスにブラウザ側で好きな機能を追加するみたいな感じで
自分の場合は某ソーシャルゲームの補助ツールを入れて楽をしていたりします。




Greasemonkeyで使われるスクリプトは基本下記のようなコメントから書き始めます。

// ==UserScript==
// @name           Google Search Add Range(Gsar)
// @namespace      http://labs.37to.net/gsar/
// @description    Add form by date range to Google search result.
// @include        http://www.google.co.jp/search*
// ==/UserScript==

この＠から始まる各パラメータがスクリプトの動作を制御する形になります。


・@name
　　Greasemonkeyなどで登録される際の識別名になります。
　　同じスクリプトの別バージョンを使い分けたい場合などはこの名前を別の物にしてあげる必要があります。
・@namespace
　　ネームスペース、自サイトのアドレスなど。無くても動作に問題なし。
・@description
　　説明、同じく無くても動作に問題なし。
・@include
　　スクリプトを動作させるサイトのＵＲＬを記入します。ワイルドカード「*」が使えるのと
　　複数行記述できるので、関連サイト全部とか指定したページのみとかの指定もできます。


例）ブラウザ三国志のプロフィールと都市のページのみで実行する場合

// @include         http://*.3gokushi.jp/user/*
// @include         http://*.3gokushi.jp/village.php*

・@excludes
　　スクリプトを適応しないＵＲＬ、@includeで「*」を使ったことで含まれてしまうけど
　　機能が必要ないページで実行されないように設定できる。


Greasemonkeyは便利だけど重くなるという人は使っているスクリプトの
これらの部分をカスタマイズして必要なページだけで使うようにすると重くならずに
便利な機能を使い放題になる……かも？