Tips – CDN – アイコン・ダミー画像など

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

アイコン

Font Awesome

概要

Font Awesomeのアイコンを利用するための手順。

メールアドレスでアカウントを取得する
アイコンを利用するためのキット番号を取得
- アカウント取得後は”Manage Kitのリンク先で確認できる
アイコンを使うページのheadセクションに、Font AwesomeのJSを読み込むスクリプトを書く
Font Awesomeのページで使いたいアイコンのタグ表現をコピーする
アイコンを利用する場所にコピーしたタグを張り付ける
必要なら、タグのスタイルを設定するクラスやマウスオーバー時のタイトルなどを指定する

JSの記述

まずhead部に以下のスクリプトを記述する。

<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

1	<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

タグの記述

アイコンを表示する場所にアイコンを表示するタグを記述。Font Awesomeのサイトでコピーできる。

<i class="fas fa-sign-out-alt"></i>

1	<i class="fas fa-sign-out-alt"></i>

スタイル設定

サイズや色などのスタイルをクラスで設定する場合、Font Awesome自体がclassで設定されているので以下の様になる。

HTML

<i class="fa fa-sign-out-alt header_icon"></i>

1	<i class="fa fa-sign-out-alt header_icon"></i>

CSS

.header_icon {
  font-size: 30px;
  color: #0af;
}

.header_icon {

font-size: 30px;

color: #0af;

}

タイトル設定

マウスオーバーで文字列を表示させる場合、以下の様にtitle属性を追加する。

<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

1	<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

ダミー画像

Dynamic Dummy Image Generatorは自由なサイズと色の画像ファイルをリアルタイムで取り込める。

サイトで画像のサイズ、背景色、前景色、ファイルタイプを指定すると、それを織り込んだURLが表示される
そのURLをimgタグで指定すると、ページレンダリング時に必要なファイルがダウンロードされて表示される

以下は指定の例で、サイトに表示されたURLをそのままコピー&ペーストしたもの。

<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

1	<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

また、表示させるテキストも自由に設定できる。

<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

1	<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

Rails – 画像ファイルの配置とパス指定

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

概要

Railsで画像ファイルを配置するのは以下の2箇所

app/assets/images: 開発側で準備するロゴやアイコンなど
public: ユーザーのアップロード画像など

それぞれの下にディレクトリーを作って、その中の画像ファイルをimg要素、div要素の背景画像で読み込む場合のパス指定について整理した。

ビューファイル&img要素の場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

<img src="パス">

1	<img src="パス">

`example/ファイル`	読み込めない
`/example/ファイル`	読み込めない
`./example/ファイル`	読み込めない

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

<img src='example/image_public.jpg'>
<img src='/example/image_public.jpg'>
<img src='./example/image_public.jpg'>

`example/ファイル`	読み込める
`/example/ファイル`	読み込める
`./example/ファイル`	読み込める

ビューファイル&img_tagの場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

<%= image_tag 'example/image_assets.jpg' %>

1	<%= image_tag 'example/image_assets.jpg' %>

`example/ファイル`	読み込める
`/example/ファイル`	読み込めない
`./example/ファイル`	NoMethodError

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

<%= image_tag '/example/image_public.jpg' %>

1	<%= image_tag '/example/image_public.jpg' %>

`example/ファイル`	Sprockets::Rails::Helper::AssetNotFound
`/example/ファイル`	読み込める
`./example/ファイル`	NoMethodError

SCSS&div要素の背景画像の場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

background-image: image-url('example/image_assets.jpg');

1	background-image: image-url('example/image_assets.jpg');

`example/ファイル`	読み込める
`/example/ファイル`	読み込めない
`./example/ファイル`	読み込めない

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

background-image: url('/example/image_public.jpg');

1	background-image: url('/example/image_public.jpg');

`example/ファイル`	読み込めない
`/example/ファイル`	読み込める
`./example/ファイル`	読み込めない

まとめ

img要素はpublicの画像は読めるがassetsの画像は読めないので、img_tagヘルパーを使う方がよい。画像をimg_tagで配置する場合も、div要素の背景画像とする場合も、ファイルのパス指定は以下の通り。

	パス指定
`app/assets/images`	`サブディレクトリ―/ファイル`
`public`	`/サブディレクトリ―/ファイル`

参考

確認に使ったアプリケーションファイル

pages_controller.rb

class PagesController < ApplicationController
  def image_location
  end
end

class PagesController < ApplicationController

def image_location

end

image_location.html.erb

<h1>image_location</h1>

<h2>img</h2>

<h3>app/assets/image/example</h3>

