BLOG自分の経験をシェアしたい。Webデザインのテクニック&効率化。2018/11/04Tweetスタイルガイドは色々ありますが、初心者には設定が面倒だったり、バージョンアップされないために後から使えなくなったりと、困ることがあります。スタイルガイドがない場合、他の人にコーディングを頼む時に、教えるのが大変です。後から更新する時に、どんなCSSがあるのか忘れてしまい困ることがよくあります。スタイルガイドを手軽に作る方法は、preタグを使うことです。略で、<PRE>~</PRE>で囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。<PRE>-HTMLタグリファレンスhttp://www.htmq.com/html/pre.shtmlスタイルガイドの作り方スタイルガイド用のHTMLを準備し、CSSを読み込んでおきます。スタイルガイドにしたいHTMLをコピペします。btn-primary">Primary</button>例えば上記のようなHTMLは、括弧を実体参照にする必要があるので、下記のサイトなどで変換します。akiyan.com変換したソースコードをpreタグ内にいれます。btn-secondary&quot;&gt;Secondary&lt;/button&gt;</pre>サンプルはこちらこれで完成です。デザインは、CSSで調整すれば大丈夫です。必要な時にスタイルガイドからコピペすれば、素早くコーディングできます。スタイルガイドを作っておけば、後からCSSを調べたり、忘れて似たようなクラスを作ることを防げます。他の人から質問されることも減り、時間の節約になります。HTML/CSSなので、特殊なツールもテクニックも必要なく、初心者でも手軽に作成できます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト関連記事コーディングの前にCSSの命名規則を紙に書いてみるCSSで一番迷うのが、ネーミングです。...3分で設定完了。...Webデザイナーで、転職がうまくいかない場合のひとつの方法として運よく憧れのWebデザイナーになれても、残業続きで条件面も悪く、すぐに退職。最近のWeb業界は人手不足で経験者を積極採用しているケースが多いです。多岐のジャンルのWebサイトを数百件制作。広範囲な知識・技術・経験を活かした素早い制作が得意。WACA上級ウェブ解析士。地方でもマルチデバイス対応を求められることが多くなってきました。優しくナチュラルな雰囲気を出したい場合は手書き風のデザインは相性がいいです。1分くらいで簡単に文字を「手書き風」にすることができるテクニックです。使うこのギザギザの丸(円)。BLOG自分の経験をシェアしたい。Webデザインのテクニック&効率化。