最近、sassにもだいぶ慣れてきました。
コード管理をスマートにしてくれるsassですが、コードが大量になると流石に煩雑になりがちです。
そこで、大量のソースを複数ファイルに分割してインポートしてみます。

例えばsassの変数をまとめたファイル「_values.scss」を用意します。
ファイル名の先頭にアンダースコアを入れたものをパーシャルファイルといいます。
パーシャルファイルはsassコマンドを実行してもコンパイルされず、「values.css」は生成されません。importされる専用の外部ファイルとして扱われます。

$color-link: #2266bb;
$font-size-l: 2.0rem;

その他に、reset.cssの内容をまとめたファイル「_reset.scss」。

a{
	color: $color-link;
}

モジュールをまとめたファイル「_modules.scss」などを用意します。

.module01{
	font-size: $font-size-l;
}

QRコード生成ツールです。
任意の生成するQRコード画像のサイズと文字列を入力し、「生成」ボタンを押下すると、文字列を組み込んだQRコードを生成します。

PHPでカラーコード「HEX」を「RGB」に変換する方法です。

CMSで設定したテーマカラーなどに透過率を指定したく、既にHEXで設定されているカラーコードでは都合が悪かったので、システム内でRGBに変換しました。

HEXとRGBの違いについては、赤、緑、青の3原色を、それぞれ16進数、10進数で表現しています。
したがって、処理としてはシンプルに16進数を10進数に変換すればよいだけです。

例えば、任意の赤「#F44336」をRGBに変換します。

Ubuntu 16.04でタスクの自動実行を設定してみます。

Windowsではタスクスケジューラで、ウイルスチェックやファイルバックアップを定期的に実行しますが、Linuxではcron機能を追加ます。

昔ながらの「/etc/cron.d/」にあるファイルを直接編集する方法もありますが、今回はcrontabコマンドを使ったタスク管理の方法を確認します。

crontabコマンドを使うことで、直接ファイルを指定して編集することなく、また、ユーザ毎に設定を編集することができます。

cronタスクの確認

$ crontab -l

crontabの設定内容の確認方法です。
基本的には初期状態では何も設定されていないはずなので、「no crontab for user」というようなメッセージが帰ってくると思います。

HTMLエンティティを変換するツールです。

昨今、SNSやネットショップ会員など、やたらアカウント＆パスワードを作成する機会が多いですね。
その都度、パスワードを考えるのがめんどくさくて、簡単なパスワードを使いまわしていませんか？
私も毎回億劫に感じて、同じパスワードで登録していたのですが、セキュリティ的に絶対やってはいけません。

そこで簡易パスワード生成ツールを作成しました。

矢印や吹き出しの三角形部分を、CSSのafterやbeforeといった疑似要素で実装する機会が増えました。
毎度、細かい調整につまづいたりするので、ここでまとめておきます。

CSSで三角形を作る原理

まず、CSSで三角形を作る原理ですが、太いborderを引くと分かりやすいですよね。

width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
border-left: 50px solid green;

統合開発環境「Atom」のインストール方法と、私が使用している便利なプラグイン一覧です。
Atomは2014年にGithubから公開された次世代のテキストエディタです。
Atom

個人的にはHTML、CSS、JavaScript、PHPなどの統合開発環境として、2015年ごろまではeclipseを使用していましたが、現在はAtomを重宝しています。

さすがはGithubから出てるだけあって、最小限必要なベースの部分はしっかりしており、特に不便を感じずにコーディングやプログラミングができます。
さらに、多くのプラグインが日々アップデートされており、機能が改善され、より便利になっていくようすも楽しいです。

2018年にMicrosoftによるGit買収の報道がありましたが、このまま使いやすいAtomであり続けてほしいと願っています。

Bootstrap4を導入した環境でplaceholderの文字色が濃く、薄くしようと以下のようにCSSを記述したのですが、効かず。。。

::placeholder{
  color: #cccccc;
}

散々、試行錯誤したあげく、以下の方法で適用できることを知りました。

.form-control::placeholder{
  color: #cccccc;
}

時間がかかったのでメモ。。。

TortoiseGitを使って、Windows端末からリモートのGitサーバに接続する環境を作ってみます。

WindowsのコマンドプロンプトなどからGitコマンドを実行するのもよいですが、GitのブランチやマージなどGUIで確認できたほうがわかりやすいこともありますよね。
そこで今回は私も利用しているTortoiseGitの紹介です。

環境構築にあたり、私のクライアント側の各ソフトのバージョンを記しておきます。