自分好みのVS Codeのテーマをブラウザでプレビューを見ながら作成できる・「Theme Studio」
Theme Studioは自分好みのVS Codeのテーマをブラウザでプレビューを見ながら作成できるWebアプリです。 使い方は簡単で、各所の色を決めていくだけ、というものになりますが、その「各所」の数が非常に大量にあります。全部で240か所くらいだと思います。 全てを1から決めるのではなく、一応ダークとライトの雛型が用意されていますのでどちらかを選んで色を決めていき、終わったらJSONファイルをダウンロードして利用する、という流れの様です。 左カラムで場所を選び、任意の色を決めていく作業になります。 場所は多くに3つに分けられていて、左上のタブで選択できます。「COLORS」ではサイドバーやタイトル、ボタンなど外観メイン、「EDITOR」では名前通りエディタの機能部分の色、「SYNTAX」はコードのカラーになります。 インストール前に確認できるのは良いですよね。僕自身はATOM派でVS
配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ
2017年6月17日 Webデザイン, 便利ツール, 色彩 配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！ ↑私が10年以上利用している会計ソフト！ Color Tool – Material Design Color ToolはGoogleのマテリアルデザインの公式配色ツール。右側のパレットからPrimary（メインカラー）とSecondary（サブカラー）を選択すると、左側でプレビューできます。文字色も選べますよ。プレビュー画面は全部で6つ。 このWebサイトの面白いところは、作成
GIFアニメーションを一覧でプレビューしつつ検索できる「GIPHY」
「GIPHY」はGIFアニメーション専用の検索サイトです。ワード検索やタグ検索によって好みのGIFアニメを簡単に検索できるほか、見つけたGIFアニメはTwitterやFacebookで共有したり、サイトに埋め込んだりすることができます。 Search in a Giphy http://giphy.com/ トップページはこんな感じになっていて、GIFアニメがたくさん表示されています。 個別のGIFアニメにマウスカーソルをのせるとアニメーションの再生が始まります。 画面上には、検索バーと「Browse」ボタン。 Browseボタンを押すと…… 人気カテゴリと、各カテゴリで人気のある検索ワードが表示されるので、ここから好きなGIFアニメを探してもOK。 検索バーから試しに「cat」と検索してみました。 猫のGIFアニメがいっぱい。 GIFアニメをクリックすると、画像サイズが大きくなってアニメ
Movable Typeで未公開の記事をプレビューできる「PreviewDraftEntriesプラグイン」
Movable Typeで未公開の記事をプレビューできる「PreviewDraftEntriesプラグイン」を公開します。 １．機能 Movable Typeのデフォルト機能では、未公開のブログ記事やウェブページについて、記事編集画面でプレビューを行うことはできますが、テンプレート編集画面で未公開の記事をプレビューすることができません。 「PreviewDraftEntriesプラグイン」を利用すれば、テンプレート編集画面で未公開記事のプレビューを行うことができるようになります。 このプラグインでは以下の2点を考慮しています。 テンプレートに対し、新たにプレビュー用のテンプレートタグなどを設定する必要はありません。 公開記事と混在させてプレビューしたい場合や、プレビューをしたくない未公開の記事を含めたくないケースを考慮し、プレビューする記事IDをテンプレート編集画面で直接指定します。 例え
コメントプレビューでカスタムフィールドの値を表示する
Movable Typeのコメントプレビュー画面でコメントのカスタムフィールドの値を引き継いで表示するカスタマイズを紹介します。 １．問題点 コメントのカスタムフィールドをコメント投稿フォームに表示する方法は次のようになっています。 <input type="hidden" name="blog_id" value="<MTBlogID>" /> <input type="hidden" name="customfield_beacon" value="1" id="customfield_beacon" /> <mt:CommentCustomFields> <mt:SetVarBlock name="custom_field_name"><$mt:CustomFieldName$></mt:SetVarBlock> <mt:SetVarBlock name="field-content
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Griddy - CSS Grid System Education Tool
GithubやBitBucketでホストされている任意のHTMLファイルをプレビューするブックマークレット・「HTMLPreview」
これはいい！HTML5とCSS3の便利なツールがまるっと揃っている -Web Directions
投稿前にスマフォやタブレットでの表示状態もプレビューできるようにするWordPressプラグイン・Responsive Post Preview