TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSで背景画像を複数指定する方法を現役エンジニアが解説【初心者向け】
icon
icon
CSS

CSSで背景画像を複数指定する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSで背景画像を複数指定する方法について解説しています。基本の背景画像の設定方法、画像が複数ある場合の重なり順の決まりを説明します。画面上での表示を確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSで背景画像を複数指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

背景画像を複数指定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

CSSの書き方、記述方法

HTMLタグの属性として、idとclassに識別子として名前を定義することが可能です。

また、この基本となるid、classの名前をCSS（かスケーティングスタイルシート）のセレクタに指定してから、装飾の対象に含めることができます。

以下、複数の背景画像を表示するための記述を参考に解説します。

HTML

<div id="id_sample" class="class_sample"></div>

CSS

#id_sample {
   width: 100%;
   height: 500px;
}

.class_sample {
   background-image:
     url("https://placehold.jp/300x300.png"),
     url("https://placehold.jp/1024x768.png");
  background-repeat:
     no-repeat,
     repeat;
}

 

表示結果

See the Pen
2020-05-19-sample01 by YOHEI INAI (@yohei_inai)
on CodePen.

 

[PR] Webデザインで副業する学習方法を動画で公開中

画像の重なり順について

background-image:
url("https://placehold.jp/300x300.png"),
url("https://placehold.jp/1024x768.png");

複数の画像のファイルパスを「,」（カンマ）にて区切りましょう。

最初に定義したファイルパスの画像が、最も前面に表示されます。

以後、重なり順の優先順位としては、後述されたものは背面になります。

なお、連記の最後には「,」（カンマ）は不要です。

 

複数の背景画像を重ねる方法

一枚のみの背景画像

background-image:
     url("https://placehold.jp/1024x768.png");

 

二枚以上の背景画像

background-image:
     url("https://placehold.jp/300x300.png"),
     url("https://placehold.jp/1024x768.png");

 

複数の背景画像を指定して実装してみよう

複数のファイルパスの背景画像を記述した場合、同様に背景画像の設定も複数回の記述が可能です。

.class_sample {
  background-image:
    url("https://placehold.jp/120x120.png"),
    url("https://placehold.jp/300x300.png"),
    url("https://placehold.jp/700x700.png");
  background-repeat:
    no-repeat,
    no-repeat,
    repeat;
 }

表示結果

See the Pen
2020-05-19-sample02 by YOHEI INAI (@yohei_inai)
on CodePen.

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

CSSで背景画像を複数指定する方法がよく分かったので良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

デザインを実装する上で知っておきたい！9つの原理とは

本稿は、Smashing magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、UXディレクターでありデザイン本の執筆も...
Webデザイン

CSSでposition: fixedを使うと文字が重なる原因と対処法を現役エンジニアが解説【初心者向け】

CSSでposition: fixedを使うと文字が重なる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...
CSS

CSSでbox-shadowを使って影をつける方法【初心者向け】

今回はCSSでbox-shadowを使って影をつける方法を説明します。ボタンなどより目立たせたいものがあるときに役立つ知識でしょう。 実際のWebサイトで...
CSS

【Webデザインの参考に！】海外のおしゃれサイトをまとめてみた！

日本でデザインをしていても流行りのデザインなどは、海外から影響を受けることがよくあります。サイトのデザイン面は見る人にとって第一印象になります。 そこで今...
Webデザイン

海外の事例から学ぶ！デザインでユーザーを惹きつける7つの施策

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、ライターのCarrie Cousins氏...
Webデザイン

CSSで上付き下付き文字を表示する方法を現役エンジニアが解説【初心者向け】

CSSで上付き下付き文字を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...
CSS

あわせてよく読まれている記事

背景に画像などを入れたい！CSSで背景を指定する方法【初心者向け】

