Tips – ヘッダーメニュー

2021-03-18 / tau / コメントする

概要

HTMLのheader要素内に固定メニューを配置する。左端にロゴ画像を置き、メニューは右寄せで配置する例。

HTML/CSS

HTML

ヘッダーにdiv要素によるロゴ画像とulによるメニューを配置し、スタイルはCSSで設定する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ヘッダーメニュー</title>
    <link rel="stylesheet" href="header_menu.css">
  </head>
  <body>
    <header>
      <div class="header_logo"></div>
      <ul class="header_menu">
        <li>新規作成</li>
        <li>編　集</li>
        <li>プロフィール</li>
        <li>ログアウト</li>
      </ul>
    </header>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>ヘッダーメニュー</title>

</head>

<body>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</header>

</body>

</html>

CSS

header内のロゴとメニューブロックをFlex-boxで配置し、左右に寄せている。メニューリストの水平配置にもFlex-boxを使っている。

なおheaderを固定してbodyのみをスクロールさせることもできる。

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */
:root {
  --header-height: 50px;
}

/* スタイルをリセット */
* {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  height: var(--header-height);
  background-color: #8ef
}

.header_logo {
  background-image: url('logo_org_simple_transparent.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--header-height) * 2);
  height: var(--header-height);
}

.header_menu {
  display: flex;
  list-style: none;
}

.header_menu li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0px 10px 5px;
  width: 90px;
  font-size: 14px;
  color: #c00;
}

.header_menu li + li {
  padding-left: 5px;
  border-left: 1px solid black;
}

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */

:root {

--header-height: 50px;

}

/* スタイルをリセット */

* {

margin: 0;

padding: 0;

}

header {

display: flex;

justify-content: space-between;

height: var(--header-height);

background-color: #8ef

}

.header_logo {

background-image: url('logo_org_simple_transparent.png');

background-repeat: no-repeat;

background-size: contain;

width: calc(var(--header-height) * 2);

height: var(--header-height);

}

.header_menu {

display: flex;

list-style: none;

}

.header_menu li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 90px;

font-size: 14px;

color: #c00;

}

.header_menu li + li {

padding-left: 5px;

border-left: 1px solid black;

}

最初のブロックでスタイルをリセット。
header要素
- display: flex指定でコンテンツ(ロゴ、メニューブロック)をフロートさせて配置
- justify-contentで2つのコンテンツを左端と右端に寄せる
- 高さを指定
.header_logo
- div要素に背景画像を指定
.header_menu
- Flex-boxによりリストを横並びにしている
.header_menu li
- 最初の3行はリストの中の文字を縦横センタリングする設定
.header_menu li + li
- 隣接セレクターによってリストアイテムの間に境界線を描いている

ロゴのサイズについて

div要素で背景画像のみを表示させるときはwidth/heightを明示的に設定しなければならない
当初はheight: 100%でheaderの高さに合わせ、width: autoで表示されていた
ところがそこで親のheaderにdisplay: flexを設定すると表示が消えてしまった
そこでここでは、グローバルなカスタムプロパティーを使っている

Rails/SCSS

HTML

通常すべてのレンダリング時に使われる共通レイアウト
- app/views/layouts/application.html.erb
これとは別にヘッダーメニューが必要な場合の共通レイアウトファイルを作成
- app/views/layouts/application_with_header.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Styles</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <header>
    <div class="header_logo"></div>
    <ul class="header_menu">
      <li>新規作成</li>
      <li>編　集</li>
      <li>プロフィール</li>
      <li>ログアウト</li>
    </ul>
  </header>

  <body>
    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Styles</title>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</header>

<body>

<%= yield %>

</body>

</html>

ヘッダーメニューが必要なアクションのみこのレイアウトを使うため、コントローラーでレイアウトファイルを指定。

class PagesController < ApplicationController
.....
  def header_menu
    render layout: "application_with_header"
  end
.....
end

class PagesController < ApplicationController

.....

def header_menu

render layout: "application_with_header"

end

.....

end

レイアウトファイルが読み込むスタイルシートは標準と同じapplication.css

 *= require layout.scss

1	*= require layout.scss

requireされるlayout.scssで、ヘッダーメニュー用のSCSSを読み込む(ヘッダーメニューがない場合も読み込む)。

@import "reset.scss";

@import "header_menu.scss";

@import "pages.scss";

@import "reset.scss";

@import "header_menu.scss";

@import "pages.scss";

SCSS

以下のSCSSファイルを作成して読み込ませる。リセットCSSは別に読み込んでいる。

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */
:root {
  --header-height: 50px;
}

header {
  display: flex;
  justify-content: space-between;
  height: var(--header-height);
  background-color: #8ef
}

.header_logo {
  background-image: image-url('logo_org_simple_transparent');
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--header-height) * 2);
  height: var(--header-height);
}

.header_menu {
  display: flex;
  list-style: none;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px 10px 5px;
    width: 90px;
    font-size: 14px;
    color: #c00;
    &+li {
      padding-left: 5px;
      border-left: 1px solid black;
    }
  }
}

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */

:root {

--header-height: 50px;

}

header {

display: flex;

justify-content: space-between;

height: var(--header-height);

background-color: #8ef

}

.header_logo {

background-image: image-url('logo_org_simple_transparent');

background-repeat: no-repeat;

background-size: contain;

width: calc(var(--header-height) * 2);

height: var(--header-height);

}

