CSSでアイコンを作成してみた（その1）
はじめに
アイコンがほしい。作りたい。
自力で画像やSVGにてアイコンを作成できればいいのですが、私にIllustratorやInkscapeのスキルはございません…。
そういえば、世間ではCSSでアイコンを作成している方がいらっしゃいます。
当初は仕組みを全然理解していませんでしたが、調べて作成するところまでやってみました。
もし使いたい方がいれば、ご自由にコピペしていってください。
こんな感じです
ソースコード
下記の内容をhtmlファイルとして保存して、ブラウザで開いてみてください。
Google Chrome、Firefox、IE11の最新版で確認は済んでおります。
- "font-size"をいじると大きさが変えられます。
- 色を変えるには「#c0c0c0」を差し替えてください。
<html> <head> <style type="text/css"> <!-- .icon-building { display: inline-block; vertical-align: middle; font-size: 50px; width: 1.0em; height: 1.3em; border: 0.1em solid #c0c0c0; border-radius: 0.1em; margin: 0 0.2em; background: /* 上段窓、左から */ linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.1em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.1em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.1em / 0.2em 0.2em no-repeat, /* 中段窓、左から */ linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.4em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.4em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.4em / 0.2em 0.2em no-repeat, /* 下段窓、左から */ linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.7em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.4em 0.7em / 0.2em 0.2em no-repeat, linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.7em 0.7em / 0.2em 0.2em no-repeat, /* 入り口 */ linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.3em 1.0em / 0.4em 0.3em no-repeat; } //--> </style> </head> <body> <span class="icon-building"></span> </body> </html>
ポイント
ここでの肝は"backgroup"と"linear-gradient"でしょう。
linear-gradientを使いつつもグラデーションせず、複数の四角形を位置をずらして作成しております。
"linear-gradient"行を細かく説明すると、こんな感じです。
linear-gradient(to bottom, #c0c0c0, #c0c0c0) 0.1em 0.1em / 0.2em 0.2em no-repeat
--------------------------- ----------- ----------- ---------
| | | |
`- 上から下に向かって、同じ色でグラデーション(塗りつぶしと同義)。
| | |
`- 開始位置。"background-position"。
| |
`- サイズ。"background-size"。
|
`- 繰り返し描画。"background-repeat"。"to bottom"はデフォルト値なので、なくてもよいですが説明のためにつけています。
他にも…
こんなものも作れます。
<html> <head> <style type="text/css"> <!-- .icon-battery { display: inline-block; vertical-align: middle; font-size: 50px; width: 1.7em; height: 1.2em; margin: 0 0.2em; background: /* 電池本体(上の横線から時計回りに並べました) */ linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.0em / 1.4em 0.1em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.0em / 0.1em 0.2em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.2em / 0.3em 0.1em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.6em 0.2em / 0.1em 0.5em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.7em / 0.3em 0.1em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.4em 0.8em / 0.1em 0.2em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.9em / 1.4em 0.1em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 0.0em 0.0em / 0.1em 0.9em no-repeat, /* 電池残量 */ linear-gradient(#c0c0c0, #c0c0c0) 0.2em 0.2em / 0.3em 0.6em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 0.6em 0.2em / 0.3em 0.6em no-repeat, linear-gradient(#c0c0c0, #c0c0c0) 1.0em 0.2em / 0.3em 0.6em no-repeat; } //--> </style> </head> <body> <span class="icon-battery"></span> </body> </html>
最後に
ご覧の通り、比較的単純なアイコンであれば、わりと簡単に作れます。
※手間はかかりますけど…
より複雑なアイコンを作成しようとすると、疑似要素を使用する必要が出てくると思いますが…
それはまたの機会に。
デザイナーさんでなくとも、こういったアイコンが自力で作成できるのはいいですね！
画像と違って、拡大してもきれいに見えるのもポイントが高いです。
以上でした。
MySQL Workbenchが停止したときの対処法
どんな現象？
MySQL Workbenchが突如、落ちることがあります。
しかも、一度落ちたら立ち上がらない。
しかも、結構頻発します。
「アプリケーションが応答していません」
みたいなダイアログが出て、固まってしまうんですね。
ちなみに原因はわかっておりません…
【2017/02/20 追記】
動かなくなったときの設定ファイルとの差分を見てみましたが、それでもわからず…。
でも対処法はわかる
「%APPDATA%\MySQL\Workbench」ここにある「wb_options.xml」このファイル。
このファイルを消すだけで、起動するようになります。
しかし…
設定した内容がどうも消えてしまうようなんですよね。
再設定にいつも困るので、それもメモをしておきます。
【2017/02/20 追記】
最近は接続が成功した後に、「wb_options.xml」をリネームして同じフォルダに入れております。
で、動かなくなったらこれと入れ替える。
最低限やっておきたい設定
MyISAMなのにオートコミット？
Workbenchはデフォルトでオートコミット機能がONになっています。
なんて危険な…！
というわけで、私はオートコミット機能をOFFにしています（チェックを外します）。
データを反映させるときは、COMMITを忘れずに。
タブよりスペース派
タブキーを入力時に、タブではなくスペースを入力したい人は、チェックを入れましょう。
私は入れたい派です。
最後に…
Workbenchが落ちないのが一番なんですがね…
しばらくこれでしのごうと思います。
2016年版！apt-cyg を入れよう
はじめに
Cygwinを導入しているのなら、apt-cygを入れると便利です。
apt-cygはCygwinのパッケージマネージャーです。
Cygwinのexeファイルを実行することで、インストールもできますけど…
毎回あれを使うのも大変ですし。
注意事項
ちなみに、公式からfolkされたいろんな種類のapt-cygがあるようです。
使用できるオプションも違いがあります。
今回は公式のものをひとつだけ載せておきます。
公式サイトはこちら。MITライセンスです。
github.com
Cygwinにwatchコマンドを入れたい
結論からいうと、これ↓で使えるようになります。
$ apt-cyg install procps
"watch"を直接指定してもダメみたいです。
findしてみた結果が↓こちら。
$ apt-cyg find watch Cache directory is /setup Mirror is http://********** Updating setup.ini signature verified: setup.bz2.sig signature verified: setup.ini.sig Updated setup.ini Searching for installed packages matching watch: Searching for installable packages matching watch: xfce4-mailwatch-plugin xfce4-mailwatch-plugin-debuginfo
ちなみに、apt-cygを使用するにはこちらをどうぞ。
hrroct.hatenablog.com
単なる覚え書きでした。
Firefoxだけbeforeunloadの挙動が違う…
はじめに
一般的に、離脱防止の目的で使用されるであろう、beforeunloadイベント。
タブを閉じたり、ブラウザの「戻る」操作をしたときにダイアログが表示されるため、嫌われモノとなるアレです。
嫌われモノとわかっていても、実装しなければならないこともある。
これはしょうがない…。
さて。
テスト時にようやく気づいたのですが、Firefoxだけ異なる挙動をするようです。
（テスト時のバージョンは47.0です）
ちなみに、メッセージの内容がダイアログに表示されない云々…という話ではありません。
何が違うのか？
ダイアログが表示されない場合があります。
ページが表示されて、何も操作をせずにページを移動しようとする/閉じようとすると、ダイアログが表示されません。
どこでもいいので、クリックしてから閉じると表示されます。
マウスホイールくるくるでも、表示されます。
（実際スクロールしなくてもOK）
何かしらの操作をすることが、トリガーになっているようです。
調べてみた
どこかにこれに関する情報はないものか？と思ったらこちらにありました。
Firefox44から、こういう動作なのですね。
結構前じゃないか…。
全然知りませんでした。
