Web 標準は一連の標準で構成されます。Web ページは主に、構造層、プレゼンテーション層、動作層の 3 つの部分で構成されます。

対応する規格も次の 3 つの側面に分かれています。

構造化標準言語には主に XHTML、HTML、XML が含まれますが、

プレゼンテーション層の標準言語には主にCSSが含まれますが、

動作基準には主にオブジェクトモデル、DOM、ECMAScriptなどが含まれます。

2.1 構造層の基準

構造化標準言語とはW3Cで規定されているもので、主にHTML、XHTML、XMLがあり、ページ本文に記述するタグはすべてページの構造を表すものです。

ラベルの書き込みは開始して終了する必要があります。単音を除く。

ブロックレベルの要素を p タグ内に配置することはできません。li には div タグを含めることができます。

ブロック要素は、ブロック要素およびインライン要素内に配置できます。特殊な p および h1 ～ h6 内にはブロック要素を配置しないでください。多くの li および div 要素を配置できます。これら 2 つのタグ自体がコンテナープロパティを持っているため、

ブロックではなく、インラインの中にインラインを入れます。(入れ子関係)

構造と性能の分離

命名は統一する必要がある

2.2 プレゼンテーション層の標準

パフォーマンス標準言語には主に CSS が含まれており、CSS スタイルシートを通じてページの構造タグをより美しくすることができます。

分離の目的を達成するために、可能な限り外部導入手段を使用する

CSSセレクター、優先度

簡単なコード

2.3 行動層の標準

ページとユーザーには一定の相互作用があり、同時にページの構造やパフォーマンスが変化します。標準では主にオブジェクトモデル (W3C DOM など) と ECMAScript が含まれており、これら 3 つの部分を分離する必要があります。

DOMはDocument Object Modelの略称です。

ECMAScript は、ECMA (欧州コンピュータ製造者協会) によって開発された標準スクリプト言語 (JAVAScript) です。

3. W3C について何を知っていますか?

W3C (World Wide Web) は、Web 標準、つまり実際のプログラミングにおけるコード仕様の標準化された要件を提唱しています。

主に以下の点が含まれます。

3.1 構造の要件

1) ラベルの文字は小文字である必要があります

2) ラベルは閉じている必要があります

3) タグを任意にネストすることはできません

3.2 css と js の要件

1) 外部の CSS スタイルシートと JS スクリプトを使用してみます。構造、性能、動作の3つに分けて仕様を遵守します。同時に、ページのレンダリング速度が向上し、ユーザーエクスペリエンスが向上します。

2) 構造とパフォーマンスを分離するために、スタイル内で使用するインターラインスタイルシートをできる限り少なくします。ID やクラスなどのタグ属性の命名は、明確で意味のあるものでなければなりません。タグが少ないほど、読み込みが速くなり、ユーザーエクスペリエンスが向上します。コードのメンテナンスが簡単で便利な改訂版です。

３）ページ内容を変更する必要がなく、内容をコピーすることなく印刷版を提供できるため、Webサイトの利便性が向上します。

4. フロントエンドセマンティクスとは何ですか?

意味化とは、コンテンツを機械が読み取れるようにすることです。Web ページの解析は検索エンジンによって実行され、機械によって解析されます。

4.1 タグはセマンティックである

h1 ～ h6、thead、ul、ol などの初期のセマンティックタグ: プログラマは、HTML タグの id 属性と class 属性を使用して、フッター HTML に id="footer" または "footer" を追加するなど、HTML タグをさらに記述します。 class="footer" の属性 (値) (宣言が必要なセマンティック変数とクラス、ID を使用)

4.2 HTML5 セマンティックタグ

ヘッダー/フッター、セクション (章、ヘッダー、フッター)/記事 (コンテンツ領域)、ナビゲーションナビゲーション、重要でないコンテンツは脇に置く、em(強調)/強力な強調、i(アイコン) アイコンの作成

5. HTML5 の新しいコンテンツは何ですか?

新しいブロックタグ: セクション、記事、ナビゲーション、脇

フォームの強化: 日付、時刻、検索 (型の実装を変更)、フォームの検証、プレースホルダー

