Ruby on Rails チュートリアル

プロダクト開発の０→１を学ぼう

Railsチュートリアルとは？

Book

Webサービスを作りながら
学ぶ大型チュートリアル

PC

ゼロからデプロイまで
プロダクト開発の流れを集約

テキスト・動画

テキストや解説動画など
様々な学び方をサポート

大学や社員研修でも採用された、Webサービス開発が学べる学習サービスです。Railsチュートリアルで学び、自分のプロダクトを作ってみませんか？

さっそく読む

🔰 初めての人へ

これから学び始める方向けに動画とスライドを用意しました！『まずは全体像を把握したい』といった場面でぜひ。

📖 すばやく学びたい人へ

解説動画や質問対応サービスがオススメです。大学でも採用された挫折を減らす仕組みで「早く学びたい!」という方はぜひ。

あなたに合った学び方を選ぼう

解説動画で学ぶ

¥32,780

解説動画
詳細を見る

コミュニティで学ぶ

¥40,480

（翌月以降 1,100 円／月）
解説動画
専用チャンネルと課題
詳細を見る

質問しながら学ぶ

¥59,000

解説動画
オンライン質問対応
現役エンジニアが対応
詳細を見る

購入者の声

購入者の声
私はSIerにいますが、Railsチュートリアルは人生を変える良いキッカケになりました！今は職場で2つ目のプロダクトを開発中です。若い人だけでなく、35歳前後の人たちにも『やってみよう！』と挑戦してもらえたら良いなと思っています。(35歳だけど完走したら人生が変わった話 / 🆕 完走から３年後の話)
購入者の声
チュートリアルの説明だけでは、なんでそれをやるんだろう？とか、 言い回しが難しくて、初心者には感覚的に理解できない箇所がいくつもあったように振り返ります。そういう時に解説動画は噛み砕いて説明してくれてたので、すんなり自分のものにできたなぁと感じています！(@seki_dev_canada)
購入者の声
動画を買ってスゴい後悔しました。『最初から見ておけば良かった』と言える分かりやすさだったからです！２周〜３周する必要も無くなるので、最初から動画を見るとだいぶ時短になると思います。(ブログ: なぜ医者からエンジニアへ？ / インタビュー動画)
解説動画を見る
テキストで学ぶ

電子書籍で学ぶ

電子書籍のイメージ

¥5,478（税込）

  • EPUB / PDF 対応
  • オフラインで読める
  • 全章まとめて検索できる
詳細を見る

Webテキスト (第6版)

Webテキスト (有償版)

¥1,078（税込）

試し読み

Webテキスト (第4版)

Webテキスト (無償版)

無料

  • GitHub 非対応
  • Rails 5.1 対応 (注意点)
  • 古い過去アーカイブ版です
試し読み
基本から学びたい人へ

Webサービス開発に触れてみて『ローカル開発に挑戦したい』『フロントエンドの基本も学びたい』と考えている方向けのコンテンツです。各トピックをチュートリアル形式で学べます。

開発環境の基本を学ぶ

コマンドライン編

コマンドライン編
  • コマンド入力の基本
  • ファイル操作と検索
  • ディレクトリと構造
試し読み

テキストエディタ編

テキストエディタ編
  • Vimエディタの基本
  • VS Codeなどの操作
  • 細かな編集のワザ
試し読み

Git/GitHub 編

Git/GitHub編
  • Gitの基本コマンド
  • ブランチとマージ
  • コンフリクトの解消
試し読み

Web技術の基本を学ぶ

HTML 編

HTML編
  • HTMLタグの基本
  • 場面に応じた使い方
  • GitHub Pagesで公開
試し読み

CSS & Design 編

CSS & Design 編
  • CSS/デザインの基本
  • Jekyllでサイト制作
  • Flexboxの徹底理解
試し読み

JavaScript 編

JavaScript編
  • JavaScript (JS) の基本
  • 基本的なデータ構造
  • JSでテスト駆動開発
試し読み
学習ガイドと参考書

RubyとRailsの
学習ガイド

旅のしおり
  • 実践的な開発の案内板
  • 40ページ、イラスト付
  • 全体を押さえたい人向け
詳細を見る

予習/復習に最適
Railsの教科書

旅のしおり
  • 大学の社会学部で採用
  • 100ページ、イラスト付
  • 予習/復習したい人向け
詳細を見る



最新情報を
メールでお知らせ カバー画像

Railsチュートリアルの最新情報をキャッチアップしませんか？note の『Railsチュートリアル マガジン』をフォローしていただくと、最新情報がメールで届くようになります。

最新情報を見る
社員研修で利用する
テレワークに対応！チーム向け研修支援サービス
研修期間を短くしたい
理解度のバラつきを抑えたい
「やっただけ」にさせたくない
詳細を見る
教育事業で活用する
ライセンス契約で事業を加速させる！ - Railsチュートリアル教材連携サービス

Railsチュートリアルを事業で使ってみませんか？教育機関やスクールなどであればトレーニングなどのチーム向け機能がご利用できます。

詳細を見る

