2026.10.02
  • CSS
CSS複数行省略｜line-clampが効かない原因と完成コード

CSS複数行省略｜line-clampが効かない原因と完成コード

RJC Techチーム

CSSで複数行のテキストを「…」で省略するには、display: -webkit-box・-webkit-box-orient: vertical・-webkit-line-clamp: 行数・overflow: hidden の4つをセットで指定します。 1行だけなら overflow: hidden・text-overflow: ellipsis・white-space: nowrap の3点セットです。どちらも「1つでも欠けると省略されない」のが特徴で、効かないときの原因の多くはこのセットの欠けか、親要素・余白の指定にあります。

この記事では、まずコピペで使える早見表を示し、そのあと効かない原因16パターンを最小再現HTMLで作り、Playwright（Chromium 141.0.7390.37）で行数・高さ・はみ出し幅を実測した結果を表にしました。さらに、省略されているときだけ表示される「もっと見る」ボタンの完成コード（動作確認つき）、日本語とURL・英単語が混ざったときの折り返し、読み上げソフトへの配慮までまとめています。

CSSテキスト省略の早見表

やりたいこと 必須の指定（コピペ用） 補足
1行で「…」省略 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 3点セット。要素はブロック系（block / inline-block / table-cell など）で幅が決まっていること
複数行（例：3行）で「…」省略 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 4点セット。主要ブラウザすべてで動く現在の標準的な書き方
将来の標準プロパティも併記 上の4点＋ line-clamp: 3; 標準の line-clamp は MDN で「Limited availability」。Chromium 141 では CSS.supports('line-clamp','3') が false
余白（padding）付きで複数行省略 padding は外側の要素へ、省略は内側の要素へ 同じ要素に padding を付けると、次の行が padding 部分に見えます（実測あり）
flex の子の中で1行省略 省略要素を包む flex アイテムに min-width: 0; 付けないと flex アイテムが文字幅まで広がり、省略されません
table セルで1行省略 table-layout: fixed; または セルに max-width: 0; 自動レイアウトの表は文字幅まで広がります
URL・長い英単語も行内で折る overflow-wrap: anywhere; 付けないと右にはみ出して切れ、「…」の位置がずれます
省略を解除して全文表示 display: block; -webkit-line-clamp: unset; overflow: visible; 「もっと見る」ボタンで切り替え（完成コードあり）
省略されているか JS で判定 el.scrollHeight > el.clientHeight（1行は scrollWidth > clientWidth） 省略中だけボタンや title 属性を付けるのに使います

本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。

（記載例）出典：株式会社RJC「CSS複数行省略｜line-clampが効かない原因と完成コード」

1行省略：text-overflow: ellipsis の3点セット

1行省略は「はみ出しを隠す」「はみ出した部分を…にする」「折り返さない」の3つを同時に指定します。 text-overflow は、はみ出した内容をどう見せるかを決めるだけのプロパティなので、単独では何も起きません。

/* 1行で省略（コピペ用） */
.ellipsis-1 {
  overflow: hidden;        /* はみ出しを隠す */
  text-overflow: ellipsis; /* 隠れる直前を「…」に */
  white-space: nowrap;     /* 折り返さず1行にする */
}

<p class="ellipsis-1" style="width: 240px;">
  株式会社の社内勉強会で、CSSの複数行省略について学びました。
</p>
3点のうち欠けたもの 実測の結果（幅240px）
なし（3点そろっている） 1行・高さ24px・scrollWidth 1297px（はみ出し分が「…」になる）
white-space: nowrap がない 6行に折り返され、高さ144px。省略されない
要素が span（inline）のまま clientWidth 0。幅を持たないため省略されず、文が横に伸びる

inline 要素（span・a など）で使うときは display: block か inline-block にして幅を与えます。

複数行省略：-webkit-line-clamp の4点セット

複数行の省略は -webkit-line-clamp を使います。 名前に -webkit- が付いていますが、Chrome・Edge・Safari・Firefox のすべてで動きます。MDN では、この接頭辞付きの書き方は「display: -webkit-box（または -webkit-inline-box）」「-webkit-box-orient: vertical」「overflow: hidden」とセットで使うことが仕様として定められており、今後もサポートが続くと説明されています。

