FEVDES BLOG

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

CSS

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

投稿日:2018年10月29日 更新日:

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

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

また、後から更新する時に、どんな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なので、特殊なツールもテクニックも必要なく、初心者でも手軽に作成できます。

PR

PR

-CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

3分で設定完了。コピペでできるgulpでCompassのコンパイル

gulpでCompassのコンパイルを、コピペで済ますようになって、最初の設定が3分で済むようになりましたので、いつもやっている手順を紹介します。 2017/10/16 browser-sync追記 …

フラットデザイン向けのシンプルで美しいCSS3グラデーションジェネレーター

「Blend—Generate Simple and Beautiful CSS3 Gradients」は、 フラットデザインにあう色が限定に、 グラデーション用のCSSジェネレーターです。 Blen …

CSSのcalcで、width:100%からマイナスpx指定する

CSSでcalcがあるのを知ってましたが、使いどころがわからずに、放置していました。 例えば、こちらのサンプルのように、レスポンシブなどで、画像の幅は固定し、テキスト部分は伸縮する時に使えますね。 c …

これは便利!ソースとプレビューが見られる「Bootstrap 4 Cheat Sheet」

Bootstrap 4 Cheat Sheet レスポンシブや効率的にコーディングする場合に便利なBootstrapのチートシートです。 ソースコードとプレビューがでるので便利ですね。

【CSS/JS】もっと目立たせて欲しいと言われた場合のTipsまとめ

キャンペーンサイトなど、動きをつけて、もっと目立たせて欲しいなどの要望を受けることは多いのではないでしょうか。言われて探すのは結構手間がかかったりします。見栄えする動きを中心にまとめました。 Phot …

PR




人気の記事

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。