<div class="image_wrapper">
  <img src='example/image_assets.jpg'>
  <!--
  "example/image_public.jpg"
  "/example/image_public.jpg"
  "./example/image_public.jpg"
  全て読み込めない
  -->
</div>

<h3>public/example</h3>

<div class="image_wrapper">
  <img src='example/image_public.jpg'>
  <!--
  "example/image_public.jpg"
  "/example/image_public.jpg"
  "./example/image_public.jpg"
  全て読み込める
  -->
</div>

<h2>img_tag</h2>

<h3>app/assets/image/example</h3>

<div class="image_wrapper">
  <%= image_tag 'example/image_assets.jpg' %>
  <!--
  'example/image_assets.jpg'は読み込める
  '/example/image_assets.jpg'は画像を読み込めない
  './example/image_assets.jpg'はNoMethodError
  -->
</div>

<h3>public/example</h3>

<div class="image_wrapper">
  <%= image_tag '/example/image_public.jpg' %>
  <!--
  "example/image_public.jpg"はSprockets::Rails::Helper::AssetNotFound
  "/example/image_public.jpg"は読み込める
  "./example/image_public.jpg"はNoMethodError
  -->
</div>

<h2>SCSS</h2>

<h3>app/assets/image/example</h3>

<div class="image_div_assets"></div>

<h3>public/example</h3>

<div class="image_div_public"></div>

<h1>image_location</h1>

<h3>app/assets/image/example</h3>

<!--

"example/image_public.jpg"

"/example/image_public.jpg"

"./example/image_public.jpg"

全て読み込めない

-->

</div>

<h3>public/example</h3>

<!--

"example/image_public.jpg"

"/example/image_public.jpg"

"./example/image_public.jpg"

全て読み込める

-->

</div>

<h3>app/assets/image/example</h3>

<%= image_tag 'example/image_assets.jpg' %>

<!--

'example/image_assets.jpg'は読み込める

'/example/image_assets.jpg'は画像を読み込めない

'./example/image_assets.jpg'はNoMethodError

-->

</div>

<h3>public/example</h3>

<%= image_tag '/example/image_public.jpg' %>

<!--

"example/image_public.jpg"はSprockets::Rails::Helper::AssetNotFound

"/example/image_public.jpg"は読み込める

"./example/image_public.jpg"はNoMethodError

-->

</div>

<h3>app/assets/image/example</h3>

<h3>public/example</h3>

pages.scss

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.image_wrapper {
  width: 600px;
  height: 400px;
  text-align: center;
  background-color: #ccc;
}

.image_div_assets {
  background-image: image-url('example/image_assets.jpg');
  // 'example/image_assets.jpg'は読み込める
  // '/example/image_assets.jpg'は読み込めない
  // './example/image_assets.jpg'は読み込めない
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 600px;
  height: 400px;
  background-color: #ccc;
}

.image_div_public {
  background-image: url('/example/image_public.jpg');
  // 'example/image_public.jpg'は読み込めない
  // '/example/image_public.jpg'は読み込める
  // './example/image_public.jpg'は読み込ない
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 600px;
  height: 400px;
  background-color: #ccc;
}

img {

max-width: 100%;

max-height: 100%;

width: auto;

height: auto;

}

.image_wrapper {

width: 600px;

height: 400px;

text-align: center;

background-color: #ccc;

}

.image_div_assets {

// 'example/image_assets.jpg'は読み込める

// '/example/image_assets.jpg'は読み込めない

// './example/image_assets.jpg'は読み込めない

background-repeat: no-repeat;

background-size: contain;

background-position: center center;

width: 600px;

height: 400px;

background-color: #ccc;

}

.image_div_public {

// 'example/image_public.jpg'は読み込めない

// '/example/image_public.jpg'は読み込める

// './example/image_public.jpg'は読み込ない

background-repeat: no-repeat;

background-size: contain;

background-position: center center;

width: 600px;

height: 400px;

background-color: #ccc;

}

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-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-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

Vagrant/AmazonLinux2 – Railsインストール

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

概要

VagrantのAmazonLinux2仮想環境にrbenv/Rubyをインストール後、Railsをインストールした記録。

ホスト：Windows10
ゲスト：Vagrant + VirtualBox + bento/amazonlinux-2

Railsの最新版ではなく、オリジナルの環境に併せて特定のバージョンを指定してインストールした。

Railsに影響する機能の停止

SELinux

もともとSELinuxは無効状態だった。

[vagrant@vagrant ~]$ getenforce
Disabled

1 2	[vagrant@vagrant ~]$ getenforce Disabled

firewalld

そもそもfirewalldはセットされていなかった。

[vagrant@vagrant ~]$ systemctl status firewalld
Unit firewalld.service could not be found.