.header_menu {

display: flex;

list-style: none;

li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 90px;

font-size: 14px;

color: #c00;

&+li {

padding-left: 5px;

border-left: 1px solid black;

}

Tips – フォームのデザイン

2021-03-17 / tau / コメントする

概要

テキストフィールドや送信ボタンなどを含むフォームのデザインについて
input要素などのコンテンツから組み上げる方法と、flex-boxを使った方法の2つ。
フォーム全体のページ内の位置設定についても含めた

共通事項

元になるHTML

3つのinput要素と1つのbutton要素を含むform要素。form_blockというクラスのdiv要素でラップする。

<body>
  <div class="form_block">
    <h1>Input Form</h1>
    <form action="#" method="post">
      <input type="text" name="user_name" placeholder="ユーザー名">
      <input type="email" name="email" placeholder="メールアドレス">
      <input type="password" name="password" placeholder="パスワード">
      <button>サインアップ</button>
    </form>
  </div>
</body>

<body>

<h1>Input Form</h1>

<button>サインアップ</button>

</form>

</div>

</body>

Railsのhtml.erbの場合は以下の様になる。

<div class="form_block">
  <h1>Input Form</h1>
  <%= form_with(url: '#') do |f| %>
    <%= f.text_field(:user_name, placeholder: "ユーザー名") %>
    <%= f.email_field(:user_name, placeholder: "メールアドレス") %>
    <%= f.password_field(:user_name, placeholder: "パスワード") %>
    <button>サインアップ</button>
  <% end %>
</div>

<h1>Input Form</h1>

<%= form_with(url: '#') do |f| %>

<%= f.text_field(:user_name, placeholder: "ユーザー名") %>

<%= f.email_field(:user_name, placeholder: "メールアドレス") %>

<%= f.password_field(:user_name, placeholder: "パスワード") %>

<button>サインアップ</button>

<% end %>

</div>

リセットCSS

CSSでは以下で関係要素のスタイルをリセットする。

body, button, div, form, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body, button, div, form, input {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

Railsの場合は別にreset.cssを準備する(Eric Meyer’s “Reset CSS” 2.0)。

body要素

body要素は背景色だけを設定する。

body {
  background-color: #e8e8e8;
}

body {

background-color: #e8e8e8;

}

方法1～要素スタイルの積み上げ

CSS

CSSの内容

CSSの全体は以下のとおり。以下、手順を分解して整理する。

/* フォームの外枠～フォーム全体の位置調整 */
.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

/* フォームブロックの表題スタイル */
.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

form {
  padding: 12px;
  background-color: #8cf;
}

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin-bottom: 12px;
  padding: 3px 10px;
  font-size: 16px;
}

form button {
  display: block;
  width: 50%;
  margin-top: 10px;
  margin-left: auto;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

/* フォームの外枠～フォーム全体の位置調整 */

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

/* フォームブロックの表題スタイル */

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form {

padding: 12px;

background-color: #8cf;

}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

form button {

display: block;

width: 50%;

margin-top: 10px;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

div要素によるラップ

div要素で表題(h1)とform要素全体をラップする
幅は400pxに設定
高さ指定をしない(auto)なので、子要素に応じて全体の高さが変わる

.form_block {
  width: 400px;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

width: 400px;

padding: 20px;

background-color: #cdf;

}

表題

フォームの表題をh1要素で書いている

.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form要素

form要素のパディングと背景色を設定
幅は親要素のdivにフィットし、高さは子要素群に合わせて変わる

form {
  padding: 12px;
  background-color: #8cf;
}

form {

padding: 12px;

background-color: #8cf;

}

input要素

インラインレベル要素のinputをブロックレベル要素に変更
box-sizingをborder-boxに指定
- これを指定しないとinput要素がはみ出てしまう
幅(width)は親要素に合わせる
高さは32px固定
マージン(下)を設定して間隔をあける

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin-bottom: 12px;
  padding: 3px 10px;
  font-size: 16px;
}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

button要素

インラインレベル要素のbbuttonをブロックレベル要素に変更
幅は親要素formの50%
margin-left: autoで右寄せ
- 中央に置く場合はmargin-right: autoも加える

form button {
  display: block;
  width: 50%;
  margin-left: auto;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

form button {

display: block;

width: 50%;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

フォームの位置調整

もう一度全体をラップしているdiv要素に戻り、bodyに対する位置を指定する
- フォームの左上隅が上端から20%、左端から40%

.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

padding: 20px;

background-color: #cdf;

}

SCSS

RailsなどでSCSSを使う場合の例。

.form_standard {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 300px;
  padding: 20px;
  background-color: #cdf;
  /* フォームブロックの表題スタイル */
  h1 {
    font-family: fantasy;
    font-size: 28px;
    text-align: center;
  }
  // フォーム本体
  form {
    padding: 12px;
    background-color: #8cf;
    // フォーム内のinput要素
    input {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 32px;
      margin-bottom: 12px;
      padding: 3px 10px;
      font-size: 16px;
    }
    // フォーム内の送信ボタン
    button {
      display: block;
      width: 50%;
      margin-left: auto;
      padding: 10px;
      background-color: #ccc;
      font-size: 16px;
    }
  }
}

.form_standard {

position: absolute;

top: 20%;

left: 10%;

width: 300px;

padding: 20px;

background-color: #cdf;

/* フォームブロックの表題スタイル */

h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

// フォーム本体

form {

padding: 12px;

background-color: #8cf;

// フォーム内のinput要素

input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

// フォーム内の送信ボタン

button {

display: block;

width: 50%;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

方法2～flex-box

CSS

CSSの内容

flex-boxを使ったCSSの全体は以下のとおり。フォーム全体の位置設定は方法1と同じ。

      /* フォームの外枠～フォーム全体の位置調整 */
/* フォームの外枠～フォーム全体の位置調整 */
.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

/* フォームブロックの表題スタイル */
.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

form {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 12px;
  background-color: #8cf;
}

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 3px 10px;
  font-size: 16px;
}

form button {
  align-self: flex-end;
  width: 50%;
  margin-right: 0;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

/* フォームの外枠～フォーム全体の位置調整 */

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

/* フォームブロックの表題スタイル */

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form {

height: 200px;

display: flex;

flex-direction: column;

justify-content: space-around;

padding: 12px;

background-color: #8cf;

}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

padding: 3px 10px;

font-size: 16px;

}

form button {

align-self: flex-end;

width: 50%;

margin-right: 0;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

div要素によるラップ

幅は400px
高さはautoとし、子要素のformの髙さに合わせる

.form_block {
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

form要素

方法1と違うのは以下の点。

display: flexで子要素へのflex適用を指定
flex-direction: columnで子要素を縦並びに
justify-content: space-aroundで子要素を均等に配置
高さを200pxに固定

form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 200px;
  padding: 12px;
  background-color: #8cf;
}

form {

display: flex;

flex-direction: column;

justify-content: space-around;

height: 200px;

padding: 12px;

background-color: #8cf;

}

input要素

要素の間隔は自動的に決まるので、方法1で設定していたmragin-bottomを削除している。

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 3px 10px;
  font-size: 16px;
}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

padding: 3px 10px;

font-size: 16px;

}

button要素

button要素もマージンを削除している
右寄せにするため、align-self: flex-endを設定
- 中央に置く場合はcenterを指定

form button {
  align-self: flex-end;
  width: 50%;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

form button {

align-self: flex-end;

width: 50%;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

SCSS

RailsなどでSCSSを使う場合の例。

.form_standard {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 300px;
  padding: 20px;
  background-color: #cdf;
  /* フォームブロックの表題スタイル */
  h1 {
    font-family: fantasy;
    font-size: 28px;
    text-align: center;
  }
  // フォーム本体
  form {
    padding: 12px;
    background-color: #8cf;
    // フォーム内のinput要素
    input {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 32px;
      margin-bottom: 12px;
      padding: 3px 10px;
      font-size: 16px;
    }
    // フォーム内の送信ボタン
    button {
      display: block;
      width: 50%;
      margin-left: auto;
      padding: 10px;
      background-color: #ccc;
      font-size: 16px;
    }
  }
}

.form_standard {

position: absolute;

top: 20%;

left: 10%;

width: 300px;

padding: 20px;

background-color: #cdf;

/* フォームブロックの表題スタイル */

h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

// フォーム本体

form {

padding: 12px;

background-color: #8cf;

// フォーム内のinput要素

input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

// フォーム内の送信ボタン

button {

display: block;

width: 50%;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

Tips – リストを横並びに

2021-03-16 / tau / コメントする

概要

デフォルトのHTML/CSSでは、リスト内の各要素(li)は縦に並べられ、各要素の先頭にマーカーが付される。

このスタイルを変更し、li要素を横に並べるスタイルを設定する。

HTML/CSS

HTML

以下のリストでulタグにクラスを指定し、スタイルを設定する。

<body>
  <ul class="menu">
    <li>新規投稿</li>
    <li>プロフィール</li>
    <li>設定</li>
    <li>ログアウト</li>
  </ul>
</body>

<body>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</body>

CSS

CSSの例は以下のとおり。

/* リセットCSS */
body, div, li, ul {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* リストのul要素全体のスタイル */
.menu {
  list-style-type: none;
  display: flex;
}
/* 個々のli要素のスタイル */
.menu li {
  margin: 10px;
  padding: 10px;
  width: 100px;
  background-color: #ccc;
  text-align: center;
}

/* リセットCSS */

body, div, li, ul {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* リストのul要素全体のスタイル */

.menu {

list-style-type: none;

display: flex;

}

/* 個々のli要素のスタイル */

.menu li {

margin: 10px;

padding: 10px;

width: 100px;

background-color: #ccc;

text-align: center;

}

冒頭のブロックは関係する要素のリセットCSS。

ulタグに設定したmenuクラスのスタイル

list-style-type: noneでリストのマーカー表示を抑止
display: flexは、この指定1つで子要素のボックス要素が横並びになる

menuクラスの下のli要素のスタイル

親のulでflexを指定しているので、個別要素としてのスタイルを設定
各liを等幅に設定し、背景色を指定している

Rails/SCSS

HTML

HTMLの内容は同じ。

SCSS

リセットCSSはreset.cssファイルとして切り分けている。

考え方はCSSと変わらず、子要素liをブロック内に入れ子にしている。

// リストの水平配置
.menu {
  list-style-type: none;
  display: flex;
  /* 個々のli要素のスタイル */
  li {
    margin: 10px;
    padding: 10px;
    width: 100px;
    background-color: #ccc;
    text-align: center;
  }
}

// リストの水平配置

.menu {

list-style-type: none;

display: flex;

/* 個々のli要素のスタイル */

li {

margin: 10px;

padding: 10px;

width: 100px;

background-color: #ccc;

text-align: center;

}

Tips – アンカーをボタン風に

2021-03-16 / tau / コメントする

概要

アンカー要素(a)にスタイルを適用して、ボタンの様な形にする。

HTML/CSS

HTML

HTMLではa要素をdivタグで囲んでクラス定義している。

<body>
  <div class="button_like_anchor">
    <a href="#">ボタンのようなアンカー</a>
  </div>
</body>

<body>

<a href="#">ボタンのようなアンカー</a>

</div>

</body>

CSS

CSSの例は以下のとおり。

/* 関係要素のスタイルのリセット */
a, body, div {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* body要素の背景色を設定 */
body {
  background-color: #e8e8e8;
}

/* ボタン風でラップしたアンカーのスタイル */
.button_like_anchor a {
  display: inline-block;
  box-sizing: border-box;
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid #000;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  background-color: #a0a0a0;
}
/* アンカー上に */
.button_like_anchor a:hover {
  background-color: #acacac;
  cursor: pointer;

/* 関係要素のスタイルのリセット */

a, body, div {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* body要素の背景色を設定 */

body {

background-color: #e8e8e8;

}

/* ボタン風でラップしたアンカーのスタイル */

.button_like_anchor a {

display: inline-block;

box-sizing: border-box;

margin: 10px;

padding: 8px 12px;

border: 1px solid #000;

border-radius: 5px;

text-decoration: none;

color: white;

background-color: #a0a0a0;

}

/* アンカー上に */

.button_like_anchor a:hover {

background-color: #acacac;

cursor: pointer;

前段のブロックで関係要素のスタイルをリセットし、bodyの背景色をセットしている。

アンカーのスタイル設定については以下のとおり。

.button_like_anchorクラスの中のa要素のスタイル

marginやpaddingの設定のためにdisplay: inline-blockを指定
box-sizingの設定はここでは影響しないが、サイズ指定してボタンを並べるときなどに関係
border-radiusで角を丸くしている
text-decoration: noneとcolor設定でデフォルトのアンカーの装飾を変更

Hover時の変化

元の背景をbackground-colorで設定
疑似クラスhoverでカーソルが領域に入った時のスタイルを設定
- 背景色を少し明るくしている
- cursorでカーソル形状を変更(デフォルトがpointerのため、ここでは影響しない)

Rails/SCSS

html.erb

Railsではアンカータグをヘルパーで実装している。

<div class="button_like_anchor">
  <%= link_to('ボタンのようなアンカー', '#') %>
</div>

<%= link_to('ボタンのようなアンカー', '#') %>

</div>

SCSS

リセットCSSはreset.cssファイルとして切り分けている。

また、疑似クラスhoverの記述をSCSSに合わせて変更している。

// body要素の背景色を設定
body {
  background-color: #e8e8e8;
}

// ボタン風でラップしたアンカーのスタイル
.button_like_anchor a {
  display: inline-block;
  box-sizing: border-box;
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid #000;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  background-color: #a0a0a0;
  // Hover時のスタイル変化
  &:hover {
    background-color: #acacac;
    cursor: pointer;
  }
}

// body要素の背景色を設定

body {

background-color: #e8e8e8;

}

// ボタン風でラップしたアンカーのスタイル

.button_like_anchor a {

display: inline-block;

box-sizing: border-box;

margin: 10px;

padding: 8px 12px;

border: 1px solid #000;

border-radius: 5px;

text-decoration: none;

color: white;

background-color: #a0a0a0;

// Hover時のスタイル変化

&:hover {

background-color: #acacac;

cursor: pointer;

}

CSS – リセットCSS

2021-03-16 / tau / コメントする

概要

ブラウザーによってデフォルトで設定されているスタイルをリセットしてシンプルにするためのCSS。

リセットに加えて単純のスタイルを設定するものもある。

各種リセットCSS

Eric Meyer’s “Reset CSS” 2.0

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

HTML5 Doctor CSS Reset

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

100

101

102

html5doctor.com Reset Stylesheet

v1.6.1

Last Updated: 2010-09-17

Author: Richard Clark - http://richclarkdesign.com

Twitter: @rich_clark

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body {

line-height:1;

}

article,aside,details,figcaption,figure,

footer,header,hgroup,menu,nav,section {

display:block;

}

nav ul {

list-style:none;

}

blockquote, q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:'';

content:none;

}

a {

margin:0;

padding:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

/* change colours to suit your needs */

ins {

background-color:#ff9;

color:#000;

text-decoration:none;

}

/* change colours to suit your needs */

mark {

background-color:#ff9;

color:#000;

font-style:italic;

font-weight:bold;

}

del {

text-decoration: line-through;

}

abbr[title], dfn[title] {

border-bottom:1px dotted;

cursor:help;

}

table {

border-collapse:collapse;

border-spacing:0;

}

/* change border colour to suit your needs */

hr {

display:block;

height:1px;

border:0;

border-top:1px solid #cccccc;

margin:1em 0;

padding:0;

}

input, select {

vertical-align:middle;

}

Yahoo! (YUI 3) Reset CSS

/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}

ol,
ul {
	list-style:none;
}

caption,
th {
	text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,
q:after {
	content:'';
}
abbr,
acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

/**

* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)

* http://cssreset.com

* http://yuilibrary.com/license/

TODO will need to remove settings on HTML since we can't namespace it.

TODO with the prefix, should I group by selector or property for weight savings?

html{

color:#000;

background:#FFF;

}

TODO remove settings on BODY since we can't namespace it.

TODO test putting a class on HEAD.

- Fails on FF.

body,

div,

dl,

dt,

dd,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

pre,

code,

form,

fieldset,

legend,

input,

textarea,

blockquote,

th,

td {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset,

img {

border:0;

}

TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...

address,

caption,

cite,

code,

dfn,

em,

strong,

th,

var {

font-style:normal;

font-weight:normal;

}

ol,

ul {

list-style:none;

}

caption,

th {

text-align:left;

}

h1,

h2,

h3,

h4,

h5,

h6 {

font-size:100%;

font-weight:normal;

}

q:before,

q:after {

content:'';

}

abbr,

acronym {

border:0;

font-variant:normal;

}

/* to preserve line-height and selector appearance */

sup {

vertical-align:text-top;

}

sub {

vertical-align:text-bottom;

}

input,

textarea,

select {

font-family:inherit;

font-size:inherit;

font-weight:inherit;

}

/*to enable resizing for IE*/

input,

textarea,

select {

*font-size:100%;

}

/*because legend doesn't inherit in IE */

legend {

color:#000;

}

/* YUI CSS Detection Stamp */

#yui3-css-stamp.cssreset { display: none; }

その他

Normalize.css

A Modern CSS Reset

Rails – スタイル設定

2021-03-15 / tau / コメントする

概要

Railsのプロジェクトにおけるスタイルシートの場所、スタイル設定について整理する。

デフォルトの状態

プロジェクト生成直後、app/assets/stylesheets/ディレクトリーにapplication.cssが生成され、以下の2行が記述されている。これらの行はディレクティブと呼ばれ、それぞれの意味については後述。

 *= require_tree .
 *= require_self

1 2	= require_tree . = require_self

この段階でRailsの”Yay! You’re on Rails!”のページのソースを見ると、HTMLに直接styleタグが書かれている。

コントローラーとスタイルファイルの関係

以下のように2つのアクションを含むコントローラーを3つ生成する(出力は省略)。

[vagrant@vagrant dummy_app]$ rails generate controller fruits orange grape
[vagrant@vagrant dummy_app]$ rails generate controller vesitables beets carrots
[vagrant@vagrant dummy_app]$ rails generate controller meats pork beef

[vagrant@vagrant dummy_app]$ rails generate controller fruits orange grape

[vagrant@vagrant dummy_app]$ rails generate controller vesitables beets carrots

[vagrant@vagrant dummy_app]$ rails generate controller meats pork beef

その結果、コントローラー・ビューファイルとともに、app/assets/stylesheetsディレクトリーに3つのscssファイルが生成される。

[vagrant@vagrant dummy_app]$ ls app/assets/stylesheets/
application.css  fruits.scss  meats.scss  vesitables.scss

1 2	[vagrant@vagrant dummy_app]$ ls app/assets/stylesheets/ application.css fruits.scss meats.scss vesitables.scss

これら3つのscssファイルはコメントのみの空の内容。

// Place all the styles related to the fruits controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the fruits controller here.

// They will automatically be included in application.css.

// You can use Sass (SCSS) here: http://sass-lang.com/

ここでorangeビューファイルを表示させてみる。

localhost:3000/fruits/orange

表示されたページのソースのうちスタイルシートの読み込みに関する行を抜き出すと以下のとおり。

<link rel="stylesheet" media="all" href="/assets/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" />

以下のことがわかる

applicationのほか、新たに生成されたfruits, vesitables, meatsに関するスタイルシートが全て読み込まれる
スタイルシートはcss拡張子を持つ
ファイル名の本体は、コントローラー名.self-ダイジェストの形式
URLクエリーパラメーターを持つ(body=1)
スタイルが読み込まれる順番は、application.cssが最後で、その前に他のファイルが辞書順で読み込まれる

これらのファイルは元のscssファイルからcssにコンパイルされた結果で、ファイルの内容のダイジェストが元のファイル名に付加されている。

この場合、application.cssと3つのscss全てのスタイルが適用される。たとえばいずれかのcss/scssファイルに* { color: red; }と記述するとfruits/orangeページの文字の色が赤くなる。

require_selfとapplication.css

無指定でもapplication.cssは読み込まれる

application.cssの以下の2行を削除し、何も指定されていない状態にする。

 *= require_tree .
 *= require_self

1 2	= require_tree . = require_self

この状態でorangeページを表示させてソースを見ると、application.cssの読み込みだけ残っている。

<link rel="stylesheet" media="all" href="/assets/application.self-34004ed1a95199bac37fb11583f3acbb08d69e689d5c114362d79071d479a29f.css?body=1" data-turbolinks-track="reload" />

1	<link rel="stylesheet" media="all" href="/assets/application.self-34004ed1a95199bac37fb11583f3acbb08d69e689d5c114362d79071d479a29f.css?body=1" data-turbolinks-track="reload" />

require_selfの意味？

application.cssの2行の記述のうち*= require_tree .の行を削除し、ページを表示させてソースを見てみる。

<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

1	<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

*= require_selfの行に対応してapplication.cssのファイルが読み込まれているが、そもそもなにも指定しなくてもこの行は生成されていた。

次に*= require_selfの方を削除し*= require_tree .を残した結果を見てみる。無指定の時と同じく、ここでもapplication.cssが読み込まれている。

<link rel="stylesheet" media="all" href="/assets/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

読み込み順の制御は可能

require_treeとrequire_selfの順番を逆にしてみる

 *= require_self
 *= require_tree .

1 2	= require_self = require_tree .

そうすると、application.cssが最初に読み込まれるようになった。

<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />

ディレクティブ

require_tree

stylesheetsディレクtリーの構成を以下の様に変更する。

d:stylesheets
- f:meats.scss
- d:crops
  - f:vesitables.scss
  - d:fruits
    - f:fruits.scss

この状態でapplication.cssが初期設定のとき、ページを表示させてもスタイルファイルの読み込みは変わらない。

require_tree .はカレントディレクトリー以下のすべてのディレクトリをたどりながらすべてのファイルをCSSに含める。

次にapplication.cssの内容を以下の様に変更する。

 *= require_tree ./crops

1	*= require_tree ./crops

この結果、指定したcropsディレクトリー以下のファイルが再帰的に読み込まれる(application.cssは読み込まれている)。

 <link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

require_directory

require_directoryは、指定したディレクトリー下のファイルのみをCSSに含める。サブディレクトリー以下は無視される、

 *= require_directory ./crops

1	*= require_directory ./crops

この結果は、cropsディレクトリー下のvesitables.cssファイルのみが読み込まれる(application.cssは読み込まれている)。

<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

require ファイル

requireディレクティブにファイル名を指定して、特定のファイルのみを読み込める。

 *= require ./crops/fruits/fruits.css

1	*= require ./crops/fruits/fruits.css

上記の指定で、HTMLファイルにはfruits.cssのみが読み込まれる(application.cssは読み込まれている)。

<link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

Rails – 基礎的なルーティング

2021-03-15 / tau / コメントする

概要

GETやPOSTなどのリクエストがあったときconfig/routes.rbの内容に従って各コードにルーティングされる。

このルーティングファイルの書き方を整理する。

前提

以下のような構成のアプリケーションを考える。

コントローラー：pages_controller.rb
- アクション：top
- ビュー：top.html.erb
コントローラー：users
- アクション：sign_up、sign_in
- ビュー：sign_up.html.erb、sign_in.html.erb

デフォルトのroutes.rb

設定と動作

ルーティングファイルはconfig/routes.rbにある。コントローラー生成直後のファイルの内容は以下のとおり。

Rails.application.routes.draw do
  get 'users/sign_in'

  get 'users/sign_up'

  get 'pages/top'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Rails.application.routes.draw do

get 'users/sign_in'

get 'users/sign_up'

get 'pages/top'

# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

end

初期状態では、GETメソッドで各ビューファイルがリクエストされたとき、ディレクトリー構成に従ってファイルを探すようルーティングされる。

たとえばブラウザーでhttp://localhost:3000/pages/topと入力するとpagesディレクトリー下のtop.html.erbが表示される。

このページに他のページからヘルパーでリンクを張る場合は以下の様に書く。

<%= link_to 'トップ', '/pages/top %>

ルーティング

ルーティングの設定状態はrails routesコマンドで確認できる。

[vagrant@vagrant ex_bbs]$ rails routes
       Prefix Verb URI Pattern              Controller#Action
users_sign_in GET  /users/sign_in(.:format) users#sign_in
users_sign_up GET  /users/sign_up(.:format) users#sign_up
    pages_top GET  /pages/top(.:format)     pages#top

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

users_sign_in GET /users/sign_in(.:format) users#sign_in

users_sign_up GET /users/sign_up(.:format) users#sign_up

pages_top GET /pages/top(.:format) pages#top

Prefixの列はリンクのエイリアスに関する表示で、ヘルパー中でプレフィックスに'_path'を付けた名前でリンク先を表せる。

たとえばtop.html.erb中に以下の行を追加するとリンクが表示され、クリックするとsign_in.html.erbページに遷移する。

<%= link_to('サインイン', users_sign_in_path) %>

まとめ

ルーティング設定で各アクションを呼ぶためのURLを設定できる
URLでルーティングする場合は文字列とする
Prefixと_pathを組み合わせたエイリアスでもルーティングができ、その場合はコロンなしで書く

ルーティングの設定変更

設定と動作

コントローラー生成時のルーティングを変更して、それぞれのページがアプリケーションルートから直接呼び出せるようにする(たとえばlocalhost:3000/topなど)。

Rails.application.routes.draw do
  get '/top', to: 'pages#top'

  get '/sign_up', to: 'users#sign_up'

  get '/sign_in', to: 'users#sign_in'
end

Rails.application.routes.draw do

get '/top', to: 'pages#top'

get '/sign_up', to: 'users#sign_up'

get '/sign_in', to: 'users#sign_in'

end

3つのルーティングとも同じ方法で指定している。

メソッド 'URL', to: 'コントローラー#アクション'

これでそれぞれのURL指定’/top’などに簡略化され、GETリクエストに対して対応するアクションが実行される。

この場合、トップページに以下のようなURL指定のリンクを追加すると、クリック時にサインインページに遷移する。

<%= link_to('サインイン', '/sign_in') %>

ルーティング

ルーティングの一覧は以下のとおりで、Prefixの列も簡略化されている。

[vagrant@vagrant ex_bbs]$ rails routes
 Prefix Verb URI Pattern        Controller#Action
    top GET  /top(.:format)     pages#top
sign_up GET  /sign_up(.:format) users#sign_up
sign_in GET  /sign_in(.:format) users#sign_in

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

top GET /top(.:format) pages#top

sign_up GET /sign_up(.:format) users#sign_up

sign_in GET /sign_in(.:format) users#sign_in

Prefixも変更されているので、top.html.erb中に以下の行を追加するとリンクが表示され、クリックするとsign_in.html.erbページに遷移する。

<%= link_to('サインイン', sign_in_path) %>￥

まとめ

ルーティングの, to: 'controller#action'によって、設定したURLから指定したアクションにルーティングできる
カンマ、toキー(to:)、'コントローラー#アクション'の文字列

ルーティングの名前

設定と動作

routes.rbのsign_inの行に, as:を追加して以下の様に変更する。

get '/sign_in', to: 'users#sign_in', as: :sign_in_page

この場合、リンク先としてsign_in_page_pathを指定してルーティングできるようになる。

ルーティング

このときのルーティングは以下の様になっている。

[vagrant@vagrant ex_bbs]$ rails routes
      Prefix Verb URI Pattern        Controller#Action
         top GET  /top(.:format)     pages#top
     sign_up GET  /sign_up(.:format) users#sign_up
sign_in_page GET  /sign_in(.:format) users#sign_in

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

top GET /top(.:format) pages#top

sign_up GET /sign_up(.:format) users#sign_up

sign_in_page GET /sign_in(.:format) users#sign_in

この場合、linkt_toから呼び出す名前はsign_in_page_pathになり、従前のsign_in_pathを使うとエラーになる。

つまり、as:で指定された内容で元のPrefixがオーバーライドされ、以後はその内容の名前かURLで指定しなければならない。

まとめ

ルーティングの名前を', as: :name'で設定できる
設定はカンマ、asキー(as:)、名前シンボル
名前を設定すると、Prefixがそれに置き換えられる

Rails – 例題 – コントローラー・ビューを準備する

2021-03-14 / tau / コメントする

概要

Railsの例題・掲示板の第1段階のためのコントローラーとビューを生成する。

コントローラー・ビューの生成

プロジェクトディレクトリー下で、2つのコントローラー、pagesとusersを生成する。

pagesコントローラーとビュー

生成コマンド

pagesコントローラーには1つのアクションtopを定義する。

rails generate controller pages top

[vagrant@vagrant ex_bbs]$ rails generate controller pages top
Running via Spring preloader in process 793
      create  app/controllers/pages_controller.rb
       route  get 'pages/top'
      invoke  erb
      create    app/views/pages
      create    app/views/pages/top.html.erb
      invoke  test_unit
      create    test/controllers/pages_controller_test.rb
      invoke  helper
      create    app/helpers/pages_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/pages.coffee
      invoke    scss
      create      app/assets/stylesheets/pages.scss

[vagrant@vagrant ex_bbs]$ rails generate controller pages top

Running via Spring preloader in process 793

create app/controllers/pages_controller.rb

route get 'pages/top'

invoke erb

create app/views/pages

create app/views/pages/top.html.erb

invoke test_unit

create test/controllers/pages_controller_test.rb

invoke helper

create app/helpers/pages_helper.rb

invoke test_unit

invoke assets

invoke coffee

create app/assets/javascripts/pages.coffee

invoke scss

create app/assets/stylesheets/pages.scss

コントローラー

上のコマンドによって、コントローラーファイルpages_controller.rb、ビューファイルtop.html.erbの2つのファイルが生成される。

app/controllers/pages_controller.rb

topアクションに対応する空のメソッドが定義されている。

class PagesController < ApplicationController
  def top
  end
end

class PagesController < ApplicationController

def top

end

ビュー

app/views/pages/top.html.erb

コントローラーと同名のディレクトリーがviewsディレクトリーに、アクションと同名のビューファイルがそのディレクトリーにつくられる。ビューファイルにはプレースホルダーの表示が書かれている。

<h1>Pages#top</h1>
<p>Find me in app/views/pages/top.html.erb</p>

1 2	<h1>Pages#top</h1> <p>Find me in app/views/pages/top.html.erb</p>

usersコントローラーとビュー

生成コマンド

usersコントローラーには2つのアクションsign_up、sign_inを定義する。

[vagrant@vagrant ex_bbs]$ rails generate controller users sign_up sign_in
Running via Spring preloader in process 825
      create  app/controllers/users_controller.rb
       route  get 'users/sign_in'
       route  get 'users/sign_up'
      invoke  erb
      create    app/views/users
      create    app/views/users/sign_up.html.erb
      create    app/views/users/sign_in.html.erb
      invoke  test_unit
      create    test/controllers/users_controller_test.rb
      invoke  helper
      create    app/helpers/users_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/users.coffee
      invoke    scss
      create      app/assets/stylesheets/users.scss

[vagrant@vagrant ex_bbs]$ rails generate controller users sign_up sign_in

Running via Spring preloader in process 825

create app/controllers/users_controller.rb

route get 'users/sign_in'

route get 'users/sign_up'

invoke erb

create app/views/users

create app/views/users/sign_up.html.erb

create app/views/users/sign_in.html.erb

invoke test_unit

create test/controllers/users_controller_test.rb

invoke helper

create app/helpers/users_helper.rb

invoke test_unit

invoke assets

invoke coffee

create app/assets/javascripts/users.coffee

invoke scss

create app/assets/stylesheets/users.scss

コントローラー

上のコマンドの結果、1つのコントローラーファイルusers_controller.rbと2つのビューファイルsign_up.html.erb、sign_in.html.erbが生成される。

app/controllers/users_controller.rb

2つのアクションに対応する空のメソッドが定義されている。

class UsersController < ApplicationController
  def sign_up
  end

  def sign_in
  end
end

class UsersController < ApplicationController

def sign_up

end

def sign_in

end

ビュー

コントローラーと同名(users)のディレクトリーがviewsディレクトリーの下につくられ、2つのビューファイルが生成される。

app/views/users/sign_up.html.erb

<h1>Users#sign_up</h1>
<p>Find me in app/views/users/sign_up.html.erb</p>

1 2	<h1>Users#sign_up</h1> <p>Find me in app/views/users/sign_up.html.erb</p>

app/view/users/sign_in.html.erb

<h1>Users#sign_in</h1>
<p>Find me in app/views/users/sign_in.html.erb</p>

1 2	<h1>Users#sign_in</h1> <p>Find me in app/views/users/sign_in.html.erb</p>

ルーティングの設定

基礎的なルーティングに従ってルーティングを設定していく。

デフォルトの設定

コントローラー・ビュー生成後のルーティングはconfig/routes.rbに書かれている。

Rails.application.routes.draw do
  get 'users/sign_in'

  get 'users/sign_up'

  get 'pages/top'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Rails.application.routes.draw do

get 'users/sign_in'

get 'users/sign_up'

get 'pages/top'

# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

end

初期状態では、GETメソッドで各ビューファイルがリクエストされたとき、ディレクトリー構成に従ってファイルを探すようルーティングされる。

たとえばブラウザーでhttp://localhost:3000/pages/topと入力するとpagesディレクトリー下のtop.html.erbが表示される。

ルーティングの設定変更

コントローラー生成時のルーティングを変更する。

ビューファイルのディレクトリー構成によらず、URLで/top、/sign_up、/sign_inと指定してアクションが呼ばれるようにする
..._pathのリンク名を定義する

変更後のroutes.rbは以下のとおり。

Rails.application.routes.draw do
  get '/top', to: 'pages#top', as: :top

  get '/sign_up', to: 'users#sign_up', as: :sign_up

  get '/sign_in', to: 'users#sign_in', as: :sign_in
end

Rails.application.routes.draw do

get '/top', to: 'pages#top', as: :top

get '/sign_up', to: 'users#sign_up', as: :sign_up

get '/sign_in', to: 'users#sign_in', as: :sign_in

end

Rails – 例題 – 掲示板

2021-03-14 / tau / コメントする

概要

Railsの流れを例題にまとめる。

題材として掲示板を選ぶ。

第1段階

BBSのユーザー登録、サインイン／サインアウト、エラー表示を実装する。

ここでは以下の事項を含む。

プロジェクトの開始、主なファイル配置
基礎的なコントロール、ビュー、ルーティング
データベースの基本操作
フォーム入力、バリデーション、パスワード暗号化
モデルによるデータベースの操作
セッション管理、アクセス制御

第1段階の内容

第2段階

サインインしたユーザーによる、プロフィールページの閲覧・編集、コメントの投稿・削除、画像ファイルの添付を実装する。

ここでは以下の事項を含む。

ユーザーに応じたページの表示・編集
リレーションを持つテーブルの設定・操作
リソースによる操作
画像ファイルのアップロード

第2段階の内容

Rails – レンダリングされない～form_with

2021-03-14 / tau / コメントする

概要

Rails事始めで、フォームから送信した内容を反映させるだけのことが「ページがレンダリングされない」という状態になった話。

結論はfome_withの機能とパラメーターに関するもので、オンラインレッスンの講師の方に教わるまで解決できなかった。

問題の内容

アプリケーション

フォームから受け取った値をインスタンス変数に入れて、それを他のアクションで参照してフォームがあるページを更新するという内容。

躓いてから、できるだけシンプルにしていったのが次のアプリケーションで、フォームのボタンを押すとトップページのテキストの内容を入れ替えるだけのもの。

コントローラー：app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def top
    @text = "Hello"
  end

  def input
    @text = "Hi"
    render action: :top and return
  end
end

class PagesController < ApplicationController

def top

@text = "Hello"

end

def input

@text = "Hi"

render action: :top and return

end

ビュー：app/views/pages/top.html.erb

<h1>Top Page</h1>

<% p @text %>
<p>Text:<%= @text %></p>

<%= form_with(url: input_path) do |f| %>
  <button>Submit</button>
<% end %>

<% p @text %>

<%= form_with(url: input_path) do |f| %>

<button>Submit</button>

<% end %>

ルーティング：config/rotes.rb

Rails.application.routes.draw do
  root to: 'pages#top', as: :top
  post 'input', to: 'pages#input', as: :input
end

Rails.application.routes.draw do

root to: 'pages#top', as: :top

post 'input', to: 'pages#input', as: :input

end

症状

以下のページが表示されるが、Submitボタンを押しても画面に変化がない。

よく見ると、inputにルーティングしているのにURLに/inputがついていない。

検証ツールで見ると、inputに対して通信はしていて、書き換えの処理はされているようだ。

コンソールの出力を見ると、POST時の変数の内容は”Hi”に変更されている。

Started GET "/" for 10.0.2.2 at 2021-03-14 15:36:51 +0900
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#top as HTML
  Rendering pages/top.html.erb within layouts/application
"Hello"
  Rendered pages/top.html.erb within layouts/application (0.8ms)
Completed 200 OK in 18ms (Views: 16.6ms)


Started POST "/input" for 10.0.2.2 at 2021-03-14 15:36:57 +0900
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#input as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"Ok8wUxj2qkkQHCk/gn6vsH0fib/NlpZgiS9NCM9w2iVSc/gEZ4BQCY7EHFJ9WHmUhaR/LxiIFYFlUMSOeIs/eg=="}
  Rendering pages/top.html.erb within layouts/application
"Hi"
  Rendered pages/top.html.erb within layouts/application (1.0ms)
Completed 200 OK in 36ms (Views: 35.8ms)

Started GET "/" for 10.0.2.2 at 2021-03-14 15:36:51 +0900

Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

Processing by PagesController#top as HTML

Rendering pages/top.html.erb within layouts/application

"Hello"

Rendered pages/top.html.erb within layouts/application (0.8ms)

Completed 200 OK in 18ms (Views: 16.6ms)

Started POST "/input" for 10.0.2.2 at 2021-03-14 15:36:57 +0900

Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

Processing by PagesController#input as JS

Parameters: {"utf8"=>"✓", "authenticity_token"=>"Ok8wUxj2qkkQHCk/gn6vsH0fib/NlpZgiS9NCM9w2iVSc/gEZ4BQCY7EHFJ9WHmUhaR/LxiIFYFlUMSOeIs/eg=="}

Rendering pages/top.html.erb within layouts/application

"Hi"

Rendered pages/top.html.erb within layouts/application (1.0ms)

Completed 200 OK in 36ms (Views: 35.8ms)

解決

解決策は”form_withのパラメーターにlocal: trueを加える”というものだった。

<%= form_with(url: input_path, local: true) do %>

コントローラー：app/controllers/pages_controller.rb

<h1>Top Page</h1>

<% p @text %>
<p>Text:<%= @text %></p>

<%= form_with(url: input_path, local: true) do |f| %>
  <button>Submit</button>
<% end %>

<% p @text %>

<%= form_with(url: input_path, local: true) do |f| %>

<button>Submit</button>

<% end %>

Submitボタンを押すと表示が変更されるようになった。

理由

form_forでは送信時にページ全体がレンダリングされるが、form_withはデフォルトではajaxによる送信となっていて、そのままではページがレンダリングされない。

パラメーターにlocal: trueを指定するとHTMLとしてのフォーム送信として扱われ、ページがレンダリングされる。

form_tag/form_withがdeprecatedだというところだけを読んで気軽に使ったのが敗因。