N+1問題とは クエリ1回にN件のデータを取得しましたが、関連テーブルよりデータを取得するためにクエリをN回追加する問題 検索結果件数ごとに参照情報を得るために件数分繰り返して検索を行う問題 DBクエリの実行コスト（回数）が大きいため、eager loadingなどの方法で解決することをお勧めします 簡単にいうと、N+1は参照情報を取得する時に必要以上のクエリを実行する問題です。 最初に必要なレコードを全て取得(1) + 各レコードに紐づいているデータを取得するために(N)回クエリを実行 従って、一つの結果のために、N+1回のクエリ実行が行われる非効率的なロジックになってしまい、パフォーマンス低下に繋がります。 例 class Employee < ApplicationRecord has_many: :forms end class Form < ApplicationRecord..

flexbox練習サイト：https://flexboxfroggy.com/#ja Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com css練習ツール：https://jsbin.com/ JS Bin Sample of the bin: jsbin.com デザインガイドサイト：https://material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io マー..

Flexboxは、 コンテナ（親要素） アイテム（子要素） 上記2つの要素によって構成されている。 コンテナ（親要素、f-container）に使用できるプロパティ flex-direction アイテムの並び順を指定する row（デフォルト）：アイテムを水平方向に左から右へと配置 row-reverse：アイテムを水平方向に右から左へと配置 column：アイテムを垂直方向に上から下へと配置 colmn-reverse：アイテムを垂直方向に下から上へと配置 flex-wrap アイテムの折り返しを指定する nowrap（デフォルト）：アイテムを折り返さずに一列に配置 wrap：複数行のアイテムを上から下へと配置 wrap-reverse：複数行のアイテムを下から上へと配置 flex-flow アイテムの並び順と折り返しを一括で指定する .f-container{ flex-flow:..

positionとは、ボックスの配置方法（基準位置）を指定するプロパティ。 実際に表示位置を指定するためには、top、right、bottom、leftプロパティを併用して、基準位置からの距離を指定する必要がある。 以下の値で指定できる。 static static特に配置方法を指定せず、通常の位置に配置する（初期値）。 この値の場合はtop、bottom、left、rightを併用しない。 relative 通常の位置を基準とした、相対位置への配置を指定する。 absolute 包含ブロック（直近の祖先要素でポジショニングされた要素、もしくはウインドウの内容領域）を基準とした、絶対位置への配置を指定する Fixed ウインドウを基準とした絶対位置への配置を指定する。 absoluteと異なり、スクロールしても同じ位置に固定する。 sticky ある位置に来るスクロールと共に動く。 ウ..

displayとは要素の表示形式を指定するプロパティ。 以下の値で指定できる。 block inline inline-block width/height ○ X ○ margin/padding ○ 左右のみ○ ○ 並び方 縦並び 横並び 横並び 要素 p、div、ul、h1〜h6など a、span、imgなど