/* 3行で省略（コピペ用） */
.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;      /* 標準プロパティ。対応ブラウザが増えたとき用（なくても動きます） */
  overflow: hidden;
}

行数を変えたいときは数字だけを変えます。CSS変数にしておくと、カードごとに切り替えやすくなります。

.clamp {
  --lines: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  line-clamp: var(--lines);
  overflow: hidden;
}
.card__title { --lines: 2; }
.card__body  { --lines: 4; }

標準の line-clamp の対応状況

標準の line-clamp（接頭辞なし）は、2026年10月時点の MDN で「Limited availability（主要ブラウザの一部で未対応）」です。 構文は line-clamp: 3; のほか、line-clamp: 3 "…続きあり"; のように末尾に付ける文字列も指定できる仕様になっています。

この記事の検証環境で確認した結果は次のとおりです。

// Chromium 141.0.7390.37 のコンソールで実行
CSS.supports('line-clamp', '3')          // false
CSS.supports('-webkit-line-clamp', '3')  // true

今は -webkit-line-clamp の4点セットを主にし、line-clamp は併記にとどめるのが確実です。

max-height で切る方法との違い

方法 末尾の「…」 行の途中で切れる 実測（line-height 24px・3行分）
-webkit-line-clamp: 3 付く 切れない（行単位） 高さ72px、scrollHeight 144px
max-height: 72px; overflow: hidden; 付かない line-height と合わないと切れる 高さ72px、末尾は文の途中で途切れる

max-height は「…」が付かず、フォントサイズや line-height が変わると半端な行が見えます。 「…」が必要なら line-clamp を使います。

line-clampが効かない原因一覧（Chromium 141で実測）

効かないときは、まず「4点セットがそろっているか」「同じ要素に padding がないか」「親が flex・table ではないか」を確認します。 次の表は、幅240px・font-size 16px・line-height 24px・6行になる日本語の文章で、各パターンを実測したものです。

  • 行数：文章が組まれた行の数（Range.getClientRects の行頭位置で数えたもの）
  • 見える行：要素の枠内に見えている行の数（一部だけ見える行も含む）
  • 見た目はスクリーンショットで確認しました

複数行省略（-webkit-line-clamp: 3）のパターン

パターン 計算後の display 行数 見える行 高さ / scrollHeight 見た目 直し方
4点セットそろい（正常） flow-root 6 3 72 / 144 3行目末尾に「…」 ―
overflow: hidden なし flow-root 6 6 72 / 144 3行目に「…」が出るのに、4行目以降が枠の外に重なって見える overflow: hidden を足す
-webkit-box-orient なし -webkit-box 6 6 144 / 144 省略されず全文表示 -webkit-box-orient: vertical を足す
後のルールで display: block に上書き block 6 6 144 / 144 省略されず全文表示 上書きしているルールを探す（DevTools の Styles で打ち消し線を確認）
同じ要素に padding: 12px flow-root 6 4 96 / 168 「…」の下に4行目の上半分が見える padding を外側の要素へ移す
padding を外側、省略を内側（修正後） ― ― 3 外枠 96 3行目末尾に「…」、4行目は見えない ―
white-space: nowrap が残っている flow-root 1 1 24 / 24（scrollWidth 1297） 1行で途切れ、「…」も付かない 1行省略用のクラスと混ぜない
max-height だけで切る block 6 3 72 / 144 「…」なし、文の途中で途切れる line-clamp を使う

正常時の計算後の display が -webkit-box ではなく flow-root と表示されるのは、Chromium 141 の挙動です。 -webkit-line-clamp と組み合わさったときにブロックとして扱われるためで、見た目は正しく省略されています。DevTools の Computed で flow-root と出ても慌てなくて大丈夫です。

1行省略（text-overflow: ellipsis）のパターン

パターン 要素の幅（clientWidth） scrollWidth 見た目 直し方
3点セットそろい（正常） 240 1297 末尾に「…」 ―
white-space: nowrap なし 240 240 6行に折り返す white-space: nowrap を足す
span（inline 要素） 0 0 省略されず横に伸びる display: block / inline-block
flex アイテムの中、min-width 指定なし 1297（親の flex アイテムが文字幅まで拡大） 1297 省略されず枠の外へ 包んでいる flex アイテムに min-width: 0
flex アイテムに min-width: 0 240 1297 末尾に「…」 ―
table セル（自動レイアウト） 1299（表が広がる） 1299 省略されず表が横に伸びる table-layout: fixed
table に table-layout: fixed 234 1299 末尾に「…」 ―
セルに max-width: 0 234 1299 末尾に「…」 ―

