What's New Qiita

20201021のCSSに関する記事は10件です。

  • 投稿日：2020-10-21T23:26:27+09:00

書字方向を分離するbdiタグについて

HTMLの<bdi>タグは、書字方向（文字が表示される方向）を周囲から切り離したいときに使います。の中に右から左へと進む言語が入っていたとしても、周囲のテキストの方向には影響を与えません。

使いどころ：どんな言語が入るか分からないテキストに

<bdi>は、アラビア語やヘブライ語のように、右から左へと表示される言語がふくまれる可能性がある部分に使います。たとえば、投稿サービスの「名前」欄には、もしかするとアラビア語が入力されるかもしれません。

アラビア語のような書字方向が逆の言語が含まれると、その周囲の書字方向まで変わってしまいます。

bdi内のテキストは、周囲に影響を与えない＆受けない

<bdi>内のテキストの書字方向は、周りのテキストに影響を与えないだけでなく、周りからの影響も受けません。

ブラウザは内のテキストから自動的に表示する書字方向を決めます。<bdi>アラビア語</bdi>なら、自動でアラビア語の書字方向（右から左）に表示してくれます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T23:18:43+09:00

ユーザー認証の導入

ユーザー認証の導入

Basic認証

HTTP通信の規格に備え付けられている、ユーザー認証の仕組みのこと
d5d42271f315066cae86af0e91d3b5cc.png

RailsアプリケーションにBasic認証を導入

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :basic_auth
  (省略)

  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == 'admin' && password == '1111'
    end
  end
end

開発環境の環境変数に、ユーザー名とパスワードを設定

macOSがCatalina以降

ターミナル
% vim ~/.zshrc

# .zshrcを開いたら、「i」とタイプしてインサートモードに移行

# .zshrcの内部に次の記述を追加
export BASIC_AUTH_USER='admin'
export BASIC_AUTH_PASSWORD='2222'
# 記述を追加したら、escキーを押してインサートモードを抜け、 「:wq」と入力して保存して終了する

# .zshrcを再読み込みし、定義した環境変数を有効にする
% source ~/.zshrc

macOSがMojave以前の方

ターミナル
$ vim ~/.bash_profile

# .bash_profileを開いたら、「i」とタイプしてインサートモードに移行

# .bash_profileの内部に次の記述を追加
export BASIC_AUTH_USER='admin'
export BASIC_AUTH_PASSWORD='2222'
# 記述を追加したら、escキーを押してインサートモードを抜け、 「:wq」と入力して保存して終了する

# .bash_profileを再読み込みし、定義した環境変数を有効にする
$ source ~/.bash_profile
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T23:06:31+09:00

Webエンジニアになるにあたっての学習方法

【対象者】

これからWebエンジニアやってみようかなって人

【まえがき】

初めまして、Webエンジニアになって早６年目。
Qiitaは読む専門だったのですが、ありがたいことに１年半ほど前からオンラインスクールの講師をやらせてもらってます。
その中で、「自分もそうだったなぁ」と感じることが多く、自分の今の目の前の方だけではなく
今もどこかで、独学で悩んでいるエンジニアの方の助けになればと思い、記述をしてみようと思った次第です。
これはあくまで私の主観ですので、先輩エンジニアの方やスーパーエンジニアの方は、
またそこら辺のエンジニアがなんか言ってるわ、と見逃すか、暖かい心でコメントください。

【経歴と自己紹介】

本業は、SES。
「エンジニアになりたいけど誰も未経験なんて雇ってくれないわ、よし！一人でやろう」
で、フリーランスで３年実務経験（笑）を積んだ後に、会社員として３年目、現在に至ります。
使用言語は今はPythonでApi作ったり、解析やったりしてます。
元々はPHPでWebサービスばっかり作ってました。
言語にこだわりは持たないタイプ。器用貧乏。Mr.中途半端。

【先に結論（忙しい人向け）】

全部は覚えなくていいんだよ。
正解はないよ、ルールはあるけど。

【本編】

開発は覚えることが多いです

他の方も言われてるかと思いますが、まずは暗記することをやめてください。
もちろん覚えるのであれば覚えてもらっても構わないですが、効率がものすごく悪いです。

HTMLから学習をしはじめたとして、HTMLタグ109個全てを覚える必要はないということです。
ここで誤解しないで欲しいのは、知識としては「こういうタグがあるんだーへー」と何回かは目を通してください。
あとは、自分でサイト制作を数こなしていくうちによく使うタグであったり書き方を確立すべきです。

