cles::blog

HTML を書く時は個々の要素に直接 style を書かずに、CSS にまとめて書くというのがウェブ開発の定石になって久しいわけですが、サイトの一部だけを別の場所にコピペしたい（例えばHTML メールを作成する際に）場合に、依存している CSS を調べるなどの手間がかかるので困ることがあります。

そんなときには CSS を HTML の各タグの style に展開してくれるインライン化サービスを使うと、一撃で解決することができます。オンラインで使うことができるサービスは沢山ありますが、どれを使ってもほぼ同様の結果が得られました。

• Responsive Email CSS Inliner
• HTML email inline styler
• CSS Inliner Tool | Email Design Reference
• Online CSS Inliner

いままでアドオンで対応していた Firefox のタブの位置ですが、アドオンが UI に手を出せなくなったしまったようなので、YouTube に上がっていた方法に従ってカスタマイズしてみました。

動画だとちょっとわかり辛いところもあるのですが、自分の Firefox のプロファイルに chrome\userChrome.css というファイル（chrome というフォルダがなければフォルダも作成）に以下の内容を追加してやれば OK です。プロファイルの場所については %APPDATA%\Mozilla\Firefox\Profiles\(ランダムな文字列).default\ のような感じになっているはずです

† 2019/1/30 追記

Firefox 65 以降はこの方法が効かないので、以下の方法を使う必要があります。

• Firefox 65+ で Tab をアドレスバーの下にするには

時系列表示をするライブラリを調べていて Timelined という CSS だけでタイムラインを表示するライブラリを見つけたのでメモ。画像を見たりするよりもデモページから触ってみるのが簡単です。ライセンスも MIT なので使いやすそうですね。

• andriussev/timelined: A customizable CSS-only vertical timeline

最近のウェブデザインはすっかりCSSが標準になってきました。込み入ったサイトを作れば作るほどCSSの容量も大きく、複雑になってきますが、そんなCSSの記述を最適化して整形してくれるCSS Tidyというツールを見つけました。HTML TidyのCSS版と考えればよさそうです。

CSSTidy

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality). In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

ウェブデザインを恒常的にこなす場合は一つインストールしておくといいかも知れません。一度だけでいいやという場合には、CSS最適化ツール (based on CSSTidy 1.2)のように公開されているものを使うのが手軽でよさそうです。