padding で次の行が見える理由と直し方

overflow: hidden は「padding の外側（padding box）」で切り取るため、padding の部分には続きの行がそのまま描かれます。 line-clamp で高さは「3行分＋padding」になりますが、4行目は内容の流れとして3行目の下に存在しているので、下の padding（12px）にちょうど上半分が入ります。実測でも、見える行が4になっていました。

<!-- 直す前：同じ要素に padding と省略 -->
<p class="card clamp-3" style="padding: 12px;">……</p>

<!-- 直した後：padding は外側、省略は内側 -->
<div class="card" style="padding: 12px;">
  <p class="clamp-3" style="margin: 0;">……</p>
</div>

padding-top・左右だけなら影響は出ません。 下側の padding が問題になるので、「余白は外側の箱、省略は内側の箱」と分けておくと安心です。

flex の子で省略されない理由

flex アイテムは初期値 min-width: auto のため、中身の「折り返せない最小幅」より小さく縮みません。 white-space: nowrap の文は1行全体が最小幅になるので、flex アイテムが文字幅（実測1297px）まで広がり、内側の要素も省略されなくなります。

/* アイコン＋テキストの横並びで、テキストを1行省略 */
.row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.row__body {
  flex: 1;
  min-width: 0;            /* ← これで縮めるようになる */
}
.row__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

省略する要素そのものが flex アイテムで、overflow: hidden を持っている場合は、min-width: auto が 0 として扱われるので省略されます。包む要素が1段挟まると効かなくなるので、その要素に min-width: 0 を付けます。grid の子でも同じで、grid-template-columns: 1fr の代わりに minmax(0, 1fr) を使うか、子に min-width: 0 を付けます。

最小再現HTMLと計測コード（コピペで再確認できます）

原因の切り分けには、同じ文章・同じ幅で条件を1つずつ変えた最小HTMLを作るのが近道です。 上の表は次のファイルで計測しました（一部抜粋）。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  body { font: 16px/24px sans-serif; margin: 16px; }
  .box { width: 240px; margin: 0 0 24px; border: 1px solid #888; }
  .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>
</head>
<body>
  <p id="ok" class="box clamp">TEXT</p>
  <p id="noOverflow" class="box" style="display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3">TEXT</p>
  <p id="padding" class="box clamp" style="padding:12px">TEXT</p>
  <div class="box" style="display:flex"><div><p id="flexNoMin" class="one" style="margin:0">TEXT</p></div></div>
  <div class="box" style="display:flex"><div style="min-width:0"><p id="flexMin0" class="one" style="margin:0">TEXT</p></div></div>
  <table class="box" style="width:240px;table-layout:fixed"><tr><td id="tdFixed" class="one">TEXT</td></tr></table>
</body>
</html>

// lc.js（Node 22 + playwright 1.56.0、既存の Chromium を使用）
// 実行: node lc.js
const { chromium } = require('playwright');
const fs = require('fs');
const T = '株式会社の社内勉強会で、CSSの複数行省略について学びました。カードの説明文を三行で切りそろえると、一覧が見やすくなります。行の高さや余白の指定にも注意が必要です。';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 800, height: 2400 } });
  await page.setContent(fs.readFileSync('lc.html', 'utf8').replaceAll('TEXT', T));
  const rows = await page.evaluate(() => [...document.querySelectorAll('[id]')].map(el => {
    const cs = getComputedStyle(el);
    const range = document.createRange();
    range.selectNodeContents(el);
    const tops = [...new Set([...range.getClientRects()].map(r => Math.round(r.top)))];
    const rect = el.getBoundingClientRect();
    const clipBottom = cs.overflow === 'hidden' ? rect.bottom - parseFloat(cs.borderBottomWidth) : Infinity;
    return {
      id: el.id, display: cs.display,
      lines: tops.length, visibleLines: tops.filter(t => t < clipBottom - 4).length,
      h: Math.round(rect.height), cH: el.clientHeight, sH: el.scrollHeight,
      cW: el.clientWidth, sW: el.scrollWidth,
    };
  }));
  console.table(rows);
  await page.screenshot({ path: 'lc.png', fullPage: true });
  await browser.close();
})();