初めて作る料理をまずは、レシピ通りに作ってそれから繰り返しやっていく中で自分の味付けを確立するのと感覚は似てると思います。

ここで大事なのは、
書き方を覚える必要はないのです。やり方を覚えてください。

HTMLをかくときはまず、

1.HTML宣言が必要
2.必要に応じてmetaタグを書く
3.CSSを読み込む
4.bodyタグの中に書く
5.header main footerで大きく分けて全体を詰めていく。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample</title>
</head>
<body>
    <header>
        <!--ナビゲーションとかロゴとか-->
    </header>

    <main>
        <!--ここにメインの内容を持ってくる-->
        <section>
            <!--必要に応じてSectionなどで小分け-->
        </section>
    </main>

    <footer>
        <!--著作権表示のコピーライトとかサイトリンクとか-->
    </footer>

</body>
</html>

これさえ覚えてればあとは、「このタグどうやって書くんだっけ」となっても自分のやりたいことを調べれば大丈夫です。

HTMLを学習したいのであれば、おすすめはある程度タグの理解が深まった段階で、ダミーサイトもしくはコピーサイトを作成してみることです。
ただ、コピーサイトについてはサイト公開は必ずしないようにしてください。

フロントコーディングで一番難しいのは書き方に正解がないということ。
ただ正解がないからってめちゃくちゃにやっていいというわけではないので
せめてもの基礎的なコーディングルールぐらいは覚えるようにしてください。

  • idは重複NG
  • h1は１ページに一つまで
  • Class名はわかりやすく的確に
  • 鬼のdivコーディングをしない

...etc

料理で例えるなら、
ポテトサラダに玉ねぎ入れる派入れない派（私は入れる派）
焼き鳥はタレ派塩派（私は塩派）

時にはコーディングに関する暗黙のルールの当たり前をぶつけられる時だってあります。
そんなときは、よっぽど変な事じゃなければ、なるべくそれに従うようにしてもらえれば良いのかなと思っています。

そんな衝突をなくすために様々な記法なども存在するので目を通してもらえれば良いと思います。

【PHPとかバックエンド側の場合】

バックエンドプログラミング（ここではPHP）の場合も考え方は同じです。

Progateさんや、ドットインストールさんなどでとりあえず基礎は学んだけど、アプリの作り方がわからないって方多いと思います。
私もそうでしたし、めちゃくちゃ困りました。

TODOアプリを作成する例でご説明していきます。
POST（登録・更新）、GET（検索）、ログイン制御、SQLでのCRUDがあるのでこれできたら正直PHPはできたと言っても過言でh...

プログラム抜きでまずはHTMLと同様に全体を考えて固めます。

今回必要な機能（最低限）

  • 予定、開始日時、終了日時を入力・登録できる。
  • 登録したら予定が一覧で確認できる。

大枠を細分化と流れを構築する

ここは若干、経験が入ってきますが気合で慣れてください。

  • 予定、開始日時、終了日時を入力・登録できる

    • 1. 予定、開始日時、終了日時を入力できるようにHTMLを組む
    • 2. ボタンを押されたら、送信された内容を受け取る
    • 3. 受け取った値がプログラムが欲しい値か検証する
    • 4. 問題なければ、DBに登録する
    • 5. 結果を返す（成功・失敗）

  • 登録したら予定が一覧で確認できる。

    • 1. 登録された内容を表示するためのHTMLを組む
    • 2. 登録されているデータをDBから取得する
    • 3. 取得した結果を表示する
<?php


// 毎回POSTがあるか確認するのが面倒なので処理をまとめておきます。
function post($key) {
    // 指定した値を受け取れなかった時
    if (empty($_POST[$key])) {
        //NULLを返却してエラーを回避
        return NULL;
    }

    //ユーザから受け取った値をサニタイズ化して返却
    return htmlspecialchars($_POST[$key]);
}

// 毎回設定書くのはめんどくさいので接続処理はまとめときます。
function pdo() {

    // DB接続設定
    $dbh = "mysql:host=localhost;dbname=todo;charset=utf8";
    $user = "hoge";
    $pass = "hoge";

    $pdo = new PDO($dbh,$user,$pass);

    return $pdo;
}

