スポンサーリンク

2015年6月24日

[Elixir+Phoenix]PhoenixからBootstrap3を使う!+今更CSS入門!?

#目的

Phoenix-FrameworkからBootstrap3を利用する。
CSSの基本/基礎を習得する。(実はCSSをやったことがない)


#実行環境

OS: Windows8.1
Erlang: Eshell V6.4, OTP-Version 17.5
Elixir: v1.0.4
Phoenix Framework: v0.13.1
Bootstrap: v3.3.5


#始める前に

う~む、Rails Tutorial第五章のレイアウトが分からん。
理由は単純、CSSとBoostrapが分からない。
なので、簡単にCSSの基本/基礎習得すると共に、
PhoenixへBootstrapを入れて遊んでみる。

ついでにブログのテンプレートをカスタマイズしてみたいので、
ここらで習得をしようかと思いました。

プロジェクトの作成手順は以下の通り。
>cd プロジェクト作成ディレクトリ
>mix phoenix.new bootstrap_sample
>cd bootstrap_sample
>mix phoenix.server
>ctrl+c

以降、プロジェクトと言えば"bootstrap_sample"を指し示す。


#目次

1. Bootstrap3を導入する
2. Bootstrap3を使ってみる
3. CSSの基本/基礎を習得する
4. コマンドで生成されるテンプレートを見てみる
5. まとめ


##1. Bootstrap3を導入する

Phoenixでは、Bootstrap(v3.1.1)がデフォルトで入っているみたいですね。
カスタマイズされている可能性はありますが、
利用際して特に問題もないですし、最新版が使いたいといったことがなければ、
これでこと足りると思います。

実際に最新版を入れて使ってみた後、
最新版一式を削除してみたら、
問題なく動作していましたので概ね問題ない思います。

以上、導入終わり。


##2. Bootstrap3を使ってみる

次は、実際に少し使ってみます。

利用するものですが、グリッドシステムを使ってみようと思います。
Bootstrap3の大きな特徴らしいので・・・


- グリッドシステム

web/templates/page/index.html.eexを開く。
以下の内容を記述する。
----
<div class="row">
  <div class="col-md-1">col01 md1</div>
  <div class="col-md-1">col02 md1</div>
  <div class="col-md-1">col03 md1</div>
  <div class="col-md-1">col04 md1</div>
  <div class="col-md-1">col05 md1</div>
  <div class="col-md-1">col06 md1</div>
  <div class="col-md-1">col07 md1</div>
  <div class="col-md-1">col08 md1</div>
  <div class="col-md-1">col09 md1</div>
  <div class="col-md-1">col10 md1</div>
  <div class="col-md-1">col11 md1</div>
  <div class="col-md-1">col12 md1</div>
</div>

<div class="row">
  <div class="col-md-4">col01 md4</div>
  <div class="col-md-4">col02 md4</div>
  <div class="col-md-4">col03 md4</div>
</div>

<div class="row">
  <div class="col-md-8">col01 md8</div>
  <div class="col-md-4">col02 md4</div>
</div>

<div class="row">
  <div class="col-md-6">col01 md6</div>
  <div class="col-md-6">col02 md6</div>
</div>
----

カラム数は合計で12カラムまでとなっています。
足し算すると全て合計12ですね。
なので、合計で12になるようにレイアウトを行うようです。

試しにどれかcol-md-12としてみれば、
レイアウトが変わるので分かると思います。

また、確認し辛いなと感じた方は以下のようにすると、
背景色が付いて分かりやすいと思います。
----
<div class="row">
  <div class="col-md-4" style="background-color: blue;">col01 md4</div>
  <div class="col-md-4" style="background-color: yellow;">col02 md4</div>
  <div class="col-md-4" style="background-color: red;">col03 md4</div>
</div>
----


- オフセットを入れる

web/templates/page/index.html.eexを開く。
先ほどの部分を以下のように編集する。
----
<div class="row">
  <div class="col-md-1 col-md-offset-1">col01 md1 offset1</div>
  <div class="col-md-1 col-md-offset-2">col02 md1 offset2</div>
  <div class="col-md-1 col-md-offset-3">col03 md1 offset3</div>
  <div class="col-md-1 col-md-offset-1">col04 md1 offset1</div>
  <div class="col-md-1">col05 md1</div>
</div>

<div class="row">
  <div class="col-md-4 col-md-offset-4">col01 md4 offset4</div>
  <div class="col-md-4">col03 md4</div>
</div>

<div class="row">
  <div class="col-md-8 col-md-offset-4">col01 md8 offset4</div>
</div>

<div class="row">
  <div class="col-md-6 col-md-offset-3">col01 md6 offset3</div>
  <div class="col-md-3">col02 md6</div>
</div>
----


- ネストさせる

web/templates/page/index.html.eexを開く。
以下の内容を記述する。
----
<div class="row">
  <div class="col-md-8 col-md-offset-4">row01 col01</div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">row02 col01</div>
    <div class="col-md-3">row02 col02</div>
  </div>
</div>
----

レイアウト作るの大分楽になりますね。

今更ですが、
Bootstrapを利用するメリットについて記述しておこうかと思います。
-1 洗練、統一されたデザインを適用可能
-2 レスポンシブWebデザインに対応
-3 テーマ、色合いを変更するのが容易

調べてみたらこんな感じでした。

とりあえず使うと言う目的は達したので、
CSSの基本/基礎に行ってみましょうか。


