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を参考に。

コードを更に理解する

WordPressをより自由に、思い通りに使用するにはPHPの知識が必要です。

PHPを学ぶには、Web上での情報や知識には限界があるので、人に教えてもらうのが一番の近道です。

そこでオススメなのが「CodeCamp」です。

マンツーマン指導なので、わからないことはすぐ聞けて、無料体験レッスンもあるのでどんな感じか試せます。


ITエンジニア専門スクールもオススメです。

スポンサーリンク

おわりに

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

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


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク