FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

Webデザイナーが簡単にできる手作りスタイルガイド

      2018/11/04

スタイルガイドは色々ありますが、初心者には設定が面倒だったり、バージョンアップされないために後から使えなくなったりと、困ることがあります。

スタイルガイドがない場合、他の人にコーディングを頼む時に、教えるのが大変です。

また、後から更新する時に、どんなCSSがあるのか忘れてしまい困ることがよくあります。

スタイルガイドを手軽に作る方法は、preタグを使うことです。

<PRE>タグはPreformatted Text(整形済みテキスト) の略で、<PRE>~</PRE>で囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。

<PRE>-HTMLタグリファレンス
http://www.htmq.com/html/pre.shtml

スタイルガイドの作り方

スタイルガイド用のHTMLを準備し、CSSを読み込んでおきます。

スタイルガイドにしたいHTMLをコピペします。

例えば上記のようなHTMLは、括弧を実体参照にする必要があるので、下記のサイトなどで変換します。

HTML実体参照変換 : akiyan.com

変換したソースコードをpreタグ内にいれます。

サンプルはこちら

これで完成です。デザインは、CSSで調整すれば大丈夫です。

必要な時にスタイルガイドからコピペすれば、素早くコーディングできます。

スタイルガイドを作っておけば、後からCSSを調べたり、忘れて似たようなクラスを作ることを防げます。

他の人から質問されることも減り、時間の節約になります。

HTML/CSSなので、特殊なツールもテクニックも必要なく、初心者でも手軽に作成できます。

 - CSS