現場のプロが本気で教える HTML/CSSデザイン講義の内容をRails5で実装する
| ソフトウェア | バージョン | 備考 |
|---|---|---|
| ruby | 2.4.0 | |
| rails | 5.0.1 | |
| vagrant | 1.8.2 | |
| docker | 1.12.1 | |
| docker-compose | 1.8.0 | |
| heroku-cli | 5.6.10 |
- セットアップ
- よいCSSを書くためのHTMLマークアップ-CSS設計-
$ vagrant up
$ vagrant ssh
$ cd /vagrant
$ bundle
$ ./bin/rails s -p 3000 -b '0.0.0.0'
http://127.0.0.1:3000から動作を確認する
Dockerのセットアップ
$ vagrant ssh
$ cd /vagrant
$ docker-compose build
$ cd /vagrant
$ docker-compose up
http://127.0.0.1:8888から動作を確認する
Herokuへのデプロイ
$ cd /vagrant
$ heroku create rails5-bem
$ git push heroku master
https://rails5-bem.herokuapp.com から動作を確認する
- ヘッダー
- カルーセル
- サムネイル画像付きコンテンツ
- オーバーレイパネル
- アイコン付きコンテンツ
- ニュースリスト
- フッター
- Blockの最初の文字は大文字で書くこと
- Elementの最初の文字は小文字で書く
- BlockとElementは「__」でつなぐ
- Modifierをつける場合は「--」でつなぐ
- 最初は「見た目」からコンポーネントを割り出す
- 大文字や小文字などをうまく使い分ける
- 長いclass名はエディタの保管機能を使えば怖くない
- どんなサイトを作る場合でも、まずリセットCSSを導入する
- コンポーネントごとにファイルを分けて、一覧できるようにする
- 変数は、変数だけのファイルを作成すると管理が楽になって効率的
- コンポーネントを、まずはBlockとして作ってみる
- 複雑なコンポーネントはBlockの中にBlockを作ってみる
- Elementは汎用的な命名をなるべく使い、どこのBlockに属するのかをわかりやすくする
- レイアウトは極力Flexを使って書く
- Flexのショートハンドの書き方に慣れる
- それ以上細かくできないコンポーネントはpartsとして作る
- レイアウトについてはCSSからわかるように「l-」を付ける
- レイアウトはコンポーネントではないのでpartsフォルダに作成する
- Sassの四則演算を上手に使ってレイアウトを整える
- JavaScriptを読み込む位置は、bodyタグの終了タグの位置
- JavaScriptと連携しているところは「js-」という接頭語をつける
- 状態についてのCSSは「isXXX」という命名規則を使う
- 疑似要素を使って、かしこくclassの指定をする
- ページ専用の要素はコンポーネントとは別管理にする
- 変数をセレクタで使える「インターポレーション」
- baseフォルダ
- componentsフォルダ
- commonフォルダ
- pageフォルダ
- ただ作るのではなく、どのフォルダに属するのかを意識しながら作る
- main.cssにコメントを残し、どういうファイルがあるかがひと目でわかるようにする
- アイコンフォントと画像の違いを理解する
- アイコンフォントは解像度に左右されない
- FontAwesomeは便利なので、使い方をマスターする
- WebFontはフォントの表現幅が大幅に上がる
- WebFontをmixinとしておくことで、使いやすなる
- WebFontを使いすぎるとパフォーマンスが下がるので注意する
- 汎用的なclassとわかるように「u-」の接頭辞をつける
- 汎用的なclassを使ってうまくレイアウトを整える
- コンポーネントの修正以外の視点を持つ
- Media Queriesはレスポンシブの基本なので必ず覚える
- @contentをうまく利用して、効率よくレスポンシブサイトを作成する
- レスポンシブについてのCSSはmixinにして再利用可能にする
- 新たに作るのではなく、すでに似たものを作っていないかという視点を持つ
- 既存のコンポーネントを組み合わせて新たなページを作成する
- Modifierを使ってデザインを調整する
- Flexを使えば、面倒なサイドバーのレイアウトも簡単に
- コンポーネントベースで作ると、ページ固有のCSSを少し追加するだけでほぼ１ページ作れる