実行結果（抜粋）：

│ id           │ display     │ lines │ visibleLines │ h  │ cH │ sH  │ cW   │ sW   │
│ 'ok'         │ 'flow-root' │ 6     │ 3            │ 74 │ 72 │ 144 │ 240  │ 240  │
│ 'noOverflow' │ 'flow-root' │ 6     │ 6            │ 74 │ 72 │ 144 │ 240  │ 240  │
│ 'padding'    │ 'flow-root' │ 6     │ 4            │ 98 │ 96 │ 168 │ 264  │ 264  │
│ 'flexNoMin'  │ 'block'     │ 1     │ 1            │ 24 │ 24 │ 24  │ 1297 │ 1297 │
│ 'flexMin0'   │ 'block'     │ 1     │ 1            │ 24 │ 24 │ 24  │ 240  │ 1297 │
│ 'tdFixed'    │ 'table-cell'│ 1     │ 1            │ 26 │ 26 │ 26  │ 234  │ 1299 │

h は border（上下1pxずつ）を含む高さ、cH は padding を含み border を含まない高さです。sH > cH（縦）または sW > cW（横）なら、内容が隠れている＝省略が効いていると判断できます。

「もっと見る」ボタンと title 属性の完成コード

省略された全文を読めるように、省略が起きているときだけ「もっと見る」ボタンを出すと親切です。 判定は scrollHeight > clientHeight で行い、画面幅が変わったときも ResizeObserver で判定し直します。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  body { font: 16px/1.6 sans-serif; margin: 16px; }
  .clamp-card { width: 240px; margin-bottom: 24px; }
  .clamp-card__text {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  /* 展開時は省略を解除 */
  .clamp-card.is-open .clamp-card__text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
    overflow: visible;
  }
  .clamp-card__toggle {
    margin-top: 4px; padding: 0; border: 0; background: none;
    color: #0b57d0; font: inherit; cursor: pointer; text-decoration: underline;
  }
  .clamp-card__toggle[hidden] { display: none; }
</style>
</head>
<body>
  <div class="clamp-card" id="long">
    <p class="clamp-card__text" id="long-text">備品管理画面のお知らせです。今月から、貸し出し中の備品は一覧の上部にまとめて表示されます。返却予定日を過ぎた備品は色が変わるので、担当者は確認をお願いします。詳しい手順は社内ポータルの説明ページをご覧ください。</p>
    <button type="button" class="clamp-card__toggle" aria-expanded="false" aria-controls="long-text" hidden>もっと見る</button>
  </div>

  <div class="clamp-card" id="short">
    <p class="clamp-card__text" id="short-text">短いお知らせです。</p>
    <button type="button" class="clamp-card__toggle" aria-expanded="false" aria-controls="short-text" hidden>もっと見る</button>
  </div>

<script>
function setupClamp(card) {
  const text = card.querySelector('.clamp-card__text');
  const btn = card.querySelector('.clamp-card__toggle');

  const update = () => {
    if (card.classList.contains('is-open')) return;      // 展開中は判定しない
    const clamped = text.scrollHeight > text.clientHeight + 1; // +1 は小数の丸め対策
    btn.hidden = !clamped;
    if (clamped) {
      text.title = text.textContent.trim();               // マウスを乗せると全文
    } else {
      text.removeAttribute('title');
    }
  };

  btn.addEventListener('click', () => {
    const open = card.classList.toggle('is-open');
    btn.setAttribute('aria-expanded', String(open));
    btn.textContent = open ? '閉じる' : 'もっと見る';
    if (open) text.removeAttribute('title'); else update();
  });

  new ResizeObserver(update).observe(text);
  update();
}
document.querySelectorAll('.clamp-card').forEach(setupClamp);
</script>
</body>
</html>

動作確認の結果（Playwright / Chromium 141）

クリックと幅の変更を自動で行い、状態を記録しました。