セマンティック強化: ヘッダー/フッター、セクション/記事、ナビゲーションナビゲーション、重要でないコンテンツを脇に置く、em(強調)/強力な強化、i(アイコン) アイコンの作成

6. HTML要素の分類?

ブロックレベルの要素ブロック (正方形、行全体を占める): div ul ol li dl dt dd h1 h2 h3 h4…p

インライン要素インライン (行内の特定の位置): ab span img input select Strong (強調トーン)

inline-block (インライン、幅と高さの属性付き): 選択

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

ブロックレベル要素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空の要素: br、meta、hr、link、input、img

7.HTMLの入れ子関係?

ブロックレベルの要素にはインライン要素を含めることができます

ブロックレベルの要素にはブロックレベルの要素を含めることはできません（p タグには div タグを含めることはできません）

インライン要素には「通常」ブロックレベルの要素を含めることはできません（div を含むことは問題ありません）

8.HTMLのデフォルトのスタイルは何ですか?

デフォルトスタイルの意味
デフォルトのスタイルプロキシの問題
CSSリセットの役割

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

css

1. 標準 CSS ボックスモデルを導入しますか? IE の下位バージョンのボックスモデルとの違いは何ですか?

標準ボックスモデル: 幅 = コンテンツ幅 (コンテンツ) + ボーダー + パディング + マージン
低バージョン IE ボックスモデル: 幅 = コンテンツ幅 (コンテンツ + ボーダー + パディング) + マージン

2.box-sizing 属性?

要素のボックスモデルを制御するために使用される解析モード。デフォルトは content-box です。context
-box: W3C の標準ボックスモデル。要素の高さ/幅属性の設定は、コンテンツ部分の高さ/幅を参照します
。 -box: IE従来のボックスモデル。要素の高さ/幅属性の設定は、ボーダー + パディング + コンテンツ部分の高さ/幅を指します。

3.CSSセレクターとは何ですか? どのようなプロパティを継承できますか?