1 2	[vagrant@vagrant ~]$ systemctl status firewalld Unit firewalld.service could not be found.

Railsのインストール

一応、gemで使用できるRailsの確認。使用可能なRailsはない。

[vagrant@vagrant ~]$ gem list rails

*** LOCAL GEMS ***

[vagrant@vagrant ~]$ gem list rails

*** LOCAL GEMS ***

gemでRailsのバージョン5.1.7を指定してインストール。

[vagrant@vagrant ~]$ gem i -v 5.1.7
railsFetching concurrent-ruby-1.1.8.gem
Fetching thread_safe-0.3.6.gem
Fetching rack-2.2.3.gem
.....
Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, irack, rack-test, racc, nokogiri, crass, loofah, rails-html-sanitizer, rails-dom-testing, builder, erubi, actionview, actionpack, activemodel, arel, activerecord, globalid, activejob, mini_mime, mail, actionmailer, nio4r, websocket-extensions, websocket-driver, actioncable, thor, method_source, railties, sprockets, sprockets-rails, rails after 81 seconds
35 gems installed

[vagrant@vagrant ~]$ gem i -v 5.1.7

railsFetching concurrent-ruby-1.1.8.gem

Fetching thread_safe-0.3.6.gem

Fetching rack-2.2.3.gem

.....

Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, irack, rack-test, racc, nokogiri, crass, loofah, rails-html-sanitizer, rails-dom-testing, builder, erubi, actionview, actionpack, activemodel, arel, activerecord, globalid, activejob, mini_mime, mail, actionmailer, nio4r, websocket-extensions, websocket-driver, actioncable, thor, method_source, railties, sprockets, sprockets-rails, rails after 81 seconds

35 gems installed

再度使用可能なRailsを探して、インストールされていることを確認する。

[vagrant@vagrant ~]$ gem list rails

*** LOCAL GEMS ***

rails (5.1.7)
rails-dom-testing (2.0.3)
rails-html-sanitizer (1.3.0)
sprockets-rails (3.2.2)

[vagrant@vagrant ~]$ gem list rails

*** LOCAL GEMS ***

rails (5.1.7)

rails-dom-testing (2.0.3)

rails-html-sanitizer (1.3.0)

sprockets-rails (3.2.2)

Railsサーバーの稼働

エラー～JavaScriptランタイムがない

テスト用のプロジェクトを生成してRailsサーバーを起動しようとしたところ、エラーになった。

[vagrant@vagrant test_app]$ rails s
Traceback (most recent call last):
        36: from bin/rails:3:in `<main>'
        35: from bin/rails:3:in `load'
.....
/home/vagrant/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/execjs-2.7.0/lib/execjs/runtimes.rb:58:in `autodetect': Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

[vagrant@vagrant test_app]$ rails s

Traceback (most recent call last):

36: from bin/rails:3:in `<main>'

35: from bin/rails:3:in `load'

.....

/home/vagrant/.rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/execjs-2.7.0/lib/execjs/runtimes.rb:58:in `autodetect': Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

Node.jsでもよさそうなので、CentOS7と同じ手順でNode.jsをインストール。Rails6では最新安定版のNode.jsだと警告が出たのでダウングレード下が、Rails5では最新版では警告が出なかった。

[vagrant@vagrant test_app]$ nvm install stable
Downloading and installing node v15.11.0...
Downloading https://nodejs.org/dist/v15.11.0/node-v15.11.0-linux-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v15.11.0 (npm v7.6.0)
Creating default alias: default -> stable (-> v15.11.0)

[vagrant@vagrant test_app]$ nvm install stable

Downloading and installing node v15.11.0...

Downloading https://nodejs.org/dist/v15.11.0/node-v15.11.0-linux-x64.tar.xz...

######################################################################### 100.0%

Computing checksum with sha256sum

Checksums matched!

Now using node v15.11.0 (npm v7.6.0)

Creating default alias: default -> stable (-> v15.11.0)

ここまででrails serverの実行が可能になった。

ホストブラウザーからの接続

vagrantfileに以下の1行を記述

config.vm.network "forwarded_port", guest: 3000, host: 3000

テスト用のプロジェクトを生成してrails sを実行すると、「このサイトにアクセスできません」と弾かれる。

netstatで確認すると、ポート3000は開いている。

[vagrant@vagrant ~]$ netstat -an
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State
tcp        0      0 0.0.0.0:3306            0.0.0.0:*               LISTEN
tcp        0      0 0.0.0.0:111             0.0.0.0:*               LISTEN
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:3000          0.0.0.0:*               LISTEN
.....

[vagrant@vagrant ~]$ netstat -an

Active Internet connections (servers and established)

