【目次】 aria-*属性の書き方 data-*属性の書き方 他の言語などの場合 aria-*属性の書き方 <%= %>の中で、aria-label="hogeをpiyoする"を↓のように書ける aria: { label: "hogeをpiyoする" } "aria-label": "hogeをpiyoする" } "aria-label" => "hogeをpiyo…

【目次】 要素の配置 position オフセット z-index 要素の配置 position position - レイアウト - Tailwind CSS position - Layout - Tailwind CSS position - CSS: カスケーディングスタイルシート | MDN 以下の要素（後述）と合わせて使う オフセット：マ…

【目次】 ヘルプ ローカルでの起動 ルーティング確認 Lint テスト デプロイ SSH接続 gem関連（Bundler） gemのアップデート gemの追加と削除 ヘルプ bin/rails -h：コマンド一覧とザックリ説明 bin/rails コマンド -h：個々のコマンドの説明 bundle exec erb…

【目次】 概要 minitestのアサーション 各テストで使える「Rails独自のアサーション」 「モデルのテスト」で使えるアサーション 「コントローラの機能テスト」「結合テスト」で使えるアサーション 「システムテスト」で使えるアサーション Capybaraのアサー…

【目次】 概要 使い方 ブラウザ操作のメソッド（基本） 範囲を絞って要素を指定したい場合 アサーション 概要 ブラウザ上の操作を設定できる Railsのシステムテストで使われている システムテスト < Rails テスティングガイド - Railsガイド 使い方 teamcapy…

【目次】 Capybaraについて Capybaraのアサーション Capybaraについて 【Rails】Capybara teamcapybara/capybara: Acceptance test framework for web applications RubyDoc.info: File: README – Documentation for jnicklas/capybara (master) – RubyDoc.i…

【目次】 概要 注意点 fixtureの書き方と使い方（基本） 関連付けの書き方と使い方 belongs_to（has_one、has_many）の書き方 belongs_to（has_many）の使い方例 polymorphic belongs_to（ポリモーフィック関連付け）の書き方 has_and_belongs_to_many、has_…

【目次】 リモートとローカルの紐付け（２種類） ①リモートを先に作り、ローカルに持って来たい ②ローカルを先に作り、リモートに持って行きたい ローカル側でのリモートの呼び名の登録 リモートとローカルの紐付け（２種類） ①リモートを先に作り、ローカル…

【目次】 コマンドの基礎 サブコマンド コマンド オプション コマンドの例 各コンテナの操作 コマンドの基礎 基本の書式： docker サブコマンド コマンド オプション コマンドの引数など サブコマンド コマンドの区分のようなもの container：各コンテナの操…

【目次】 書き方の概要 書き方例：画像自身にinline 書き方例：親要素にinline-flex 書き方の概要 【CSS】displayプロパティの基本（外側、内側について） inline-flex < display - Layout - Tailwind CSS 以下のどちらか 画像自身にinlineを使う 親要素にin…

【目次】 概要（書き方の使い分け） 書き方：HTMLタグ 書き方：MathML 書き方：Tailwind CSS 序数 デザイン（配置） デザイン（文字サイズ） 概要（書き方の使い分け） 使用上のメモ < ^{: 上付き文字要素 - HTML | MDN 使用上のメモ < _{: 下付き文字要素 - HTM}}…

【目次】 リスト マーカーに画像を使う マーカーの位置 マーカーのスタイル 文字装飾 線の種類 線の色 線のスタイル 線の太さ 下線のオフセット リスト マーカーに画像を使う list-style-image - タイポグラフィ - Tailwind CSS list-style-image - Typograp…

【目次】 概要 gridの特徴 書き方 行と列の数 行と列の数（コンテナの分割）：コンテナ側で指定 行と列の数（セルの結合）：アイテム側で個別指定 サイズ コンテナ、アイテムのサイズ 行と列のサイズ：コンテナ側で指定 アイテムの並ぶ方向、順番 アイテムの…

【目次】 概要 flexの特徴 書き方 flexの初期設定 アイテムの並ぶ方向：コンテナ側で指定 アイテムの並び順：アイテム側で指定 折り返し：コンテナ側で指定 サイズ コンテナ、アイテムのサイズ（固定値） アイテムの拡大・縮小（コンテナ変形への対応）：ア…

【目次】 基本の余白 基本の余白：親要素側で「一括指定」 基本の余白：子要素側で「個別指定」 flexとgridで使える余白：親要素側で「一括指定」 基本の余白 基本の余白：親要素側で「一括指定」 アイテム間のみのマージン。文章など、インラインで使う場合…