CSS セレクター: ID セレクター (#myid)、クラスセレクター (.myclassname)、タグセレクター (div、h1、p)、隣接セレクター (h1 + p)、サブセレクター (ul > li)、子孫セレクター (li a) 、ワイルドカードセレクター (*)、属性セレクター (a[rel="external"])、疑似クラスセレクター (a:hover、li:nth-child) 継承可能な属性: font -size、font-family、継承不可能
な
colorスタイル: ボーダー、パディング、マージン、幅、高さ
優先順位 (近接原則): ! important > [ id > class > tag ]
! important はインラインよりも優先されます。

4. CSS3 の新しい疑似クラスとは何ですか?

p:first-of-type は、その親要素に属する最初の要素を選択します。
p:last-of-type は、その親要素に属する最後の要素を選択します。
p:only-of-type は、その親に属する唯一の要素を選択します。 element
p:only-child は、その親要素に属する唯一の子要素を選択します。
p:nth-child(2) は、その親要素に属する 2 番目の子要素を選択します
。 :enabled:disabled フォームコントロールの無効な状態。
:checked ラジオボタンまたはチェックボックスがチェックされます。

5. div を垂直方向に中央揃えするにはどうすればよいですか?

最初

div の絶対配置は水平方向と垂直方向の中心に配置されます [margin:auto は絶対配置要素の中心配置を実現します]、

互換性: IE7 以前のバージョンはサポートされていません
div{
      width: 200px;
      height: 200px;
      background: green;
      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
2番目のタイプ

div の水平方向と垂直方向の中央に絶対配置 [マージンの負の間隔]

これはおそらく現在最も一般的な使用方法です。
div{
        width:200px;
        height: 200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }
3番目の種類

div の絶対位置を水平方向と垂直方向の中央に配置 [変形を変形]

互換性: IE8 はサポートしていません。
div{
        width: 200px;
        height: 200px;
        background: green;
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }
第四種

CSS可変幅、水平レベル、垂直センタリング
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
     
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">zzt</div>
  </div>
</body>
</html>
5番目のタイプ

親ボックスを table-cell 要素に設定し、text-align:center とvertical-align:middle を使用して水平および垂直の中央揃えを実現します。より完璧な解決策は、3 層構造を使用して親子構造をシミュレートすることです。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: blue;
      display: table-cell;
      vertical-align: middle;
      text-align: center;

    }

    .son {
      width: 200px;
      height: 200px;
      background-color: yellow;
      display: inline-block;

    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son">zzt</div>
  </div>
</body>

</html>
6種類目

        サブボックスの絶対位置を実装し、calc を使用して位置を計算します。

        親要素の設定: 位置: 相対。

        子要素の設定:position:absolute;
                              left:calc((500px - 200px)/2);
                              top:calc((120px - 50px)/2);
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对子盒子实现绝对定位，利用calc计算位置</title>
  <style>
    .father{
      width: 400px;
      height: 400px;
      background-color: blue;
     position: relative;
      
    }
    .son{
      width: 200px;
      height: 200px;
      background-color: yellow;
      position: absolute;
      top: calc((400px - 200px)/2);
      left: calc((400px - 200px)/2);
   
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son">zzt</div>
  </div>
</body>
</html>

6. CSS スプライトと総称されるスプライト (スプライト) の役割は何ですか?

1. ページに含まれるすべての画像を 1 つの大きな画像に含めます。
2. 背景の位置には、CSS のbackground-image、background-repeat、background-position の組み合わせを使用します。
3. Web ページの http リクエストを減らし、ページのパフォーマンスを向上させます;
4. CSS スプライトは画像のバイト数を減らすことができます。

7. 疑似クラスと疑似要素の違いは何ですか?

擬似要素は実際の要素です

前者はシングルコロン、後者はダブルコロンです

<style>
  li:first-child {
    height: 20px;
    width: 100px;
    background-color: #139aff;
  }

  li:last-child {
    height: 60px;
    width: 100px;
    background-color: #89ff56;
    line-height: 60px;
  }

  p:first-of-type {
    background-color: red;
  }

  p:last-of-type {
    background-color: deeppink;
  }


  /*每个p标签之前新增一个Hello文本*/
  .container p::before {
    content: 'Hello';
  }

  .container p::after {
    content: 'Thanks';
  }

  .container p::first-letter {
    font-size: 32px;
  }

  .container p::first-line {
    background-color: #f1ffad;
  }

  /*所有选中的元素会变色*/
  .container p::selection {
    background-color: #1025ff;
    color: red;
  }
</style>

<body>
  <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
  </ul>
  <div>
    <h1>h1文本</h1>
    <p>p文本1</p>
    <p>p文本2</p>
    <p>p文本3</p>
    <p>p文本4</p>
  </div>

  <div class="container">
    <p> css1 </p>
    <p> css2 </p>
    <p> css3 </p>
    <p>伪元素</p>
  </div>
</body>

</html>

8. 聖杯のレイアウト

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>实现三栏水平布局之圣杯布局</title>
  <style type="text/css">
    /*基本样式*/
    .left,
    .right,
    .main {
      min-height: 300px;
    }

    .left {
      width: 200px;
      background-color: thistle;
    }

    .main {
      background-color: #999;
    }

    .right {
      width: 300px;
      background-color: violet;
    }

    /* 圣杯布局关键代码 */
    .left,
    .main,
    .right {
      float: left;
      position: relative;
    }

    .main {
      width: 100%;
    }

    .container {
      padding-left: 200px;
      padding-right: 300px;
    }

    .left {
      margin-left: -100%;
      left: -200px;
    }

    .right {
      margin-left: -300px;
      right: -300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

</html>

9. 両翼レイアウト

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双飞翼布局</title>
    <style>
      .left,
      .right,
      .main {
        min-height: 200px;
      }
      .left {
        width: 200px;
        background-color: thistle;
      }
      .main {
        background: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 双飞翼布局重点 */
      .left,
      .main,
      .right {
        float: left;
      }
      .main {
        width: 100%;
      }
      .main-inner {
        margin-left: 200px;
        margin-right: 300px;
      }
      .left {
        margin-left: -100%;
      }
      .right {
        margin-left: -300px;
      }
    </style>
  </head>
  <body>
    <div class="main"><div class="main-inner">中心区</div></div>
    <div class="left">left</div>
    <div class="right">right</div>
  </body>
</html>

10. リー間のギャップを解消する

コードは以下のように表示されます
<style>
*{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    li{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;    
    }
</style>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
解決：

改行(IE1ピクセル残留物)を直接削除します。

親要素の font-size を 0 に設定し、子要素のフォントサイズをリセットします (以前のバージョンの Safari との互換性)

親要素は font-size: 0、letter-spacing: -3px に設定、子要素は font-size をリセット (推奨される解決策)

11.BFCとは何ですか? BFCをトリガーするにはどうすればよいですか?

BFCとは:

BFC (ブロックフォーマットコンテキスト)。これは、ブロックレベルボックスのレイアウトを制約する一連のレンダリングルールを備えた独立したブロックレベルレンダリング領域を指し、領域の外側とは何の関係もありません。

BFC をトリガーする方法:

float の値は none ではありません

オーバーフローの値は表示されません

表示の値は inline-block、table-cell、table-caption です

位置の値は絶対または固定です

12. フロートのクリア方法

フロートをクリアする方法https://blog.csdn.net/m0_63873004/article/details/123169197?spm=1001.2014.3001.5501

13.エムとレムの違いは何ですか?

rem 単位のピクセル値への変換は、html 要素のフォントサイズによって決まります。このフォントサイズは、特定の単位が明示的にオーバーライドされない限り、ブラウザのフォントサイズ設定の影響を受けます。

em 単位は、使用されるフォントサイズに応じてピクセル値に変換されます。このフォントサイズは、特定の単位で明示的にオーバーライドしない限り、親要素から継承されたフォントサイズによって制御されます。

14.CSSプリプロセッサとは何ですか? 一般的な CSS プリプロセッサは何ですか? 違いは何ですか? CSS プリプロセッサの長所と短所は何ですか?

1.CSSプリプロセッサとは何ですか?

特別なプログラミング言語を使用していくつかのプログラミング機能を CSS に追加し、CSS をターゲットとして使用してファイルを生成すると開発者はコーディング作業にこの言語を使用するだけで済み、CSS をより簡潔で適応性のあるものにすることができます。コードのメンテナンスとその他の多くの利点

2. 一般的な CSS プリプロセッサは何ですか?

サス

少ない

3.scssとlessの違いは何ですか?

コンパイル環境が異なります

変数の記号が異なり、Less は @、Scss は $ となり、変数のスコープも異なります。

出力設定。Less には出力設定がありません。Sass には 4 つの出力オプションがあります。

Sass は条件ステートメントをサポートしており、if{}else{}、for{} ループなどを使用できます。Less はサポートしていません。

外部CSSファイルを参照する

さまざまなツールライブラリ

4. CSS プリプロセッサの長所と短所は何ですか?

利点: コードの再利用と保守性が向上します。

短所: コンパイルプロセスが導入され、一定の学習コストがかかります。

15.表示の値は何ですか? 彼らの役割を説明してください?

インライン (デフォルト) - インライン

なし—非表示

ブロック - ブロック表示

テーブル - テーブルディスプレイ

リスト——アイテムリスト

inline-block - インラインブロック

16.ポジションの価値とは何ですか?

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

17. CSS3 の新機能は何ですか?

1、颜色：新增RGBA、HSLA模式
2、文字阴影：（text-shadow）
3、边框：圆角（border-radius）边框阴影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size,background-origin background-clip(削弱)
6、渐变：linear-gradient(线性渐变):
eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);
radial-gradient (径向渐变)
7、过渡：transition可实现动画
8、自定义动画： animate@keyfrom
9、媒体查询：多栏布局@media screen and (width:800px)
10、border-image
11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
12、3D转换
13、字体图标：Font-Face
14、弹性布局：flex

18.純粋な CSS で三角形を作成する原理は何ですか?

4 つの三角形で構成される長方形が目の前に表示されますが、三角形が 1 つだけ必要な場合、残りの 3 つを非表示にすることを想像できますか?

.box{
  width:0px;
  height:0px;
  border: 50px solid;
  border-color:transparent transparent transparent #ef4848;
}

19. CSS3は0.5pxの細い線を実装します

<style>
.line {
    position: relative;
}
.line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>

<div class="line"></div>

20. Chrome サポートのテキストを 12 ピクセルより小さくするにはどうすればよいですか?

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

21.開発中に CSS スタイルを初期化する必要があるのはなぜですか?

ブラウザの互換性の問題により、ブラウザごとに一部のタグのデフォルト値が異なるため、CSSが初期化されていない場合、ブラウザ間でページの表示に差異が発生することがよくあります。

22.ボディの後とボディの前に書くスタイルタグの違いは何ですか?

ページが上から下にロードされる場合、当然、スタイルが最初にロードされます。
body タグの後に記述されると、ブラウザは HTML ドキュメントを 1 行ずつ解析するため、最後に記述されたスタイルシート (アウトラインまたはスタイルタグに記述されたもの) を解析すると、ブラウザは前のレンダリングを停止し、HTML ドキュメントの読み込みと解析を待機します。テーブルが完成して再レンダリングされた後、Windows 上の IE で FOUC 現象が発生することがあります (つまり、スタイルの失敗によって引き起こされるページのちらつきの問題)。

23. CSS 属性のオーバーフロー属性は、オーバーフロー要素のコンテンツ領域のコンテンツを処理する方法を定義します。

パラメータがスクロールの場合、スクロールバーが表示されます。
パラメータが auto の場合、子要素の内容が親要素よりも大きい場合にスクロールバーが表示されます。
パラメーターが表示されると、オーバーフローコンテンツが親要素の外側に表示されます。
パラメータが非表示の場合、オーバーフローは非表示になります。

24.cssは文字間隔を設定します

CSS では、 letter-spacing プロパティを使用して文字間隔を設定できます。このプロパティは、各文字間の距離を制御します。負の値を設定すると文字が近くなり、正の値を設定すると文字間の距離が遠くなります。

文字間隔: 0.1em;

フロントエンド HTML、CSS の高頻度の面接質問 - 継続的に更新

HTML

1. HTML を理解するにはどうすればよいですか?

2. WEB標準について理解していますか？

2.1 構造層の基準

2.2 プレゼンテーション層の標準

2.3 行動層の標準

3. W3C について何を知っていますか?

3.1 構造の要件

3.2 css と js の要件

4. フロントエンド セマンティクスとは何ですか?

4.1 タグはセマンティックである

4.2 HTML5 セマンティックタグ

5. HTML5 の新しいコンテンツは何ですか?

6. HTML要素の分類?

7.HTMLの入れ子関係?

8.HTMLのデフォルトのスタイルは何ですか?

css

1. 標準 CSS ボックス モデルを導入しますか? IE の下位バージョンのボックス モデルとの違いは何ですか?

2.box-sizing 属性?

3.CSSセレクターとは何ですか? どのようなプロパティを継承できますか?

4. CSS3 の新しい疑似クラスとは何ですか?

5. div を垂直方向に中央揃えするにはどうすればよいですか?

6. CSS スプライト と総称されるスプライト (スプライト) の役割は何ですか?

7. 疑似クラスと疑似要素の違いは何ですか?

8. 聖杯のレイアウト

9. 両翼レイアウト

10. リー間のギャップを解消する

11.BFCとは何ですか? BFCをトリガーするにはどうすればよいですか?

12. フロートのクリア方法

13.エムとレムの違いは何ですか?

14.CSSプリプロセッサとは何ですか? 一般的な CSS プリプロセッサは何ですか? 違いは何ですか? CSS プリプロセッサの長所と短所は何ですか?

15.表示の値は何ですか? 彼らの役割を説明してください?

16.ポジションの価値とは何ですか?

17. CSS3 の新機能は何ですか?

18.純粋な CSS で三角形を作成する原理は何ですか?

19. CSS3は0.5pxの細い線を実装します

20. Chrome サポートのテキストを 12 ピクセルより小さくするにはどうすればよいですか?

21.開発中に CSS スタイルを初期化する必要があるのはなぜですか?

22.ボディの後とボディの前に書くスタイルタグの違いは何ですか?

23. CSS 属性のオーバーフロー属性は、オーバーフロー要素のコンテンツ領域のコンテンツを処理する方法を定義します。

24.cssは文字間隔を設定します

25.継続的に更新される

おすすめ

4. フロントエンドセマンティクスとは何ですか?

1. 標準 CSS ボックスモデルを導入しますか? IE の下位バージョンのボックスモデルとの違いは何ですか?

6. CSS スプライトと総称されるスプライト (スプライト) の役割は何ですか?