編集ガイド
効率的に作業を進めるためのガイドです。
ページ名のルール
画面や要素をアイコンとして切り出す際の命名規則
原則として、先例に従います。
GIF画像を埋め込む場合
1. GIF/で始まるページを作成する
ページ名がGIF/で始まるものは自動的に非表示になります。
2. GIF画像を貼り付ける
3. 埋め込みたいページに戻り、アイコンとして埋め込む
アイコンのリンクを [/ ]で囲うことで、大きく表示できます。
例：[/ [GIF/カテゴリー/開閉.icon]]
GIF/カテゴリー/開閉.icon
スクリーンショット
Google Chromeや、Firefoxなどのブラウザには、開発者向けツールが内蔵されています。
F12で出るかも？coolwind0202.icon
お使いのブラウザのヘルプをご確認ください
開発者向けツールを使うと、要素のスクリーンショットを撮影できます。
丁寧に切り抜かなくてもきれいに撮影できて便利です。
方法
Google Chrome
Firefox
こんなときは
撮影した画像の左側・右側に余白がある
coolwind0202.icon
モーダルの子要素の場合
経験則として、親要素のうちオーバーフローしている要素にmargin-left/rightがかかっていることが多いです
これを切って対処しています
要素が縦に長くて撮影できない
coolwind0202.icon
1. 要素自身にかかっている height: 100% を消します。
1. これで要素の全体が表示されるようになります。
2. ただし、これにより親要素がオーバーフローします。
3. 多くの親要素はoverflow: hiddenがかかってるので、まだ要素の全体は表示できません。
2. 要素自身と、親要素にかかっている overflow: hidden 、overflow-y: hiddenを消します。
この操作は、要素から<body />要素まで遡るようにやっています。
3. 要素の全体が表示されるようになりました。
もちろんスクリーンからは全体を見ることはできませんが、上記のスクリーンショット撮影であれば、全体が撮影できるようになります。
SVG画像
ページに埋め込まれたSVG画像をダウンロードできる拡張機能
書式（例）
Duplicate this pageでコピーできます。
注意
要素の説明は原則要素のページに書きます。
再利用した際に、アイコンをクリックして要素の説明を読めるようにするためです
そもそも要素ページを分離しているのは、アイコンとして再利用するためです
メニューページ内に並んでいる要素アイコンは単なる目次として置いています