// データ登録処理
function insert($data) {
    try {

        // 設定の呼び出し
        $pdo = pdo();

        // ダメだったらエラー
        if ( ! $pdo) {
            throw new Exception("DB接続エラー");
        }

        // SQLの処理を書く
        $sql = <<<QUERY
INSERT INTO
todo(
start_at,
end_at,
schedule,
) VALUES(
:start_at,
:end_at,
:schedule
)
QUERY;

        // SQLの準備
        $stmt = $pdo -> prepare($sql);

        // プリペアードステートメントを使用してプレースホルダーと実際の値の紐付け
        foreach($data as $key => $val) {
            $stmt -> bindValue($key,$val,PDO::PARAM_STR);
        }

        // SQL実行
        $result = $stmt -> execute();

        // データ登録失敗（ここは書いても書かなくても好みだと思います。）
        if ( ! $result) {
            throw new Exception("データ登録失敗");
        }

        // 値の返却
        return $result;

    } catch (PDOException $e) {
        exit($e -> getMessage());
    }

}

// 値のあるなし検証
function check_val($val) {
    if (empty($val)) {
        return FALSE;
    } 

    return FALSE;
}

/* ==========ここからTODOのデータ追加処理========== */

// 値の受け取り

// キーを:つきにしているのは、bindValueで紐付けを楽にするため。
$data = array(
    ":start_at" => post("start_at"),
    ":end_at"   => post("end_at"),
    ":schedule" => post("schedule")    
);

// 全部必須項目にするとして値があるかどうかは検証しておく。 
foreach ($data as $val) {
    //　値がなければ入力メッセージを作る
    if ( ! check_val($val)) {
        $error = "値を入力してください。";
        break;
    }
}

// errorがあればデータを追加せずにエラーを表示
if ( ! empty($error)) {
    echo $error;
    exit();
}


$result = insert($data);

echo "値を追加しました。";
exit;

細かいところは省きましたがおおよそこんな感じです。
あとはそれぞれの書き方を調べながら組んでいけばOKです。
MVCも使わずにユーザ定義関数だけでまとめてるので、読みやすいかと思います。

小さく作って大きく育てる

そんな意識を持ってもらえればきっと知らず知らずのうちにプログラムの流れを掴めるようになると思います。

さいごに

プログラミングの世界って明確な答えが最初はなくて難しいと思います。
たどり着きたいゴールはみんな同じでもやり方は十人十色
基礎ある程度やったよって人はまずはミニマムアプリケーションを作成してみると良いかと思います。
これからは、HTML ~ PHPまでこれやっとけみたいなやつ書くようにしていきます。

この投稿がいつか誰かの気持ちを軽くできることを願っています。
最後まで、読んでいただきありがとうございました！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T20:42:32+09:00

【作ってみた】CSSだけで、右から左に流れる文字。簡単作成ツールも紹介！

どうも7noteです。CSSで流れる文字の作り方。

きれいな液晶パネルが増えてきたので、電光掲示板のようなものは少し減ってきたのかな？と思いますが、電光掲示板にあるような右から左に流れる文字をCSSで再現する方法です。

こんなやつ

sample.gif

ソース

index.html
<div class="text">
<p>次は〜〇〇駅 次は〜〇〇駅 開く扉にご注意ください。</p>
</div>
style.css
.text {
  width : 300px;      /* 枠の大きさ */
  border: solid 1px; /* 枠線 */
  padding: 3px;        /* 枠線の内側の余白 */
  overflow : hidden; /* 枠からはみ出た部分を非表示 */
}
.text p{
  display : inline-block;  /* 必須 */
  padding-left: 100%;    /* 右端から文字をスタートさせるため */
  white-space : nowrap; /* 改行が起こらないように対策 */
  line-height : 1em;         /* 行間（高さ）を1文字分にする */
  animation : scroll 10s linear infinite; /* 下のアニメーションを10秒かけて行い、それをくりかえす */
}

/* アニメーション（右から左に移動） */
@keyframes scroll{
  0% { 
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100%)
  }
}

解説

以前作った「理容室の前にある赤と青のくるくるを作ってみた」と似たような処理をしています。

横に流すp要素の横幅が、「文字分 ＋ 幅100%」あるため、文章の左端から右端まですべて流れてから繰り返すようになっています。幅がこれより短いと、流れている途中でスタートに戻ってしまうので、最低でもこれだけの幅が必要になります。

