Blog2019.12.23SasakiHTML/CSSコーダー必見!「hologram」を用いたスタイルガイド生成Web制作HTML・CSSコーディングSCSShologramシェアTweetこんにちは!ずっとhologramについて調べようと思っていてやっと手を出せました!*hologramとは?hologramはrubyで動作するプラグインです。利用するにはrubyをインストールしましょう。hologramを使うことで、CSS中に書いたコメントを用いて、スタイルガイドを生成してくれます。(HTMLテンプレートみたいなものです)rubyが入っていない場合には、このあたりでインストールrubyがはいっているかわからない方は、下記のようなコマンドで確認をしてみましょう。-v下記のような応答があればインストール済みです。生成された「hologram_config.yml」を修正する。init」コマンドを叩いて初期ファイルを生成サイトのドキュメントルートで下記コマンドを叩きましょう。下記のような書式で記入します。base---ボタンのスタイルはbuttonタグかaタグに付与してください。}}下記はコメント部分の説明です。グルーピングしたい名前を指定します。※ここで指定した名称がhtmlファイル名に利用されます。---ここに概要文を記入します(このあとの空白改行は必須です)```html_exampleここにサンプルHTMLタグを記入します。btnDefault">クリック</button>```*/**生成された「hologram_config.yml」を修正する。initしたあとに設定ファイルが生成されているので、必要に応じて修正します。下記説明を付与してみました。スタイルガイドを生成するディレクトリを指定します。スタイルガイド生成時に利用する、アセットをいれる場所を指定します。スタイルガイド生成用のテンプレートファイルの場所を指定します。hologramでデフォルト対応していない拡張子などを利用する場合に指定します。ここで指定したディレクトリにはいっているファイル郡が、生成時にスタイルガイドディレクトリにコピーされます。トップページに指定するカテゴリを設定します。ナビゲーションのレベル設定を指定します。allを指定するとすべて表示し、sectionにするとsub-sectionまでを表示します。最後に下記のコマンドでスタイルガイドを生成します。hologram_config.yml***すると、スタイルガイドが下記のように生成されます。自身でスタイルシートを作成すれば、スタイルガイドのデザインは自由に変更が可能です。***例えば、公式にあるスタイルガイドのテンプレートを使うと・・・・いい感じになりましたね!スタイルガイドのデザインは使い回しが効くので、ひとつテンプレートを作っておくと良さそうですね!以上、ざっくりとした利用方法でした。大きなプロジェクトなどでスタイルガイドを作成しておくと、とても便利ですよね。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。