本記事ではHTML要素に対し、CSSで背景を指定する方法を現役エンジニアが解説します。 目次 CSSで背景を編集する書き方 実際にCSSで背景を書いてみよう   大石ゆかり 田島メンター！！サイト全体や各要素の背景に色や画像を設定したいのですが、どうすればいいですか〜？ 田島悠介 背景の設定にはbackgroundプロパティを使うんだ。色ならbackground-color、画像を入れるならbackground-imageになるね。 大石ゆかり tableとかにも使えますか？ 田島悠介 もちろん使えるよ。色コードと画像、それぞれの書き方をみてみよう。   【動画でも解説しています。クリックで見る！】   CSSで背景を編集する書き方 CSSにおける背景の設定は、backgroundプロパティ群から操作しましょう。 backgroundプロパティ群には、色を設定するbackground-colorや画像を指定するbackground-imageなど多数あります。 そして、それらをまとめて指定し、省略するbackgroundというプロパティを使うことも可能です。   背景色を指定するbackground-color background-colorを使用すると、背景の色を変更可能です。 background-color: 色コードまたはカラーネーム; 値の部分には#000000などの色コードやwhiteなどのカラーネームが入り、指定した色が背景色に設定されます。 background-colorの初期値はtransparentです。 この場合、親要素の背景色が適用され、親要素で何も設定されていない場合は白色となります。 See the Pen background-color by TAKAYOSHI (@lspuwbkv) on CodePen. 背景に画像を指定するbackground-image background-imageを使用すると、画像ファイルを背景に指定できます。 background-image: url(“画像ファイルへのパス”); 値にはurl(“xxxx”) の形式、画像ファイルへのパスを記述可能です。 パスはhttp://から始まるURLの形でも記述ができます。 CSSファイルと同じサーバ内であれば、相対パスでも記述できます。 その際、相対パスの基準となるのは、この記述をしているCSSファイルが存在するフォルダになるため注意が必要です。 See the Pen background-image by TAKAYOSHI (@lspuwbkv) on CodePen. 背景の繰り返しを指定するbackground-repeat background-repeatを使用すると、画像の繰り返しを指定することが可能です。 background-imageと組み合わせて使い、設定できる値は以下のように4つあります。 repeat：背景画像を縦方向、横方向双方に繰り返し表示する（初期値） repeat-x：背景画像を横方向に繰り返し表示する repeat-y：背景画像を縦方向に繰り返し表示する no-repeat：背景画像を繰り返さず1つだけ表示する See the Pen no-repeat by TAKAYOSHI (@lspuwbkv) on CodePen. 背景の表示位置を指定するbackground-position background-positionを使用すると、背景画像を横の位置／縦の位置というように表示位置を指定可能です。 横の位置はleft、center、rightを用いて指定できます。 縦の位置はtop、bottom、centerを用いて指定できます。 また、パーセントやピクセル、マイナスの値も指定可能です。 See the Pen background-position by TAKAYOSHI (@lspuwbkv) on CodePen. 背景のサイズを指定するbackground-size background-sizeを使用すると、背景画像のサイズを指定することができます。 contain を指定すると、領域に画像全体が収まりきるサイズで表示し、サイズが合わない箇所は余白になります。 coverを指定すると、領域全体を画像が覆いつくすサイズで表示し、サイズがはみ出す箇所は表示されません。 See the Pen background-size by TAKAYOSHI (@lspuwbkv) on CodePen. 背景の基準位置を指定するbackground-origin background-originを使用すると、どこを起点として背景画像を表示するか、指定することができます。 border-box：背景画像は枠線領域の左上を起点とします padding-box：背景画像はパディングの左上を起点とします（初期値） content-box：背景画像はコンテンツ領域の左上を起点とします   背景の表示領域を指定するbackground-clip background-clipを使用すると、背景色や背景画像の表示領域を指定することができます。 border-box：背景画像や背景色は、枠線領域を含んで表示します（初期値） padding-box：背景画像や背景色は、パディングの左上を起点とします content-box：背景画像や背景色は、コンテンツ領域の左上を起点とします background-originとbackground-clipはよく似ていますが、対象が違います。 originは背景画像のみが対象ですが、clipは背景色も対象になります。   背景のスクロール固定を指定するbackground-attachment background-attachmentを使用すると、背景のスクロール固定を指定することができます。 scroll：背景はスクロールします fixed：背景はスクロールしても固定されます   背景をまとめて設定する background background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment 今まで説明してきた上記を、まとめて1行で指定するプロパティがbackgroundです。   background:  red url(image.jpg) no-repeat border-box center/40% 80% content-box 指定したいプロパティの値を、スペースでつなげて記載するのが基本ですが、2つだけルールがあります。 originとclipを両方指定した場合は、先に書いたほうがorigin、後に書いたほうがclipです。 そして、positionとsizeは、スラッシュ/でつなげて書きます。   background-imageで背景グラデーション background-imageには、画像ファイルだけではなく、グラデーションも指定することができます。 background-image: repeating-conic-gradient(red,black 10%); 例えば、このように記述するだけで、簡単にグラデーションを作ることができます。 See the Pen grad by TAKAYOSHI (@lspuwbkv)
CSS

