経験知ロゴ

Gumbyの使い方

gumby使い方
WordPressのテーマ作成に Sass + compass + Gumby を使うための設定」でGumbyを使えるまでの設定方法を書きました。

この記事ではGumbyの使い方、コードの書き方を紹介します。

同梱されているファイルで確認

Gumbyをセットしてまず困るのが、どのクラスを追加するとどのようなことができるのか分からないこと。

Gumbyをダウンロードしたフォルダに含まれる「demo.html」と「ui.html」を見て、そのクラスを調べれば大体のことはできる。

レイアウト

「demo.html」にはレイアウトの内容が含まれている。
gumbyのレイアウト

これを参考にし、レイアウトを組む。

要素の調べ方

上記方法で視覚的にレイアウトを見ても、そこからソースコードを探していたらとても面倒なので、要素の調べ方も紹介。
ChromeかFirefoxで調べたい要素を右クリックし、「要素の検証」をクリック。Firefoxの場合は「要素を調査」。要素の検証

下からソースコードが出てきて、右クリックした要素がハイライトされている。ので、そのクラスを使えば良い
要素のハイライト

他の要素も調べたい時は下から出て来たソースコードをタップすると上の通常ブラウザ部分もハイライトされるのでとても見やすい。

注意点として、このレイアウトの場合はひとつ上のdivのclass「row」と併せてセットなので構造も理解しないといけない。

ボタンやテーブル、タブなどの細かい要素

ボタンやテーブルなどは「ui.html」で見ることができる。気に入ったものがあったら上記方法で調べて使う。
uiボタン

head内

headないで読み込むファイルは「demo.html」か「ui.html」のheadを参考に。

フリーランス向けの高額案件紹介

仕事を請け負っても、単価が安くて売上が伸びず複数案件をこなさなければならない。

ということありませんか?

エンジニアファクトリーは高単価案件を持ち、エンド直請けの仕組みにより高額案件を実現しています。

無料で登録できますので、どのような高額案件があるか確認してみてください。

おわりに

Gumbyの公式サイトでも使い方の説明はされていますが、実際に表示されている「demo.html」と「ui.html」のソースコードを見た方が分かりやすいと思います。

まだGumby駆け出しですのでいろいろ勉強していきたいと思います。

▼役に立ったらシェアをお願いします