あとはdiv要素の方に自由に装飾を入れたり、文字を電光掲示板風のフォント（あるか知らないですが。。。）に変えたりすることで本格的なものも作れるかもしれませんね。

自作しなくても、簡単に作成できるツールがある

こちらのサイトで簡単に作成できるようです。
https://webparts.cman.jp/string/scroll/

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T17:55:14+09:00

RailsにBootstrapを導入!!

RailsにBootstrapを導入する方法を説明致します。
手順は、とても簡単ですのでご参考にどうぞ！！
手順は、４つあります。

手順

1.Bootstrapのインストール
2.SCSSファイルの作成
3.JSファイルの修正
4.Rails（Puma）の再起動

1.Bootstrapをgemでインストール

RailsでBootstrapを使う場合は、gemを使ってインストールする方法が一般的です。
Bootstrapは内部でjQueryを利用しているので、こちらもあわせてインストールしましょう。
Gemfileに以下を追記して、bundle installを実行してみてください。

Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
ターミナル
% bundle install

2. SCSSファイルを作成

次に、application.cssをapplication.scssというファイル名に変更します。
これは、Bootstrapが「SCSS」という記法で書かれており、Railsでもあわせて利用するためです。
「SCSS」とは、CSSを拡張した記法のことで、いまのWeb業界では多く利用されている記法になります。
ここでは具体的な解説はしませんが、CSSの記述よりも見やすく、書きやすくなった記法だと思ってください。

ファイルの拡張子を変更
 変更前 app/assets/stylesheets/application.css 
 変更後 app/assets/stylesheets/application.scss

ファイル名を変更したら、実際にファイルを開いて下さい。
＊= require_tree .と＊= require_selfを削除し、
@import "bootstrap";を追記します。
追記したコードが、Bootstrapを読み込むための設定になります。

app/assets/stylesheets/application.scss
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .    ＜（削除）
 *= require_self      ＜（削除）
 */
@import "bootstrap";  ＜（追加）

3. JSファイルを修正

Bootstrapで使われる「JavaScript」や「jQuery」などの関連ファイルを読み込む設定をします。
app/assets/javascripts/application.jsを開き、以下を参考に元々あったコードの上に追記してください。

app/assets/javascripts/application.js
# 以下の３つを追記
//= require jquery3
//= require popper
//= require bootstrap

# 元々あったコード
//= require rails-ujs
//= require activestorage
//= require turbolinks

4. Rails（Puma）を再起動

ここで一度、ブラウザからアクセスしてみてください。
もし、この段階でエラーが表示されているのであれば、Rails（Puma）を再起動します。
それでもエラーが変わらない場合は、「node.js」のバージョンが古い可能性があります。
DockerでRailsを構築した方は、Dockerfileが以下のような設定になっているかを確認してください。

Dockerfile
# Railsに必要なパッケージをインストール
RUN apt-get update -qq && apt-get install -y nodejs
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
    && apt-get install -y nodejs

# 以下の公式サイトの記述では、node.jsのバージョンが低くてbootstrapが使えない
# RUN apt-get update -qq && apt-get install -y nodejs

まとめ

導入手順は難しいと思うかもしれませんが、この説明した手順の通りに記述を削除したり、
書き換えたりするだけですので意外と簡単です。
是非試してみて下さい！！

以上。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T17:14:32+09:00

【HTML/CSS基礎】インライン要素とブロック要素/widthとheight　

まずインライン要素とブロック要素と聞いて何を思い浮かべます？

僕>>width/heightが決めれたり、
横いっぱい伸びたり、隣に並んでくれたりする要素？値？でしょ！

びっくりするくらいざっくりとでしか覚えてません。。
その都度、ネットで調べて適宜対応しています。

しかし！！！

もう頭の中に入れて、調べたくない、、、
調べる時間がもったいない、、、
そんな気がするので、備忘録として残します。

アウトプットまでがインプット！！！

目次

①インライン要素とブロック要素

  • ①-1 それぞれの値の特徴
  • ①-2 細かいところ

②widthとheight

  • ②-1 width/height: auto;
  • ②-2 auto と 100%の違い

③width指定ではみ出る

  • ③-1h widthではみ出るの回避

④番外編　画面縮小時に、flexboxで指定した要素が縮小しないのを解決

①-1 それぞれの値の特徴