利用実績・提携法人

  • 筑波大学
  • 琉球大学
  • 大阪電気通信大学
  • 工学院大学
  • 株式会社リゾーム
  • 産業技術大学院大学
  • マネーフォワード
  • Progate
  • メンバーズキャリア
  • CODE BASE - 宜野湾西海岸を、ITビーチに！
  • ITジョブキタ | HAJエンパワーメント
  • Nilquebe | 神戸・阪神間のコワーキングスペース的ワークスペース
  • 株式会社テクトレ
  • 株式会社シェアウィズ
  • 株式会社システムインテグレータ
  • 八戸工業大学
  • 岐阜大学
  • Rails技術者認定試験運営委員会
  • 近畿大学
  • 未踏ジュニア
  • tecpit
  • GMOペパボ
  • ソニックガーデン
  • Classi

社員研修や教材連携の事例も公開しております。様々な場面に対応していきたいと考えておりますので、まずはお気軽にご相談いただけると幸いです。

社員研修の事例を見る
教材連携の事例を見る

📜 コンテンツ目次

第6版 目次

コマンドライン編

テキストエディタ編

  • 1章テキストエディタとは
  • 2章現代的なテキストエディタ
    • 2.1テキストエディタを選ぶ
      • 2.1.1Sublime Text
      • 2.1.2Visual Studio Code (VSCode)
      • 2.1.3Atom
    • 2.2ファイルをエディタで開く
      • 2.2.1シンタックスハイライト
      • 2.2.2Markdownをプレビュー表示する
    • 2.3ファイル内を移動する
    • 2.4テキスト範囲を選択する
      • 2.4.11つの単語を選択する
      • 2.4.21つの行全体を選択する
      • 2.4.3複数行を選択する
      • 2.4.4ドキュメント全体を選択する
    • 2.5カット、コピー、貼り付け
      • 2.5.1Jumpcutツールについて
    • 2.6削除と取り消し
    • 2.7変更を保存する
    • 2.8検索と置換
    • 2.9まとめ
  • 3章テキスト編集の高度な技
    • 3.1オートコンプリート機能をTabキーでトリガーする
      • 3.1.1オートコンプリート
      • 3.1.2Tabトリガー
    • 3.2ソースコードを書く
      • 3.2.1シンタックスハイライト
      • 3.2.2コメントアウト機能
      • 3.2.3インデントと逆インデント
      • 3.2.4行番号を指定してジャンプする
      • 3.2.580カラムの制限
    • 3.3実行可能なスクリプトを書く
    • 3.4プロジェクトを編集する
      • 3.4.1ファジーオープン
      • 3.4.2マルチペイン
      • 3.4.3 グローバル検索置換
    • 3.5カスタマイズ
    • 3.6まとめ
    • 3.7本チュートリアルを終えた方に

Git/GitHub編

HTML編

  • 1章HTMLの基礎
  • 2章indexページに手を加える
    • 2.1見出し
    • 2.2テキストの整形
      • 2.2.1イタリック体による強調
      • 2.2.2太字による強調
    • 2.3リンク
    • 2.4画像を追加する
      • 2.4.1ホットリンク
  • 3章ページを追加してさまざまなタグを学ぶ
    • 3.1HTMLに関するHTMLページ
    • 3.2テーブル
      • 3.2.1ブロック要素
      • 3.2.2インライン要素
    • 3.3divタグとspanタグ
    • 3.4リスト
    • 3.5ナビゲーションメニュー
  • 4章インライン方式のスタイル追加とCSS
    • 4.1テキストにスタイルを指定する
    • 4.2フロート
    • 4.3マージンを適用する
    • 4.4マージンの小技
    • 4.5ボックスを使ったスタイル指定
    • 4.6ナビゲーションメニューにスタイルを指定する
    • 4.7はじめてのCSS
      • 4.7.1内部スタイルシート
      • 4.7.2外部スタイルシート
    • 4.8 まとめ

