RailsTutorial

【Ruby on Rails 独学】Railsチュートリアル 第5章1レイアウトを作成する Bootstrap導入

【目的別おすすめプログラミングスクール】
  • WebCampPRO
    |転職成功率98%!エンジニアとして転職したい人におすすめ
  • ポテパンキャンプ
    |Railsエンジニアとして自社開発企業に転職したい人におすすめ
  • テックアカデミー
    |オンラインでプログラミングを学びたい方におすすめ
  • Aidemy
    |AI(人工知能)分野特化のスクール。AIを学びたいならここ

第5章ではBootstrapフレームワークの組み込みとカスタムスタイルを学ぶ。
さらに各種リンクの追加などを学んでいく

5.1 構造を追加する

何のスタイルもない寒々しい外観のアプリケーションでいつまでも作業を続けていると憂鬱になってしまいます。

確かに何にもデザインないままではなかなか見た目に進捗がわかりにくく、モチベーションアップしずらいところはある。

ということでこの章ではレイアウトに最小限のスタイルを追加していく。

5.1.1 ナビゲーション

第一段階、サンプルアプリにリンクとスタイルを追加するためにapplication.html.erbにHTML構造を追加していく。

リスト5.1に書き換え。

すべてのHTML要素にはクラスとidの両方を指定することができ、CSSでスタイルを指定するときに便利。
[box class=”box27″ title=”クラスとidの違い”]
クラス = ページ内で何度でも使える
id = 一度しか使えない[/box]

divタグは一般的な表示領域を表し、要素を別々のパーツに分けるときに使われる。

<%= link_to "sample app", '#', id: "logo" %>

<% %>で囲まれた部分が埋め込みのRubyコード。
リンクを生成するためにRailsヘルパーのlink_toを用いる。
link_toの第1引数はリンクテキスト、第2引数はURL、第3引数はオプションハッシュになる。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

error: Content is protected !!