【目次】 概要 共通 R面取り 線の色 境界線（border） 境界線（border）の幅 境界線（border）のスタイル 輪郭線（outline） 輪郭線（outline）の幅 輪郭線（outline）のスタイル 輪郭線（outline）のオフセット ボックスシャドウ（ring、inset-ring） 概要 …

【目次】 フォントの種類 フォントサイズ フォントスタイル（筆記体） 線の太さ フォントの幅 数字、分数、序数記号の表記を制御 フォントの種類 font-family - タイポグラフィ - Tailwind CSS font-family - Typography - Tailwind CSS font-family font-sa…

【目次】 概要 書き方 書き方例 概要 「改行コード」を「エスケープされないHTMLタグ」に置き換えて表示する エスケープの書き方 < 【Rails】クロスサイトスクリプティング（XSS）とその対策 書き方 safe_join：「第1引数（配列）の要素」を「第2引数（区切…

【目次】 概要 書き方例 概要 ブラウザのタイムゾーンを取得 Intl.DateTimeFormat().resolvedOptions().timeZone Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript | MDN Rails側に送信 書き方例 計算のついでにRails側に値を渡すようにしたケ…

【目次】 色について カラーパレットの色 カラーパレット以外の色 白黒、カスタム値 書き方 文字関連 背景、外形 フォーム、その他 SVG要素 色について CSSの色に関する解説と例 CSS 色 color - CSS: カスケーディングスタイルシート | MDN CSS を使った HTM…

【目次】 非表示の書き方①：スペースが残る 非表示の書き方②：スペースも消す 非表示の書き方①：スペースが残る 要素を不可視にする < visibility - レイアウト - Tailwind CSS Making elements invisible < visibility - Layout - Tailwind CSS visibility …

【目次】 各種サイズ Chrome開発者ツールの「デバイスツールバー」 ブレークポイント コンテナスケール 用語 サイズの設定 基本の設定 ビューポートのサイズに比例した設定 サイズの「下限」「上限、段階的な変化」 各種サイズ 1文字の大きさ：1rem = 4 = 16…

【目次】 ブレークポイント 状態 モード 色 ブレークポイント ⭐️あるサイズより大きいものに対する設定（モバイルのデザインが優先） コンテナスケールのサイズとは別物（【Tailwind CSS】基本の書き方（サイズ）） 日レスポンシブデザイン - コアコンセプト…

【目次】 概要 書き方 Tailwind CSS ver.4の場合 例（ver.4）：サイズの詳細設定 例（ver.4）：再利用の為のコンポーネント化 Tailwind CSS ver.3の場合 例（ver.3）：再利用の為のコンポーネント化 概要 「再利用」や「詳細設定」ができる 書き方 Tailwind …

【目次】 概要 よく使う書き方 コンテナ内での配置：コンテナ側で指定 コンテナ内での配置：主軸方向 コンテナ内での配置：交差軸方向 コンテナ内での配置：両軸方向一括 各アイテム個別の位置指定（グリッドセル内の位置など） 各アイテム：コンテナ側で「…

【目次】 概要 配置（左右） 配置（上下） 概要 ⭐️ 【CSS】displayプロパティの基本（外側、内側について） 配置（左右） ⭐️ブロックは自身に設定 ⭐️インラインは親要素に設定 日text-align - Typography - Tailwind CSS 英text-align - Typography - Tailwi…

【目次】 概要 書き方 外側 外側：block 外側：inline 親要素内でのblockとinlineの配置 内側 内側：flow 内側：flex 内側：grid 外側＋内側 外側＋内側：inline-block 外側＋内側：inline-flex 外側＋内側：inline-grid HTML要素のデフォルト設定 概要 要素…

【目次】 概要 設定手順 注意点 手順①-1：手持ちのJSファイルを使いたい場合 手順①-2：CDN経由でnpmを使いたい場合 手順②：共通 インポートの例 概要 importmapのイメージ：JSモジュールの読み込み（import）を、あるファイルにマッピング（map）して一元管…

【目次】 概要 書き方 exportの書き方 名前付きエクスポート デフォルトエクスポート 再エクスポート・集約 importの書き方 名前付きインポート デフォルトインポート ⭐️名前空間のインポート（すべてをインポート） 副作用のインポート 概要 exportの種類（…

【目次】 概要 書き方例 ⭐️確認ダイアログを出したい JavaScriptによる変化をトリガーとして、画面「全体」を更新したい 概要 【Rails】Hotwireの概要とtips 書き方例 Turbo ドライブを使ったナビゲート: Turbo ハンドブック: Hotwire ドキュメント（有志翻…