操作 カード clientHeight / scrollHeight ボタン aria-expanded title 属性
初期表示 長文 77 / 179 表示「もっと見る」 false 全文が入る
初期表示 短文 26 / 26 非表示 false なし
ボタンをクリック 長文 179 / 179 表示「閉じる」 true なし
もう一度クリック 長文 77 / 179 表示「もっと見る」 false 全文が入る
カード幅を900pxに変更 長文 51 / 51（2行に収まる） 非表示 false なし

短い文や、幅が広がって収まったときはボタンが自動で消えます。 line-height 1.6（25.6px）なので3行の高さは76.8px、丸めて77pxです。判定に + 1 を入れているのは、この小数の丸めで「1px だけ大きい」と誤判定しないためです。

判定とボタンを使うときの注意

気をつけること 理由 対処
非表示（display: none）のタブ内では判定できない 高さがすべて0になる タブを開いたときに update() を呼ぶ、または ResizeObserver に任せる
Webフォントの読み込み後に行数が変わる 文字幅が変わる document.fonts.ready.then(update) を足す
1行省略の判定 縦ではなく横にはみ出す scrollWidth > clientWidth で判定
展開時に CSS を戻し忘れる display: -webkit-box のままだと続きが出ない display: block と -webkit-line-clamp: unset をセットで

日本語と英単語・URLの折り返しとの組み合わせ

日本語の文章にURLや長い英単語が混ざると、そこで行が折れずに右へはみ出し、「…」の位置がずれます。 幅200px・3行省略で、折り返し指定ごとに実測しました。

指定 日本語＋URL：行数 / scrollWidth 長い英単語：行数 / scrollWidth 見た目
指定なし 5 / 414 5 / 326 URL・単語が右で切れて見える。1行目は「資料は」だけで改行
overflow-wrap: anywhere 6 / 200 5 / 200 収まらない語だけ途中で折る。おすすめ
overflow-wrap: break-word 6 / 200 5 / 200 見た目は anywhere と同じ
word-break: break-all 5 / 200 5 / 200 英語も文字単位で詰めて折る。1行目に URL の頭が入る
word-break: keep-all 4 / 462 5 / 326 日本語も語の区切りまで折らないため、はみ出しが大きくなる

迷ったら overflow-wrap: anywhere を足しておくのがおすすめです。 普通の単語は単語単位で折り、収まらない長いURLや単語だけを途中で折るので、英文の読みやすさを保ったまま、はみ出しをなくせます。

overflow-wrap: anywhere と break-word は折り返しの見た目は同じですが、anywhere は要素の最小幅（min-content）の計算でも途中で折れる前提になるため、flex や grid の中で幅が縮みやすくなります。カードの中のテキストなら anywhere が扱いやすいです。

.clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere; /* URL や長い英単語を枠内で折る */
}

1行省略と英文の「…」の位置

1行省略（white-space: nowrap）では折り返しが起きないので、overflow-wrap は効きません。「…」の位置は幅で決まり、単語の途中に来ることもあります。 1行省略で長いURLを含む文を扱う場合は、URL部分を別要素に分けるなど、文の組み立てで調整します。

アクセシビリティ：省略された全文の扱い

CSS の省略は見た目だけの処理で、DOM には全文が残っています。 そのため、スクリーンリーダー（画面読み上げソフト）は省略された部分も含めて全文を読み上げます。検索エンジンも全文をテキストとして取得できます。

方法 見える人 読み上げ キーボード操作 おすすめ度
CSS の line-clamp だけ 3行まで 全文 ― 一覧のプレビューなら十分
＋ title 属性 マウスを乗せると全文 全文（読み上げソフトによっては二重） 届かない 補助として
＋「もっと見る」ボタン ボタンで全文 全文＋開閉状態 Tab で届く 全文を読ませたいときに
JS で文字数を切って「…」を足す 指定文字数まで 切った後の文だけ ― 全文が DOM から消えるので注意

見えている人にも全文を読める手段を用意すると、誰にとっても使いやすくなります。 title 属性はマウスを乗せたときにしか表示されず、タッチ操作やキーボード操作では見られないため、大切な情報は「もっと見る」ボタンか、詳細ページへのリンクで全文を読めるようにします。

