---
title: "【プロジェクト画面】2-3.(補足)CSS編集"
description: "概要 CSS編集では、適用範囲を選択した（適用ページ・適用言語）上で、多言語化ページに対してCSSを自由に適用させることが可能です。 CSS編集画面の開き方 プレビュー編集画面から編集モーダルを開き、CSSタブを選択 プレビュー画面 【…"
url: "https://docs.autolingual.io/help/dashboard/aabe9118"
category: "管理画面の使い方"
lang: "ja"
updated: "2026-09-16T14:30:00.000Z"
---

# 【プロジェクト画面】2-3.(補足)CSS編集

### 概要

CSS編集では、適用範囲を選択した（適用ページ・適用言語）上で、多言語化ページに対してCSSを自由に適用させることが可能です。

### CSS編集画面の開き方

- プレビュー編集画面から編集モーダルを開き、CSSタブを選択

  - プレビュー画面

    ![](https://docs.autolingual.io/generated-assets/59a58d112f49.png)
  - [【プロジェクト画面】2-3-1.プレビュー / 編集](https://docs.autolingual.io/help/dashboard/8e6f0527)
- ライブプレビュー画面から編集モーダルを開き、CSSタブを選択

  - [【プロジェクト画面】2-3-2.ライブモード（ライブプレビュー/ライブ編集機能）](https://docs.autolingual.io/help/dashboard/a5f7229a)

### CSS編集機能の利用方法

- CSS編集画面

  - CSS編集画面にて任意のCSSコードを入力していただき、『公開』ボタンを押下すると、対象範囲に当該のCSSコードが適用されるようになります。

    ![](https://docs.autolingual.io/generated-assets/0cbd1c40bac6.png)
- 適用範囲の選択

  - 適用ページ

    - 特定のページもしくは全ページを選択することが可能です。
    - 特定のページを選択した場合は、編集画面で開いているディレクトリに対してのみCSSが適用されます。
  - 適用言語

    - 特定の言語もしくは全言語を選択することが可能です。

### CSSに関する技術詳細

- CSS編集の仕組み

  - 他言語ページにおいて、新しい`<style>`タグが追加されそのタグ内にAutolingual管理画面で指定するCSSが設定される形になります。既存のCSS自体は存在し続けますが、新たに設定いただくCSSとの影響度合いについては考慮していただく必要があります。
- 複数のCSSが存在した場合の優先順位

  - 全ページかつ全ての言語
  - 全ページかつ特定の言語
  - 特定のページかつ全ての言語
  - 特定のページかつ特定の言語