HTMLに挿入した背景画像を繰り返さない方法を現役デザイナーが解説【初心者向け】

HTMLに挿入した背景画像を繰り返さない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次CSSの書き方、記述方法画像の重なり順について複数の背景画像を重ねる方法複数の背景画像を指定して実装してみよう執筆してくれたメンター   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 挿入した背景画像を繰り返さない方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLに背景画像を挿入できるbackground-imageとは？ CSSのbackground-imageを使うと、HTMLに背景画像を挿入できます。 背景画像を入れると、より表現豊かなWebサイトにすることができ、Webデザイナーを目指す初心者の方はぜひ習得したいCSSの1つです。 Webサイトの背景に画像を指定するときには「CSS background-image」を使います。 また、背景の指定方法にはいくつかの種類があります。 HTMLに挿入した背景画像を繰り返さないために、どのようなコードを書けばいいのか詳しく見ていきましょう。   背景画像のサイズと表示される幅の関係 背景画像は、表示させる要素の左上端をx, y座標の0, 0と位置付けて表示します。 最初の準備として、下記のサンプルコードを記述します。 このコードでは、赤枠の内側左上端がx, y座標の0, 0です。 HTML <header></header> CSS header { border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */ height: 500px; /* 要素の内部が空なので、高さを固定します。 */ }   次に背景画像を絶対パスで読み込ませます。 CSS header {   border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */   height: 500px; /* 要素の内部が空なので、高さを固定します。 */   background-image: url("https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg"); }   背景画像のサイズより、表示領域のサイズが大きい場合には、表示領域の余りの面積に繰り返しで背景画像が表示されます。 この現象となる理由は、標準的な初期値として、以下の設定が付与されるためです。 CSS background-repeat: repeat; /* 背景画像を繰り返し表示します。 */   background-repeat: repeat;　が初期値として設定されていると、画像が繰り返し表示されてしまい、思い通りのレイアウトにならない場合があります。 そんな時は下記の方法をお試しください。   [PR] Webデザインで副業する学習方法を動画で公開中画像を繰り返さないためには 背景画像を繰り返し表示させたくない時は、下記のCSSを追加しましょう。 CSS background-repeat: no-repeat; /* 背景画像を繰り返し表示しません。 */ 初期値として、画像を繰り返し表示する設定になっているため、background-repeatの値をno-repeatに定義すると1回だけの表示にできます。   以下、背景で画像を繰り返さないための、全体のコード例です。 CSS header {   border: 5px solid
HTML

HTMLで複数の画像を均等に横並びする方法を現役エンジニアが解説【初心者向け】

HTMLで複数の画像を均等に横並びする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTMLで複数の画像を表示する場合、特別なことをしないと縦に並んで表示されます。 しかし、実務では均等に横に並べて表示することのほうが多いです。 この記事を通じて、実務でも利用できるような、HTMLで複数の画像を均等に横並びする方法を学べます。 目次 画像を横並びにする方法 画像間の隙間を均等に保つ方法 ブラウザの横幅を変えても均等に保つ方法 複数の画像を均等に横並びしてみよう そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数の画像を均等に横並びする方法について詳しく説明していくね！ 大石ゆかり お願いします！   画像を横並びにする方法 横並びさせたい画像に対して、以下の3通りがあります。 displayプロパティにinline-blockを指定する方法 floatを使用する方法 dispalyプロパティにflexを指定する方法   displayプロパティにinline-blockを指定する方法 displayプロパティとは、表示する要素の調整を行うプロパティです。 要素によって指定された要素に対して適用するデザインの種類です。 displayプロパティにinline-blockを設定するためには、該当する要素に対して、次のようなCSSのコードを指定することで適用が可能です。 li { display: inline-block; }   もし、display: inline-block;を指定しない場合は、次のように縦に並んで表示されます。 １つめ ２つめ ３つめ   liに対して、display: inline-block;を指定することで、次のように横並びの表示が可能になります。 See the Pen inline-block by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   floatを使用する方法 float プロパティを利用することでも横並びが可能です。 float とは「浮かぶ」という意味の英単語です。 float プロパティを利用すると、ブロックレベル要素を左寄せや右寄せにできます。 li{ float:left; } float プロパティでは、leftを指定することで要素を右に回り込ませ、左寄せにできます。 また、rightを指定することで要素を左に回り込ませ、右寄せにすることができます。 ↑ 冗長   ブロックレベル要素とは次のような要素です。 h1,h2,h3,h4,h5,h6等の見出し div section article p ul, ol table   liに対して float:left;を指定することで、次の表示のように横並びの表示が可能になります。 See the Pen float by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen.   dispalyプロパティにflexを指定する方法 displayプロパティをflexにすることでも横並びの表示が可能です。 inline-blockで指定する際は、liに対して display: inline-block;を指定しました。 flexで指定する際は、ulに対して display: flex;を指定すると良いです。 親要素であるulをflexで指定することで、小要素であるliを横並びにできます。 ul{ display: flex; } ulを利用すると、liで箇条書き表示を行う際に、箇条書きの各行頭に●を表示することが可能です。 ulの他にもolを利用することが可能です。 olを利用してliで箇条書き表示を行う際に、箇条書きの各行頭に1.2.3.のような連番を表示できます。 See the Pen flex by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. [PR] Webデザインで副業する学習方法を動画で公開中画像間の隙間を均等に保つ方法 marginプロパティを使用することで隙間を作ることができますが、均等の隙間になる値を計算してから定義します。 marginプロパティは、borderと言う境界の外側の余白を意味します。 似たような余白で、paddingというものがあります。 paddingはborderの内側の余白で、marginはborderの外側の余白と覚えておくと良いですよ。   ブラウザの横幅を変えても均等に保つ方法 ブラウザの横幅を変更させても、隙間などの値を均等に保つために、相対的な値になる単位（%）を使用します。 ブラウザの横幅を変更させる方法としては、ショートカットキーを利用する方法があります。 例えば、Google Chromeというブラウザを利用する場合、以下のようなショートカットキーで表示を変更できます。 「Ctrl」＋「+」（Ctrlキーを押しながら+キーを押す）で拡大表示が可能です。 「Ctrl」＋「-」（Ctrlキーを押しながら-キーを押す）で縮小表示が可能です。 「Ctrl」＋「０」（Ctrlキーを押しながら数字の0キーを押す）で標準サイズの表示が可能です。     複数の画像を均等に横並びしてみよう 以下の例は、display:flex;とflex-wrap:wrap;を使用し、marginにて均等に隙間（余白）を維持する設定です。   HTML <!DOCTYPE html> <html> <head>
HTML

実際に書く！CSSで背景画像を透過させる方法【初心者向け】

CSSで背景画像を透過させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次CSSの書き方、記述方法画像の重なり順について複数の背景画像を重ねる方法複数の背景画像を指定して実装してみよう執筆してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSで背景画像を透過させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSで背景画像を透過させる方法とは CSSで背景画像を透過させる方法は、以下の2つがあります。 opacityプロパティで透明度を指定する方法 rgba()関数で透明度を指定する方法 それぞれの方法について、順番に確認していきましょう。   opacityプロパティで透明度を指定する方法 セレクタすべてを透過させるプロパティに、opacityというものがあります。 opacityプロパティで透明度を指定したとき、文字入りのコンテンツの場合、文字まで薄くなってしまって、困ってしまったことはありませんか。 これは、セレクタすべてを透過するためです。 今回は、背景画像だけを透過させるようにするCSSを書いてみましょう。   まず、HTMLを用意します。 <div class="content"> <div class="bg"></div> <p>たんぽぽ</p> </div> .bgは空のdivで、「たんぽぽ」はその外に書いてあります。 つまり、positionプロパティを使っていきます。   実際に書いてみよう 各要素の配置方法やサイズなどを指定する 背景に使用する画像や表示位置、透明度を指定する 背景画像と文字列の重ね順を変更する   まず、相対位置(position: relative;)を、.contentに与えます。 .content{ width: 200px; height: 150px; border : 1px solid #000; position: relative; /*相対位置*/ } p{ /*文字の装飾*/ color: #f00; font-size : 30px;
CSS

要素を透明にする！CSSのopacityの使い方【初心者向け】現役Webデザイナーが解説

CSSで書くopacityの使い方をテックアカデミーのメンター（プロのWebデザイナー）が初心者向けに実際のコードを使って解説しています。 最近、画像上にテキストを表示するようなデザインが増えてきていますが、画像やテキストの透明度を変えることで大きく印象を変えることができます。 画像やテキストの透明度は、CSSのopacityプロパティを使うと簡単に設定することができるので、知っておくと今後役立つでしょう。   目次 opacityとは opacityの書き方 実際にopacityを書いてみよう 画像にopacityを適用してみよう   大石ゆかり 田島メンター！！最近Webサイトのデザインで画像の上に文字が表示されてるのあるじゃないですか？ 田島悠介 最近のサイトだと結構多いよね！ 大石ゆかり 自分でもやってみてるんですが、ちょっと透明にして画像や文字を目立たせたいんですけど、どうすれば良いんですかー？ 田島悠介 透明度を変えるのはopacityというものを使うんだけど、詳しく説明していくね！ 大石ゆかり ありがとうございます〜！   opacityとは opacityプロパティを使用すると、テキストや画像などHTML内の要素の不透明度を設定することができます。 何も設定されていない場合、各要素は不透明100%の状態で表示されていますが、CSSでopacityプロパティを設定し値を変更することによって、それらの不透明度を調整し半透明にすることが可能になります。   [PR] Webデザインで副業する学習方法を動画で公開中opacityの書き方 opacityは以下のように記述します。 opacity:値; 値の部分には「0.0～1.0」までの数値で不透明度を指定します。数値が大きいほど不透明度が高くなり、よりはっきりと表示されます。 逆に数値が小さいほど不透明度は下がり、透明になります。また、値にinheritを入力すると親要素の値が継承されます。 不透明度: 1 ー 完全に不透明な状態となります。(初期値) 不透明度: 0 ー 完全に透明な状態となり、画面に表示されなくなります。 0.0～1.0の範囲外で設定した場合 ー この範囲内に収めて適用されます。(例：-1→0／2→1)   大石ゆかり 数字で透明度を決めるんですね！ 田島悠介 では、実際に書いてみようか！   実際にopacityを書いてみよう 値が小数点の場合 以下のHTMLにopacityを適用します。 尚、以下は、HTMLとCSSファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div> <p>小数点で指定した場合</p> </div> </body> </html> CSS div {background-color:#b0e0e6; } p {opacity:0.5; } ここでは背景色が#b0e0e6の<div>領域の中に<p>段落でテキストを入力し、その<p>のopacityの値を0.5にしています。 画面ではこのように表示されます。 段落の文字の部分の不透明度が変更され、少し透けた表示になっています。また、<div>の領域にはopacityを設定していないため、背景色の不透明度は変わっていません。   値が0や1の場合 次に、一行目のテキストに「opacity: 0;」を指定し、二行目のテキストに「opacity: 1;」を指定した場合です。 HTML <!DOCTYPE html> <html> <head>
CSS

Pythonにおけるrepeat()の利用方法を現役エンジニアが解説【初心者向け】

Pythonにおけるrepeat()の利用方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonにおけるrepeat()の利用方法について詳しく説明していくね！ 大石ゆかり repeat()の利用方法を理解できるように頑張ります！   repeat()とは? repeat()関数は、要素や配列を引数に取り、繰り返す配列を返り値として出力するものです。Pythonにおける行列計算などの数値計算をするときに非常に役に立つNumpyライブラリに組み込まれた関数です。   repeat()の使い方 repeat()を使うには、Numpyライブラリをインストールする必要があります。 まだインストールしていない場合には、コマンドラインで pip install numpy を実行し、Numpyをインストールしてください。   repeat()は以下のように記述します。 repeat(要素や配列, 繰り返し回数, (繰り返す方向) ) 第一引数には繰り返したい変数や配列を指定します。 第二引数には繰り返す回数、第三引数には配列の場合の繰り返す方向を指定してください。 基本的に返り値は、一次元化された配列であるため、二次元配列を出力したい場合などは第三引数で指定しましょう。   [PR] Webデザインで副業する学習方法を動画で公開中repeat()を利用して繰り返し同じ要素の配列生成する ここでは、実際にrepeat()関数を使って要素を繰り返した配列を出力してみましょう。 このコードではコマンドラインなどでPythonを対話型で開いて実行することを想定しています。   最初に繰り返しの元となる変数を用意します。 >>> import numpy as np >>> x = 1 >>> y = [1,2,3] >>> z = [[1,2],[3,4]] x,y,zはそれぞれ、int型の変数、一次元配列、二次元配列です。 そして、これらの要素をrepeat()関数に代入した場合にどのように変化するかを見てみましょう。 >>> np.repeat(x,2 array([1, 1]) >>> np.repeat(y,2) array([1, 1, 2, 2, 3, 3]) >>> np.repeat(z,2) array([1, 1, 2, 2, 3, 3, 4, 4])   それぞれ上のように表示されるでしょう。 一次元配列で出力されていることが確認できます。   二次元配列では、繰り返し方向を指定して行います。 >>> np.repeat(z,2,1) array([[1, 1, 2, 2], [3, 3, 4, 4]]) のように、列方向に繰り返しされ二次元配列のまま出力されるでしょう。 繰り返す変数は数値ではなく、文字列などでも問題ありません。 >>> np.repeat('abc',2) array(['abc', 'abc'], dtype='<U3′)   今回は、PythonのNumpyライブラリのrepeat()関数について解説しました。 Numpyでは他にも便利な関数が揃っているので調べてみましょう。 執筆してくれたメンター メンターOS AIプログラミングを使って開発を行う。 プログラミング歴は約3年でPythonは割と得意。好きな物理理論は一般相対性理論で動物も好き。   大石ゆかり Pythonにおけるrepeat()の使い方がよく分かりました！ 田島悠介 これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているのでぜひ参加してみてください。
Python

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSで背景画像を複数指定する方法を現役エンジニアが解説【初心者向け】