スポンサーリンク

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
ラベル: , , ,

人気の投稿

  • [Elixir]Proxy環境下でElixirを無理やり動かす！
    Proxy環境下でElixirを動かすまでにやったこと 社内の環境だとProxyがあるためうまく動かないことはわかっていた。 時間ができたので、突貫でElixirの仮環境を作成しました。 突貫で作業したので、内容に不備があるかもしれません。 もし問題が発生しましたら、...
  • [Sinatra+MongoDB]Sinatraの掲示板にMongoDBを使ってみた。
    タイトル：[Sinatra+MongoDB]Sinatraの掲示板にMongoDBを使ってみた。 目的：Sinatraで作成した掲示板を改良する。書き込みデータの管理にMongoDBを使用する。 実施環境： OS：Windows8.1 Ruby：v2.2.2 Sin...
  • Rubyのエンコーディングについて
    タイトル：Rubyのエンコーディングについて 目的：Rubyのエンコーディングについての備忘録を作成すること 以下の環境により実施 OS：Windows8.1 Ruby：v2.2.2 x64 ディレクトリ構造： 作業ディレクトリ |-encoding-test....
  • sinatraを使ってみた。
    タイトル：sinatraを使ってみた。 目的：sinatraのテストプログラムを書く。 以下の環境により構築 OS：Windows8.1 Ruby: v2.2.2 x64 RubyDevKit：DevKit-mingw64-64-4.7.2-20130...
  • [Elixir]Pipe演算子とパターンマッチで遊ぶ
    Goal Pipe演算子とパターンマッチを組み合わせて、実行できる関数を制限する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.5 Wa...
  • [Backend Phoenix]後ろの棚の万能薬(Elixir) - 目次
    Goal Phoenixをバックエンドサーバ(APIサーバ)として利用する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.4 Phoenix F...
  • [Elixir]Streamの使い方を習得する
    Goal Streamの使い方を習得する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.5 Wait a minute 今回はStr...
  • [Elixir]Cowboy基礎の基礎
    Cowboy基礎の基礎 Goal Elixir+Cowboy(2系)でHello World(text/plain)を表示する PlugからCowboyを使って、起動からリクエストを処理するまでのフローを眺める (Code Reading) Foreword ...
  • [Phoenix]PhoenixとEctoのコマンドまとめ
    目的 PhoenixとEctoのコマンドについて把握する。 実行環境 OS： Windows8.1 Erlang： Eshell V6.4, OTP-Version 17.5 Elixir： v1.0.4 Phoenix Framework： v0.13.1...
  • [Elixir]ezファイルを作成して、"mix archive.install"する
    Goal .ezファイルを作成して、”mix archive.install”する。 Dev-Environment OS: Windows8.1 Erlang: Eshell V6.4, OTP-Version 17.5 Elixir: v1.0.5 W...