Webデザイン制作支援リファレンス

どんなものか

困り事から引くと、つまみで動く見本とそのまま貼れるコードが出てくる、Webデザインの制作作業台です。

なぜ作ったか

制作の途中で手が止まったときに引ける、自分用の引き出しとして始めました。読むだけでは手が動かないと分かったため、画面上で試して持ち帰れる作業台へ作り直しています。

見どころ

• 困っていることから探すと、答えのそばで見本をつまみ調整でき、できたCSSをその場でコピーできます。
• トップは等高線の地図になっていて、入口の島を押すとその一覧へ直行します。
• 画面の組み立て例は貼るコードそのものをプレビューし、動きのある素材は調整した設定のまま持ち帰れます。

できること

• 困り事から、試せる見本と貼れるコードを引けます
• つまみを動かすと見本がその場で変わり、CSSをコピーできます
• 画面の組み立て例を、貼るコードそのものの見た目で確認できます
• 動きのある素材は、速さや色を変えた設定のまま単一のHTMLとして持ち帰れます
• 同じ題材を、違う様式やデザインシステムの画面として見比べられます

特に工夫したところ

• トップは等高線の地形で入口を選び、当たった島は丘が持ち上がって輪郭が広がります。狭い画面では同じ色の一覧に切り替わります。
• 見本はiframeに閉じ、資料側のCSSと混ざらないようにしています。HTMLとCSSは読み取り専用の対で見せ、値の出どころを出発点のCSSへ辿れます。
• 原稿はMarkdown、公開物は素のHTMLです。画面に出る件数は原稿から数えて埋めるので、資料が増えても表示と中身がずれません。
• JavaScriptが無くても全ページ読め、地図の入口も選べます。

実際に触ってみる