Proto Recv-Q Send-Q Local Address Foreign Address State

tcp 0 0 0.0.0.0:3306 0.0.0.0:* LISTEN

tcp 0 0 0.0.0.0:111 0.0.0.0:* LISTEN

tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN

tcp 0 0 127.0.0.1:3000 0.0.0.0:* LISTEN

.....

サーバー立ち上げのオプションを以下の様にして接続成功。

rails s -b 0.0.0.0

以前参考にしたサイトを再度確認すると、Rails4.2以降ではこの接続方法になるとのこと。オリジナルの環境ではrails sで十ていたが(エイリアス？)。

既存プロジェクトの実行

オリジナルの環境でつくったプロジェクトをダウンロードし、共有フォルダー経由で仮想環境に移して実行したところ、db:createでエラーが出た。

[vagrant@vagrant bbs]$ rails db:create
Could not find minitest-5.14.3 in any of the sources
Run `bundle install` to install missing gems.

[vagrant@vagrant bbs]$ rails db:create

Could not find minitest-5.14.3 in any of the sources

Run `bundle install` to install missing gems.

指示通りにbundle install。

[vagrant@vagrant bbs]$ bundle install
Warning: the running version of Bundler (1.17.2) is older than the version that created the lockfile (1.17.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
.....
Bundle complete! 16 Gemfile dependencies, 70 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

[vagrant@vagrant bbs]$ bundle install

Warning: the running version of Bundler (1.17.2) is older than the version that created the lockfile (1.17.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.

.....

Bundle complete! 16 Gemfile dependencies, 70 gems now installed.

Use `bundle info [gemname]` to see where a bundled gem is installed.

この後db:migrationは問題なく、これでアプリケーションがオリジナルの環境通りに実行できるようになった。

一方、仮想環境で作ったプロジェクトをオリジナルの環境にアップロードした場合、オリジナル側でbundle installが必要になったが、これで問題なく実行できた。

Vagrant/AmazonLinux2 – rbenv/Rubyインストール

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

概要

VagrantのAmazonLinux2仮想環境にrbenv&Rubyをインストールした記録。

ホスト：Windows10
ゲスト：Vagrant + VirtualBox + bento/amazonlinux-2

Gitのインストール

CentOS7仮想環境と同じ方法でGitをインストール。

[vagrant@vagrant ~]$ sudo yum install git

1	[vagrant@vagrant ~]$ sudo yum install git

バージョン確認

[vagrant@vagrant ~]$ git --version
git version 2.23.3

1 2	[vagrant@vagrant ~]$ git --version git version 2.23.3

rbenv/Rubyのインストール

CentOS7仮想環境と同じ方法でインストール・設定(ライブラリーのインストールも含む)。

Gitからrbenvをクローン
.bash_profileの設定
Gitからruby-buildをクローン
Rubyに必要なライブラリーをインストール

Rubyインストール時に最新バージョンではなく過去のバージョンを指定してインストール。

rbenv install --list-allで全バージョンを確認
Rubyのインストール時に、バージョンを指定してインストール
rbenv globalで通常使うバージョンを指定

[vagrant@vagrant ~]$ rbenv install --list-all
1.8.5-p52
1.8.5-p113
1.8.5-p114
.....
2.6.2
2.6.3
2.6.4
.....

[vagrant@vagrant ~]$ rbenv install 2.6.3
Downloading ruby-2.6.3.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.3.tar.bz2
Installing ruby-2.6.3...
Installed ruby-2.6.3 to /home/vagrant/.rbenv/versions/2.6.3
[vagrant@vagrant ~]$ rbenv global 2.6.3
[vagrant@vagrant ~]$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

[vagrant@vagrant ~]$ rbenv install --list-all

1.8.5-p52

1.8.5-p113

1.8.5-p114

.....

2.6.2

2.6.3

2.6.4

.....

[vagrant@vagrant ~]$ rbenv install 2.6.3

Downloading ruby-2.6.3.tar.bz2...

-> https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.3.tar.bz2

Installing ruby-2.6.3...

Installed ruby-2.6.3 to /home/vagrant/.rbenv/versions/2.6.3

[vagrant@vagrant ~]$ rbenv global 2.6.3

[vagrant@vagrant ~]$ ruby -v

ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

Vagrant – 仮想環境構築 – Amazon Linux 2

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

概要

クラウドで利用していたAWS(Amazon Web Service)のEC2/Cloud9の環境をVagrantでローカルに構築した記録。利用時の環境に併せて、OS、MySQL、Ruby、Railsのバージョンをできるだけ整合させた。

オリジナルの環境

OS : Amazon Linux AMI release 2018.03
MySQL : mysql Ver 14.14 Distrib 5.5.62, for Linux (x86_64) using readline 5.1
Ruby : ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]
Rails : Rails 5.1.7

構築した環境

OS(Box) : bento/amazonlinux-2 (virtualbox, 1.2.1)
MySQL : Ver 14.14 Distrib 5.5.62, for Linux (x86_64) using readline 5.1
Ruby : ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]
Rails : Rails 5.1.7

