120
93

More than 3 years have passed since last update.

Markdownでカラーコードの色見本を表示するTips

Last updated at Posted at 2020-05-26

プロダクトのブランドカラーに関する情報をMarkdownでドキュメント化するときなどに、カラーコードだけではなく色見本が見れたほうが視覚的に分かりやすかったりします。

この投稿では、Markdownでカラーコードの色見本を画像で表示する方法を紹介します。

Markdownでカラーコードの見本を表示する方法

https://placeholder.com/ というダミー画像をURLで指定して生成できるサービスを使います。

![](https://via.placeholder.com/16/c7e7f6/FFFFFF/?text=%20) `#c7e7f6`
![](https://via.placeholder.com/16/abdbf1/FFFFFF/?text=%20) `#abdbf1`
![](https://via.placeholder.com/16/6ec1e9/FFFFFF/?text=%20) `#6ec1e9`
![](https://via.placeholder.com/16/47b1e1/FFFFFF/?text=%20) `#47b1e1`
![](https://via.placeholder.com/16/0093d6/FFFFFF/?text=%20) `#0093d6`
![](https://via.placeholder.com/16/221816/FFFFFF/?text=%20) `#221816`

↓ 例えばGitHubではこのように表示されます:

test.png

Qiitaだと、コードで書いたカラーコードは#c7e7f6のように自動で色見本がつく親切設計なので、Qiitaでは不要なテクニックですが、GitHubのREADME.mdやIssue、Qiita:Team以外の社内ナレッジ共有ツール、Markdownに対応した課題管理ツールなどでご活用ください。


最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローしてもらえると嬉しいです:relieved:Twitter@suin

120
93
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
120
93