CSS & Design編

  • 1章 CSSのあらまし
  • 2章 「スタイル指定」の作法
  • 3章 CSSの値: 色とサイズを指定する
    • 3.1 CSSの色指定
      • 3.1.1 16進数のカラーコード
      • 3.1.2 色をrgb()で、透明度をrgba()で指定する
    • 3.2 サイズ指定の基礎
    • 3.3 ピクセル（および日陰者の「ポイント」）
    • 3.4 パーセントによる指定
      • 3.4.1 フォントサイズのパーセント指定について
    • 3.5 em単位によるフォントサイズ指定
    • 3.6 夢のrem単位指定がやってきた
    • 3.7 サイズ指定のニューフェイス: vhとvw
    • 3.8 気持ちよく読めるフォントにしよう
  • 4章 ボックスモデルを完全攻略する
    • 4.1 インラインvsブロック
      • 4.1.1 display: none
      • 4.1.2 display: block
      • 4.1.3 display: inline
      • 4.1.4 display: inline-block
      • 4.1.5 display: flex
    • 4.2 マージン、パディング、ボーダー
      • 4.2.1 マージンの不気味な挙動
    • 4.3 フロート
      • 4.3.1 フロートをクリアする
    • 4.4 overflowスタイルに関する追記
    • 4.5 インラインブロック
    • 4.6 ボックスのマージン
      • 4.6.1 例外その1: margin: auto;
      • 4.6.2 例外その2: マージンにマイナスの値を指定する
    • 4.7 パディングは単なる椅子のクッションではない
    • 4.8 ボーダーで遊ぶ
      • 4.8.1 ボーダーの「radius」
      • 4.8.2 CSSで丸を描く
      • 4.8.3 line-height
      • 4.8.4 CSSとHTMLのずれを修正する
  • 5章 レイアウトを組み立てる
    • 5.1 レイアウト組みの基礎
    • 5.2 Jekyll
      • 5.2.1 Jekyllをインストールして実行する
    • 5.3 Jekyllのさまざまな特殊ディレクトリ
      • 5.3.1 layouts/ディレクトリとレイアウトテンプレートファイル
      • 5.3.2 includes/ディレクトリ
      • 5.3.3 pages/ディレクトリとページテンプレート
      • 5.3.4 posts/ディレクトリとpost-typeファイル
    • 5.4 レイアウトファイル
    • 5.5 CSSファイルを切り出して「CSSリセット」を加える
    • 5.6 Jekyllの「インクルード」の概要: headセクションとヘッダー
      • 5.6.1 ページの最上部にヘッダーセクションを置く
      • 5.6.2 ナビゲーションと「子セレクタ」
    • 5.7 高度なセレクタ
      • 5.7.1 擬似クラス
      • 5.7.3 first-child
      • 5.7.5 兄弟セレクタ
    • 5.8 位置指定
      • 5.8.1 ロゴ文字を本物の画像にする
    • 5.9 ヘッダーセクションを上部に固定する
    • 5.10 フッターをincludesフォルダにインクルードする
  • 6章 ページのテンプレートとfrontmatterの書き方
    • 6.1 テンプレートのコンテンツ
    • 6.2 「やっぱり家（Home）が一番」
    • 6.3 さらに高度なセレクタ
      • 6.3.1 :before疑似要素と:after疑似要素
      • 6.3.2 CSSの:beforeと:afterで三角形を作る技
    • 6.4 ページとフォルダを追加する
  • 7章 Flexboxで特殊なレイアウトページを構築する
    • 7.1 コンテナにコンテンツをぴったり流し込む
    • 7.2 Flexboxで垂直方向の中央揃えを実現する
    • 7.3 Flexboxスタイルのオプションとショートハンド
      • 7.3.1 フレックスコンテナのプロパティ
      • 7.3.2 フレックスアイテムのプロパティ
    • 7.4 3段組のページレイアウト
    • 7.5 ギャラリーの「スタブ」
  • 8章 ブログを追加する
    • 8.1 ブログ記事を1件追加する
      • 8.1.1 ブログインデックスの構造
    • 8.2 ブログのIndexページでコンテンツをリスト表示する
    • 8.3 ブログの記事ページにスタイルを設定する
  • 9章 モバイルとメディアクエリ
    • 9.1 モバイル向けデザインを始める
      • 9.1.2 モバイルデバイスを使わずにモバイル表示を確認する
    • 9.2 モバイル向けに最適化する
      • 9.2.1 グローバルスタイル
      • 9.2.2 Homeページのスタイル
      • 9.2.3 3段組ギャラリーページのスタイル
      • 9.2.4 ブログ記事一覧ページのスタイル
      • 9.2.5 ブログ記事ページのスタイル
    • 9.3 モバイルの「ビューポート」
    • 9.4 ドロップダウンメニュー
      • 9.4.1 ヒットボックス
      • 9.4.2 ドロップダウンボックスを作る
    • 9.5 モバイルのドロップダウンメニュー
  • 10章 細部を仕上げる
    • 10.1 カスタムフォント
      • 10.1.1 ベクタフォントをインストールする
      • 10.1.2 CDNからテキストフォントを読み込む
    • 10.2 ファビコン
    • 10.3 カスタムタイトルとmetaタグ
      • 10.3.1 カスタムタイトル
      • 10.3.2 カスタム説明文
    • 10.4 まとめと関連読み物

JavaScript編

原著者から，日本の皆さまへ

まつもとゆきひろ (Matz) 氏のいる日本の方々にも Rails Tutorial を届けられて嬉しいです。ここ数年間でMatzや日本のRuby開発者の方々とお会いしましたが、皆さんの技術的な才覚と親切さはいつも私に感銘を与えてくれます。

また、安川氏や八田氏を始めとする多くの関係者によって、本書が日本にも届けられたことを光栄に思います。私の賛同を得て電子書籍版なども提供しており、その収益はこの活動を支えていきます。もしあなたが日本の読者であれば、ぜひ本書を手に取ってみてください！

by Michael Hartl

協力者

ライセンス

原著
Ruby on Rails Tutorial: Learn Web Development with Rails.
Copyright © Michael Hartl.

本書（二次著作物）
Ruby on Railsチュートリアル：プロダクト開発の０→１を学ぼう
Copyright © YassLab 株式会社 (商標公報6006997)

本サイトは原著者から許諾を得て運営されています。