Vagrant/VirtualBoxの導入

Vagrant – 仮想環境構築 – CentOS7を参照。

Boxの導入

ダウンロード

vagruntupのFind Boxesでキーワードamazonを含むBoxを検索し、bento/amazonlinux-2(1.2.1)を選択。

このBoxをvagrant addコマンドでローカルに追加。

C:\>vagrant box add bento/amazonlinux-2
==> box: Loading metadata for box 'bento/amazonlinux-2'
    box: URL: https://vagrantcloud.com/bento/amazonlinux-2
==> box: Adding box 'bento/amazonlinux-2' (v1.2.1) for provider: virtualbox
    box: Downloading: https://vagrantcloud.com/bento/boxes/amazonlinux-2/versions/1.2.1/providers/virtualbox.box
Download redirected to host: vagrantcloud-files-production.s3.amazonaws.com
    box:
==> box: Successfully added box 'bento/amazonlinux-2' (v1.2.1) for 'virtualbox'!

C:\>vagrant box list
bento/amazonlinux-2 (virtualbox, 1.2.1)
bento/centos-7.7    (virtualbox, 202005.12.0)

C:\>vagrant box add bento/amazonlinux-2

==> box: Loading metadata for box 'bento/amazonlinux-2'

box: URL: https://vagrantcloud.com/bento/amazonlinux-2

==> box: Adding box 'bento/amazonlinux-2' (v1.2.1) for provider: virtualbox

box: Downloading: https://vagrantcloud.com/bento/boxes/amazonlinux-2/versions/1.2.1/providers/virtualbox.box

Download redirected to host: vagrantcloud-files-production.s3.amazonaws.com

box:

==> box: Successfully added box 'bento/amazonlinux-2' (v1.2.1) for 'virtualbox'!

C:\>vagrant box list

bento/amazonlinux-2 (virtualbox, 1.2.1)

bento/centos-7.7 (virtualbox, 202005.12.0)

仮想環境の初期化

ディレクトリー\vagrant\amazonlinux2を作成・移動し、vagrant initでダウンロードしたBoxで環境を構築。

C:\vagrant\amazon2>vagrant init bento/amazonlinux-2
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.

C:\vagrant\amazon2>vagrant init bento/amazonlinux-2

A `Vagrantfile` has been placed in this directory. You are now

ready to `vagrant up` your first virtual environment! Please read

the comments in the Vagrantfile as well as documentation on

`vagrantup.com` for more information on using Vagrant.

仮想環境の利用

仮想環境の起動

vagrant upコマンドで仮想環境を起動。初回起動時は多数のパッケージインストールや依存関係の解決で時間がかかる。

C:\vagrant\amazon2>vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'bento/amazonlinux-2'...
.....
==> default: Machine booted and ready![default] GuestAdditions versions on your host (6.1.18) and guest (6.1.16) do not match.
Loaded plugins: dkms-build-requires, langpacks, priorities, update-motd
.....
--> Finished Dependency Resolution
Dependencies Resolved

================================================================================
Package                  Arch     Version                   Repository    Size
================================================================================
Installing:
elfutils-libelf-devel    x86_64   0.176-2.amzn2             amzn2-core    40 k
gcc                      x86_64   7.3.1-12.amzn2            amzn2-core    22 M
kernel-devel             x86_64   4.14.198-152.320.amzn2    amzn2-core    13 M
kernel-devel             x86_64   4.14.219-161.340.amzn2    amzn2-core    13 M
Updating:
perl                     x86_64   4:5.16.3-299.amzn2.0.1    amzn2-core   8.0 M
Installing for dependencies:
cpp                      x86_64   7.3.1-12.amzn2            amzn2-core   9.2 M
glibc-devel              x86_64   2.26-41.amzn2             amzn2-core   991 k
.....
perl-libs                x86_64   4:5.16.3-299.amzn2.0.1    amzn2-core   685 k
Transaction Summary
================================================================================
Install  4 Packages (+ 4 Dependent packages)
Upgrade  1 Package  (+15 Dependent packages)

Total download size: 84 M
Downloading packages:
Delta RPMs disabled because /usr/bin/applydeltarpm not installed.
--------------------------------------------------------------------------------
Total                                              829 kB/s |  84 MB  01:43    
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
  Installing : elfutils-libelf-devel-0.176-2.amzn2.x86_64                  1/40
  Updating   : glibc-common-2.26-41.amzn2.x86_64                           2/40
  Updating   : glibc-2.26-41.amzn2.x86_64                                  3/40