ボタンには aria-expanded（開いているかどうか）と aria-controls（どの要素を開くか）を付けると、読み上げソフトに状態が伝わります。上の完成コードではこの2つを入れています。

また、カード全体がリンクで、本文が省略されている場合は、リンク先で全文が読めることが伝わる見出しにしておくと迷いません。

よくある質問

Q. -webkit-line-clamp はいずれ使えなくなりますか？ A. MDN では、接頭辞付きの3つのプロパティを組み合わせる挙動は仕様として定義されており、今後もサポートが続くと説明されています。標準の line-clamp は2026年10月時点で対応ブラウザが限られているため、-webkit-line-clamp を主に使い、line-clamp を併記する書き方がおすすめです。

Q. 2行省略と3行省略をレスポンシブで切り替えられますか？ A. できます。-webkit-line-clamp の値だけをメディアクエリやコンテナクエリで変えます。CSS変数 --lines を使うと @media (min-width: 768px) { .card__body { --lines: 4; } } のように1行で切り替えられます。

Q. 「…」の代わりに「続きを読む」などの文字を末尾に出せますか？ A. 標準の line-clamp には末尾の文字列を指定する構文（例：line-clamp: 3 "…続き";）がありますが、対応ブラウザが限られます。現時点では、省略は -webkit-line-clamp で行い、「もっと見る」ボタンを文の下に置く方法が確実です。

Q. 省略されているかどうかで CSS だけでスタイルを変えられますか？ A. CSS だけで「省略が起きているか」を判定するセレクタはありません。この記事の完成コードのように、JavaScript で scrollHeight > clientHeight を判定してクラスや属性を付ける方法を使います。

まとめ

  • 1行省略は overflow: hidden・text-overflow: ellipsis・white-space: nowrap の3点セット
  • 複数行省略は display: -webkit-box・-webkit-box-orient: vertical・-webkit-line-clamp・overflow: hidden の4点セット。標準 line-clamp は併記にとどめる
  • 下 padding があると次の行が見えるので、余白は外側、省略は内側の要素に分ける
  • flex / grid の中では min-width: 0、table では table-layout: fixed で省略が効くようになる
  • URLや長い英単語には overflow-wrap: anywhere を組み合わせる
  • 「もっと見る」ボタンは scrollHeight > clientHeight で省略中だけ表示し、aria-expanded で状態を伝える

本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。

（記載例）出典：株式会社RJC「CSS複数行省略｜line-clampが効かない原因と完成コード」

株式会社RJCでは、CSSの細かな挙動を確かめる方法を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。

WE ARE HIRING

RJCで一緒に開発しながら、
成長を楽しみませんか？

RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください！

  • 127日年間休日
  • 12時間平均残業時間
  • 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ！

ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨（休暇 or 金一封）、11期連続の黒字決算。

ABOUT RJC RJCがどんな会社か知る 考え方、研修、働き方、福利厚生、社員の前職まで。RJCのことが丸わかり！ RJC丸わかりページへ JOB DESCRIPTION 仕事内容・待遇を見てみる 仕事内容、給与・待遇、選考の流れ。経験者も未経験も！応募前に知りたいこと、まとめました！ 募集要項を見る ENTRY エントリーする エントリーは1〜2分・履歴書不要です。まずは話を聞いてみたい、という方でも歓迎です！ エントリーフォームへ

関連記事

CSS focusとfocus-visibleの違い outlineの代替

CSS focusとfocus-visibleの違い outlineの代替

2026.10.04
  • CSS
RJC Techチーム
CSS cursor一覧とpointer-events:noneでクリック無効

CSS cursor一覧とpointer-events:noneでクリック無効

2026.10.04
  • CSS
RJC Techチーム
CSS縦書きwriting-modeの使い方｜数字・英字の縦中横まで

CSS縦書きwriting-modeの使い方｜数字・英字の縦中横まで

2026.10.04
  • CSS
RJC Techチーム
ニュース・ブログ⼀覧ページへ

RJCで一緒に開発しながら、 成長を楽しみませんか？

プロジェクトに成功を、
未来につなげる成長を。

システム開発のパートナーをお探しの企業様、
是非お気軽にお問い合わせください。

お問い合わせはこちら