1) block
- p, div, ul, h1~h6タグの初期値
- 要素が横いっぱいにまで広がり、縦に並んでく(前後に改行)
- 高さ・幅・余白指定　可能！
- text-align/vertical-align　不可能！

2) inline
- a, span, imgの初期値
- 要素が横に並んでいく
- 幅・高さは文字の大きさで決まる
- 上下のmarginは指定できない
- text-align(親要素)/vertical-align　可能！
**リンクタグの幅を指定したいときは、
inline-block要素 か block要素を指定してあげる

3) inline-block
- displayで指定！！
- 横に並びつつ、少し距離をとる
- 高さ・幅・余白指定　可能！
- text-align(親要素)/vertical-align　可能！

4) none
→無視！！

①-2 細かいところ
  • inline要素の中にblock要素は入ることはない
②-1 width/height: auto;
  • block要素の場合　 →何もしないと、横いっぱいに広がる
  • inline/inline-block要素の場合 →要素の幅＝要素の中身（テキスト） 100%で指定することで、横いっぱいに広がる。
②-2 auto と 100%の違い

  • autoの場合
    → widthの中にpadding/border　
    　が含まれる

  • 100%の場合
    → widthの中にpadding/border
    　が含まれない
    　余白をつけた分だけ、親要素からはみ出でしまう