.....

Installed:  elfutils-libelf-devel.x86_64 0:0.176-2.amzn2                                 
  gcc.x86_64 0:7.3.1-12.amzn2                                                  
  kernel-devel.x86_64 0:4.14.198-152.320.amzn2                                 
  kernel-devel.x86_64 0:4.14.219-161.340.amzn2                                 

Dependency Installed:
  cpp.x86_64 0:7.3.1-12.amzn2                                                  
  glibc-devel.x86_64 0:2.26-41.amzn2                                           
  glibc-headers.x86_64 0:2.26-41.amzn2                                         
  kernel-headers.x86_64 0:4.14.219-161.340.amzn2                               

Updated:
  perl.x86_64 4:5.16.3-299.amzn2.0.1                                           

Dependency Updated:
  glibc.x86_64 0:2.26-41.amzn2                                                 
.....
Complete!Copy iso file C:\Program Files\Oracle\VirtualBox\VBoxGuestAdditions.iso into the box /tmp/VBoxGuestAdditions.iso
.....
VirtualBox Guest Additions: Running kernel modules will not be replaced untilthe system is restarted

==> default: Mounting shared folders...    default: /vagrant => C:/vagrant/amazon2

C:\vagrant\amazon2>vagrant up

Bringing machine 'default' up with 'virtualbox' provider...

==> default: Importing base box 'bento/amazonlinux-2'...

.....

==> default: Machine booted and ready![default] GuestAdditions versions on your host (6.1.18) and guest (6.1.16) do not match.

Loaded plugins: dkms-build-requires, langpacks, priorities, update-motd

.....

--> Finished Dependency Resolution

Dependencies Resolved

================================================================================

Package Arch Version Repository Size

================================================================================

Installing:

elfutils-libelf-devel x86_64 0.176-2.amzn2 amzn2-core 40 k

gcc x86_64 7.3.1-12.amzn2 amzn2-core 22 M

kernel-devel x86_64 4.14.198-152.320.amzn2 amzn2-core 13 M

kernel-devel x86_64 4.14.219-161.340.amzn2 amzn2-core 13 M

Updating:

perl x86_64 4:5.16.3-299.amzn2.0.1 amzn2-core 8.0 M

Installing for dependencies:

cpp x86_64 7.3.1-12.amzn2 amzn2-core 9.2 M

glibc-devel x86_64 2.26-41.amzn2 amzn2-core 991 k

.....

perl-libs x86_64 4:5.16.3-299.amzn2.0.1 amzn2-core 685 k

Transaction Summary

================================================================================

Install 4 Packages (+ 4 Dependent packages)

Upgrade 1 Package (+15 Dependent packages)

Total download size: 84 M

Downloading packages:

Delta RPMs disabled because /usr/bin/applydeltarpm not installed.

--------------------------------------------------------------------------------

Total 829 kB/s | 84 MB 01:43

Running transaction check

Running transaction test

Transaction test succeeded

Running transaction

Installing : elfutils-libelf-devel-0.176-2.amzn2.x86_64 1/40

Updating : glibc-common-2.26-41.amzn2.x86_64 2/40

Updating : glibc-2.26-41.amzn2.x86_64 3/40

.....

Installed: elfutils-libelf-devel.x86_64 0:0.176-2.amzn2

gcc.x86_64 0:7.3.1-12.amzn2

kernel-devel.x86_64 0:4.14.198-152.320.amzn2

kernel-devel.x86_64 0:4.14.219-161.340.amzn2

Dependency Installed:

cpp.x86_64 0:7.3.1-12.amzn2

glibc-devel.x86_64 0:2.26-41.amzn2

glibc-headers.x86_64 0:2.26-41.amzn2

kernel-headers.x86_64 0:4.14.219-161.340.amzn2

Updated:

perl.x86_64 4:5.16.3-299.amzn2.0.1

Dependency Updated:

glibc.x86_64 0:2.26-41.amzn2

.....

Complete!Copy iso file C:\Program Files\Oracle\VirtualBox\VBoxGuestAdditions.iso into the box /tmp/VBoxGuestAdditions.iso

.....

VirtualBox Guest Additions: Running kernel modules will not be replaced untilthe system is restarted

==> default: Mounting shared folders... default: /vagrant => C:/vagrant/amazon2

仮想環境へのログイン

vagrant sshコマンドで仮想環境にログイン。EC2のロゴが表示される。