##3. CSSの基本/基礎を習得する

HTMLは文書の意味、CSSは見栄えの定義、意味と見栄えを分離できる。
今更、誰もやらないと思いますけど、べた書きから入っていきます。


- スタイルの定義方法

web/templates/layout/application.html.eexを開いて下さい。
以下の内容を記述して下さい。
(h2タグの色を変更します。headタグの中に定義して下さい)
----
<head>
...
<style type="text/css">
<!-- h2 { color: red; } -->
</style>
...
</head>
----

では、実行して確認しましょう。
"Welcome to Phoenix!"の記述が赤色で表示されましたね。


- その他の記述方法

大半のタグにはstyle属性を付けることができるようです。
なので、以下のような定義が可能です。

web/templates/page/index.html.eexを開いて下さい。
以下のように記述を変更して下さい。
----
<h2 style="color: blue;">Welcome to Phoenix!</h2>
----

実行してみると文字が青色に変わりましたね。
もう一つ分かったことがあります。

レイアウトのテンプレートでheadタグ内に
スタイルを定義したものが残っていると思います。
しかし、赤色ではなく青色で表示されました。
これはローカルの方が優先されると言うことですね。

複数のスタイルを指定してみましょう。
----
<h2 style="color: blue; font-size: 64pt;">Welcome to Phoenix!</h2>
----


- 自作CSSファイルを作ってみる

priv/static/cssのディレクトリへ以下のファイルを作成する。
名称: my_sample.css

内容は以下の通り。
----
h2 { color: red; }
----

web/templates/layout/application.html.eexを開いて下さい。
headタグ内に以下の記述を追加して下さい。
----
<link rel="stylesheet" type="text/css" href="<%= static_path(@conn, "/css/my_sample.css") %>">
----


- 基本をまとめる

h1 { color: red; }を分解してみる。

以下のようになる。
h1 = selector
color: red; = declaration (宣言)
color = property (属性)
red = value(値)

※ 親要素に指定されているスタイルは子要素に継承される。

selectorには、スタイルを適応する対象の要素を指定する。
単一要素を指定
h1 { color: red; }

複数要素を指定
h1, h2 { color: red; }

結合子または子孫セレクタ。ulタグのli要素を指定
ul li { color: red; }

class="sample"を持つ要素を指定
(多分割かし見る機械が多いのがこれだと思います)
.sample { color: red; }

id="sample"を持つ要素を指定
#sample { color: red; }

class="sample"を持つdiv要素を指定
h1.sample { color: red; }

CSSのコメント
コメントの書き方は/*~*/で囲む。
例) /* コメント */

CSSの優先度
上の方にちょろっと書きましたが、
正確にはこう言った順番で優先されるようです。

優先度: style属性、id指定、class指定、タグ指定の順
※ 同じ優先度ならば後から定義されたものを優先

最低限の予備知識ならこれくらいで大丈夫かな?
と言ってもBootstrapのソース見てもさっぱりだが・・・(当然)


##4. コマンドで生成されるテンプレートを見てみる


コマンドを実行。
----
>mix phoenix.gen.html User users name:string email:string
----

web/router.exへ以下を追加。
----
resources "/users", UserController
----

migrateする。
----
>mix ecto.create
>mix ecto.migrate
----

ファイルの場所は、web/templates/userディレクトリの配下にあるテンプレートファイル。

細かいスタイルの種類までは分からないので説明はしません。
ですが、何となく記述は分かると思います。
多分、BootstrapをPhoenixで使うシンプル例だと思います。

というわけで後は各自で参照して下さい。


##5. まとめ

とりあえず、これで簡単なソースコードなら読んでも分かると思う・・・多分。
スタイルの種類を知らないから細かくは分からないけど・・・
これで、第五章を実践して記事にできる。

Tutorialは、もちっとサクサク進めたかったのですが、
読者の方々には申し訳ない。

今回のプロジェクトはGithubへアップしておきました。
アップしたソースコードにはtableとnavを使ったサンプルも記載してます。
役に立つか分かりませんが、よかったら見て下さい。
Github: https://github.com/darui00kara/phoenix_tutorial/tree/master/bootstrap_sample

いや~、デザインできる人って凄いわ・・・


#参考文献

Boostrap - Getting Started
http://getbootstrap.com/getting-started/

Designup - 初心者のための簡単なBootstrap3のはじめ方
http://designup.jp/bootstrap3-beginner-91/

@IT - Webデザイン初心者でもできる、Bootstrapの使い方超入門
http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html

Find Jod Startup ideas & Framework - 今日からはじめる!Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜
http://www.find-job.net/startup/twitter-bootstrap-3

HTMLクイックリファレンス - CSSの基本
http://www.htmq.com/csskihon/index.shtml

とほほのスタイルシート入門(基礎知識)
http://www.tohoho-web.com/css/basic.htm

やさしいホームページ入門 - CSS入門
http://www.ink.or.jp/~bigblock/css/

WebWork IT技術全般の学習サイト - スタイルシート入門
http://www.webword.jp/cssguide/

とほほのスタイルシート入門(使用例)
http://www.tohoho-web.com/css/sample.htm

Qiita - Google HTML/CSS Style Guide まとめ
http://qiita.com/Sugima/items/785644372397595644ba?utm_content=buffera0e4f&utm_medium=social&utm_source=plus.google.com&utm_campaign=buffer

人気の投稿