③-1h widthではみ出るの回避
  • 入れ子にする →外側の要素を100%にしてあげて包む
  • calc()関数を使う →maring: 0; border: 2px; padding: 2px;の場合 左右のはみ出し合計は8px なので、その分を引いてあげる width: calc(100% - 8px）；
  • box-sizingを利用 →box-sizing: border-box;を指定することで、 padding/borderまでwidthの指定範囲が広がる。

④番外編　画面縮小時に、flexboxで指定した要素が縮小しないのを解決

  • widht/heightを指定してあげる。

長文・乱文失礼します?‍♂️

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T15:52:52+09:00

BEM(Block Element Modifier)とは

HTMLのクラス名を好き勝手書いてしまうと、共同での開発で修正しづらいという問題が起きてしまいます。

そこで、後から改修しやすい設計にする手法の一つであるBEMについて解説していきます。

BEMとは

Block, Element, Modifierの頭文字をとってBEMという名前になっています。

BEMの書き方

Block, Elementはアンダースコア二つでつなぎます。
Element, Modifierはハイフン二つでつなぎます。

例:

qiita.css
/*Block*/
.list

/*Block, Element*/
.list__item

/*Block, Element, Modifier*/
.list__item--second

...少し慣れは必要そうです！

Block, Element, Modifierの違いについて

Block: ナビゲーションだとフォームなどの部品やヘッダー、フッターなどの大きなセクションのこと

Element: その部品を構成するための中身のこと

Modifier: 同じブロックではあるけれど、他とは状態や見た目が異なる場合に用いる。（例えば、クリックできるボタン、クリックできないボタンで他と異なるクラス名をつけるような時、Modifierを記述する。）

BEMのルール

Modifierがあるクラス名とないクラス名は両方記述します。
→CSSの記述が長くなり、修正しづらくなることを防ぐため。

単語はハイフン一つをつなげて記述します。(size-bigなど)

Sassを使うと便利！

無駄な記述を無くすことができます。

qiita.sass
.block {
 &__element {
  &--modifier {

  }
 }
 &__element-2 {
  &--modifier {

  }
 }
}

最後に

ルールを定めることで誰が見てもわかりやすくなることは、パフォーマンスの向上にもつながり大変便利だと感じました。
今後、意識していきたいと思っています。

最後まで記事を読んでいただきありがとうございます。今後もフロントエンドをメインにアウトプットをしていきたいと思っているのでよろしくお願い致します。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T13:59:58+09:00

ドットインストールEmment CSS編

Emmetチートシート
https://docs.emmet.io/cheat-sheet/

ドットインストールEmmet
https://dotinstall.com/lessons/basic_emmet_v3/50301

08 margin,paddingを展開してみよう
09 CSSのプロパティを展開してみよう

08margin,paddingを展開してみよう

m

margin: ;

p

padding: ;

m10

 margin: 10px;

m10p

margin: 10%;

m10r

margin: 10rem;

m10p20p

margin: 10% 20%;

m10-20-30

 margin: 10px 20px 30px;

mb10

margin-bottom: 10px;

09CSSのプロパティを展開してみよう

適当な文字列でもOK

予測変換のように出てくれる

    font-size:20px ;
    cursor: ;
    font-weight: ;
    position: absolute;
    position: relative;
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T01:43:56+09:00

リンクを押したときに青から紫ではなく、別の色に変える方法

はじめに

結論：疑似クラスで解決できる

疑似クラスとは

疑似クラスとは、指定の要素が特定の状態である場合にスタイルを適用させるセレクタ。
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！

解決方法

リンクの状態によって解決方法は2種類。

  • 既にリンク先に訪問したことがある状態　⇒　:visited疑似クラス
  • リンク上にフォーカスがある状態　　　　⇒　:focus疑似クラス 
既にリンク先に訪問したことがある状態
a:visited {
  color: red;
}

リンク上にフォーカスがある状態
a:focus {
   color: yellow;
}

※「visited」⇒「focus」の順番で指定しないと、「focus」が効きません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T00:09:21+09:00

CSS Containmentとcontent-visibilityによるパフォーマンス改善

概要

Chrome85にて実装されたcontent-visibilityプロパティーと、それに関連するCSS Containmentという仕様について調べたメモです.

間違い等ありましたらご指摘いただけると幸いです.

Browser Support

  • Chrome 85 ~
  • Edge 85 ~

CSS Containment

CSS Containmentとは、描画の改善を目的に、UserAgentに対象のDOMが、他のDOMに影響を与えない事を伝え、レンダリングの最適化を行うための仕様.

仮想DOMのように差分の更新およびレンダリングによる最適化のようなイメージ.
(Containment = 封じ込め の意味から推測できる.)

また、後述のcontent-visibilityプロパティーを使うことで、viewportに含まれたらレンダリングするLazyLoad的な方法での最適化もできる.

CSS Containmentには4つのタイプが存在し、containプロパティーを通してそれらを指定する.

Size Containment

  • 子要素の大きさに依らず、そのサイズが分かっている際は、contain: size;を指定することで、その子要素のサイズの計算等を省略することができる.
  • contain: sizeを指定して、大きさを指定しなかった場合は0px x 0pxで表示される.
  • パフォーマンスにはあまり寄与しない.

Layout Containment (効果大)

  • レイアウトの封じ込め.
  • 子要素によって他の要素のレイアウトに変更を与えないことが事前にわかっている場合は、content: layout;を指定することで、レイアウト計算を省略できる.

Style Containment

  • 子要素内のスタイルの変更が、他の要素にも影響しないことを保証する.
  • CSSのカウンターなどは、他の要素に影響を及ぼす例.

Paint Containment (効果大)

  • 描画の封じ込め.
  • 子要素が、指定された要素の領域外に表示されない場合、描画処理を省略できる.
  • positionにabsoluteやfixedを指定された要素のような挙動を取る.
    • 親の要素と同じようには配置されない.
  • スタッキングコンテキストになる.
  • フォーマティングコンテキストになる.
    • 独立したレイアウト環境として扱われる.

contain

containは上4つのContainmentを複数指定することができる.

contain: paint layout;

contain: content;
// contain: layout style paint;と同じ

contain: strict;
// contain: layout style paint size;と同じ

content-visibility

content-visibilityはcontainでやっていたヒューリスティックな作業を、ブラウザ側で自動で識別して改善してくれる.
content-visibilityが指定された要素が完全にviewportに表示されていない(Off-screen状態)ならレイアウト計算を省略し、要素がviewportに含まれた時点で、描画を始める.

content-visibility: hidden;

content-visibility: auto;とは違い、Viewportに含まれても自動で描画してくれなくなる.

display: noneは通常の描画と同じくらいの描画コストがかかる.

visibility: hiddenは表示されないが、完全に要素が消えているわけではなくクリックも可能な状態. また子要素の変更に対して、表示しないにも関わらず描画処理が走る.

content-visibility: hiddenだと、レンダリング状態は保持しつつ、visibleになったときのみ描画処理が走る.

contain-intrinsic-size

Size Containmentのheightをここで指定する.
Off-screen時で描画が省略されている場合は通常そのheightがわからないが、ここで指定することで描画しなくても、スクロールバーが正しく表示される.

まとめ

content-visibility: auto;
contain-intrisic-size: px;

この組み合わせを上手く活用することで、大幅なパフォーマンス改善できることでしょう！（ただしChromium系に限る...）

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