C:\vagrant\amazon2>vagrant ssh

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
46 package(s) needed for security, out of 66 available
Run "sudo yum update" to apply all updates.

This system is built by the Bento project by Chef Software
More information can be found at https://github.com/chef/bento
[vagrant@vagrant ~]$

C:\vagrant\amazon2>vagrant ssh

__| __|_ )

_| ( / Amazon Linux 2 AMI

___|\___|___|

https://aws.amazon.com/amazon-linux-2/

46 package(s) needed for security, out of 66 available

Run "sudo yum update" to apply all updates.

This system is built by the Bento project by Chef Software

More information can be found at https://github.com/chef/bento

[vagrant@vagrant ~]$

システム情報

リリースの表現が違っている。

構築したシステム情報

[vagrant@vagrant ~]$ cat /etc/system-release
Amazon Linux release 2 (Karoo)
[vagrant@vagrant ~]$ cat /etc/os-release
NAME="Amazon Linux"
VERSION="2"
ID="amzn"
ID_LIKE="centos rhel fedora"
VERSION_ID="2"
PRETTY_NAME="Amazon Linux 2"
ANSI_COLOR="0;33"
CPE_NAME="cpe:2.3:o:amazon:amazon_linux:2"
HOME_URL="https://amazonlinux.com/"

[vagrant@vagrant ~]$ cat /etc/system-release

Amazon Linux release 2 (Karoo)

[vagrant@vagrant ~]$ cat /etc/os-release

NAME="Amazon Linux"

VERSION="2"

ID="amzn"

ID_LIKE="centos rhel fedora"

VERSION_ID="2"

PRETTY_NAME="Amazon Linux 2"

ANSI_COLOR="0;33"

CPE_NAME="cpe:2.3:o:amazon:amazon_linux:2"

HOME_URL="https://amazonlinux.com/"

オリジナルのシステム情報

$ cat /etc/system-release
Amazon Linux AMI release 2018.03
$ cat /etc/os-release
NAME="Amazon Linux AMI"
VERSION="2018.03"
ID="amzn"
ID_LIKE="rhel fedora"
VERSION_ID="2018.03"
PRETTY_NAME="Amazon Linux AMI 2018.03"
ANSI_COLOR="0;33"
CPE_NAME="cpe:/o:amazon:linux:2018.03:ga"
HOME_URL="http://aws.amazon.com/amazon-linux-ami/"

$ cat /etc/system-release

Amazon Linux AMI release 2018.03

$ cat /etc/os-release

NAME="Amazon Linux AMI"

VERSION="2018.03"

ID="amzn"

ID_LIKE="rhel fedora"

VERSION_ID="2018.03"

PRETTY_NAME="Amazon Linux AMI 2018.03"

ANSI_COLOR="0;33"

CPE_NAME="cpe:/o:amazon:linux:2018.03:ga"

HOME_URL="http://aws.amazon.com/amazon-linux-ami/"

ロケールとタイムゾーンの設定

確認

タイムゾーンがUTC、ロケールはLANG=enになっている。

[vagrant@vagrant ~]$ date
Sun Mar  7 21:29:29 UTC 2021
[vagrant@vagrant ~]$ locale
LANG=en_US.UTF-8
LC_CTYPE="en_US.UTF-8"
LC_NUMERIC="en_US.UTF-8"
LC_TIME="en_US.UTF-8"
LC_COLLATE="en_US.UTF-8"
LC_MONETARY="en_US.UTF-8"
LC_MESSAGES="en_US.UTF-8"
LC_PAPER="en_US.UTF-8"
LC_NAME="en_US.UTF-8"
LC_ADDRESS="en_US.UTF-8"
LC_TELEPHONE="en_US.UTF-8"
LC_MEASUREMENT="en_US.UTF-8"
LC_IDENTIFICATION="en_US.UTF-8"
LC_ALL=
[vagrant@vagrant ~]$ localectl
   System Locale: LANG=en_US.UTF-8
       VC Keymap: n/a
      X11 Layout: n/a

[vagrant@vagrant ~]$ date

Sun Mar 7 21:29:29 UTC 2021

[vagrant@vagrant ~]$ locale

LANG=en_US.UTF-8

LC_CTYPE="en_US.UTF-8"

LC_NUMERIC="en_US.UTF-8"

LC_TIME="en_US.UTF-8"

LC_COLLATE="en_US.UTF-8"

LC_MONETARY="en_US.UTF-8"

LC_MESSAGES="en_US.UTF-8"

LC_PAPER="en_US.UTF-8"

LC_NAME="en_US.UTF-8"

LC_ADDRESS="en_US.UTF-8"

LC_TELEPHONE="en_US.UTF-8"

LC_MEASUREMENT="en_US.UTF-8"

LC_IDENTIFICATION="en_US.UTF-8"

LC_ALL=

[vagrant@vagrant ~]$ localectl

System Locale: LANG=en_US.UTF-8

VC Keymap: n/a

X11 Layout: n/a

ロケールの設定

ロケールをJPに設定して再起動。表現は日本語になるが、まだタイムゾーンはUTC。

[vagrant@vagrant ~]$ sudo localectl set-locale LANG=ja_JP.UTF-8
[vagrant@vagrant ~]$ date
Sun Mar  7 21:31:03 UTC 2021
[vagrant@vagrant ~]$ exit
logout
Connection to 127.0.0.1 closed.

C:\vagrant\amazonlinux2>vagrant ssh
Last login: Sun Mar  7 21:29:03 2021 from 10.0.2.2
Last login: Sun Mar  7 21:29:03 2021 from 10.0.2.2

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
45 package(s) needed for security, out of 65 available
Run "sudo yum update" to apply all updates.

This system is built by the Bento project by Chef Software
More information can be found at https://github.com/chef/bento
[vagrant@vagrant ~]$ date
2021年  3月  7日 日曜日 21:32:23 UTC

[vagrant@vagrant ~]$ sudo localectl set-locale LANG=ja_JP.UTF-8

[vagrant@vagrant ~]$ date

Sun Mar 7 21:31:03 UTC 2021

[vagrant@vagrant ~]$ exit

logout

Connection to 127.0.0.1 closed.

C:\vagrant\amazonlinux2>vagrant ssh

Last login: Sun Mar 7 21:29:03 2021 from 10.0.2.2

__| __|_ )

_| ( / Amazon Linux 2 AMI

___|\___|___|

https://aws.amazon.com/amazon-linux-2/

45 package(s) needed for security, out of 65 available

Run "sudo yum update" to apply all updates.

This system is built by the Bento project by Chef Software

More information can be found at https://github.com/chef/bento

[vagrant@vagrant ~]$ date

2021年 3月 7日日曜日 21:32:23 UTC

timedatectlで現在のロケールを確認。UTC。

[vagrant@vagrant ~]$ timedatectl
      Local time: 日 2021-03-07 21:34:01 UTC
  Universal time: 日 2021-03-07 21:34:01 UTC
        RTC time: 日 2021-03-07 21:33:54
       Time zone: n/a (UTC, +0000)
     NTP enabled: yes
NTP synchronized: no
RTC in local TZ: no
      DST active: n/a

[vagrant@vagrant ~]$ timedatectl

Local time: 日 2021-03-07 21:34:01 UTC

Universal time: 日 2021-03-07 21:34:01 UTC

RTC time: 日 2021-03-07 21:33:54

Time zone: n/a (UTC, +0000)

NTP enabled: yes

NTP synchronized: no

RTC in local TZ: no

DST active: n/a

タイムゾーンの設定

timedatectl list-timezonesで設定可能なタイムゾーンを確認。

[vagrant@vagrant ~]$ timedatectl list-timezones
Africa/Abidjan
Africa/Accra
Africa/Addis_Ababa
.....
Asia/Tokyo
.....

[vagrant@vagrant ~]$ timedatectl list-timezones

Africa/Abidjan

Africa/Accra

Africa/Addis_Ababa

.....

Asia/Tokyo

.....

タイムゾーンをAsia/Tokyoに設定。

[vagrant@vagrant ~]$ sudo timedatectl set-timezone Asia/Tokyo
[vagrant@vagrant ~]$ date
2021年  3月  8日 月曜日 06:37:47 JST
[vagrant@vagrant ~]$ timedatectl
      Local time: 月 2021-03-08 06:37:51 JST
  Universal time: 日 2021-03-07 21:37:51 UTC
        RTC time: 日 2021-03-07 21:37:45
       Time zone: Asia/Tokyo (JST, +0900)
     NTP enabled: yes
NTP synchronized: no
RTC in local TZ: no
      DST active: n/a

[vagrant@vagrant ~]$ sudo timedatectl set-timezone Asia/Tokyo

[vagrant@vagrant ~]$ date

2021年 3月 8日月曜日 06:37:47 JST

[vagrant@vagrant ~]$ timedatectl

Local time: 月 2021-03-08 06:37:51 JST

Universal time: 日 2021-03-07 21:37:51 UTC

RTC time: 日 2021-03-07 21:37:45

Time zone: Asia/Tokyo (JST, +0900)

NTP enabled: yes

NTP synchronized: no

RTC in local TZ: no

DST active: n/a

その他の設定

共有設定、Atomでの接続はCentOS7と同じ手順で完了。