TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopのグラデーションマップについて現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
Photoshop

Photoshopのグラデーションマップについて現役エンジニアが解説【初心者向け】

初心者向けにPhotoshopのグラデーションマップについて解説しています。グラデーションマップを使うと、画面全体の色調を多様に変えることができます。基本の手順と使用例を見ていきましょう。

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

Photoshopのグラデーションマップについて、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。

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

 

田島悠介

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

大石ゆかり

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

田島悠介

グラデーションマップについて詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

グラデーションマップとは

画像やオブジェクトの色調整をおこなうための調整レイヤーの一種で、画像の明暗を設定したグラデーションの色を別の色に置き換えることができる機能です。

 

[PR] Webデザインで副業する方法とは

グラデーションマップでできること

  • 白黒の画像やイラストに簡単に色をつけることができます
  • 単色テクスチャの色を簡単に変更することができます
  • 色合いが違う画像をコラージュした場合など、グラデーションマスクを使い画像の明暗を調整することで、統一感を出すことができます

 

グラデーションマップの基本的な使い方

グラデーションマップを使って紫ベースの画像を赤に変更します。画像を開きます。

「メニュー」ー「レイヤー」ー「新規調整レイヤー」ー「グラデーションマップ…」をクリックします。

設定パネルの「下のレイヤーを使用してクリッピングマスクを作成」にチェックを入れ「OK」をクリックします。

設定されている描画色が反映されたグラデーションマップが表示されます。

プロパティに表示されるグラデーションバーをダブルクリックし、グラデーションエディターを表示します。

グラデーションの色を「0% : #170c01、35% : #ff000c、100% : #ffffff」に変更し「OK」をクリックします。

グラデーションが変更され、全体の色が変わります。

 

まとめ

ブラシを使って色を塗り替えるより、グラデーションマップを使った方が簡単に変更することができます。また、全体的に変更するだけでなく特定の部位を選択し、グラデーションマップを設定すると部分的に色を変更することもできます。

 

監修してくれたメンター

メンターOM

Webデザインの勉強のためロサンゼルスに留学。その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。

現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。
また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

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

大石ゆかり

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

 

TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。

現役デザイナーに毎日チャットで質問することができます。

記事を検索

関連するキーワード

関連する記事

Photoshopでコピースタンプツールを使う方法【初心者向け】

Photoshopでは「コピースタンプツール」を使うと、画像の一部分を別の場所に複製できます。 そこで今回は、Photoshopのコピースタンプツールの使...
Photoshop

Photoshopで吹き出しを表示させる方法【初心者向け】

Photoshopで吹き出しを表示させる方法を初心者向けに解説した記事です。 吹き出しはPhotoshopのカスタムシェイプの機能を使うことで、画像に簡単...
Photoshop

意外と便利！Photoshopで顔写真にモザイクをかける方法

Webサイトに載せる写真などで、写っている人を認識させないなためにモザイクをかけることはないでしょうか？ Photoshopでは「フィルター」機能を使うこ...
Photoshop

Photoshopで画像のノイズを除去する方法【初心者向け】

デジカメなどで写真を撮影した際、ノイズと呼ばれる小さな粒が画像に生じることがあります。 Photoshopでは、このノイズをプレビューを見ながら調整しつつ...
Photoshop

Photoshopで白黒画像を反転させる方法を現役Webデザイナーが解説【初心者向け】

Photoshopで白黒画像を反転させる方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 田島悠介 ...
Photoshop

Photoshopを使ってベジェ曲線を描く方法【初心者向け】

ベジェ曲線とはコンピューターグラフィックにおいて主に図形や文字を描画する際に使用されるもので、始点・終点などの座標を元に形成されています。一般的には、A...
Photoshop

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

Photoshopでグラデーションを簡単につける方法【初心者向け】

Photoshopでデザインを作るテクニックの1つに「グラデーション」があります。 これを覚えることでデザインの幅も広がるでしょう。 そこで今回は、初心者でも簡単にグラデーションを描く方法を解説します。   目次 グラデーション機能の簡単な使い方 グラデーションをデザインへ応用する   ※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。   大石ゆかり 田島メンター！！画面内にグラデーションで色を入れたいのですが、何かいい方法はありませんか～？ 田島悠介 Photoshopにはグラデーション作成専用の「グラデーションツール」があるので、色や方向・範囲を指定するだけですぐにグラデーションができあがるよ。 大石ゆかり グラデーションツールというのはどこにあるんですか？ 田島悠介 グラデーションツールは、ツールウィンドウから選択するんだ。実際にやってみよう。   グラデーション機能の簡単な使い方 グラデーションとは簡単にいうと、色を徐々に変化させながら塗る機能です。 さっそく、基本からやってみましょう。   まず作業用の画像を新規に作成します。 Photoshopのトップ画面の新規作成、またはファイルメニューで新規を選びます。   新規作成のダイアログが出ますので、幅、高さを適当に入力し（ここでは幅640、高さ480とします）「作成」を押します。 白紙の新規画像が表示されます。   次にPhotoshop画面の左側のツールボックス（図の←）でグラデーションツールを選択します。 そうするとツールバー部分がグラデーション選択のツールバー（図の↑）に変化します。 この上の矢印2ヶ所を確認してください。 この画像では、表示色(黒）から背景色(白）に円形に色が変化する設定になっています。 大石ゆかり あれ？メニュー内にグラデーションツールが見当たらないんですが・・・ 田島悠介 もしかして「塗りつぶしツール」が選択された状態になってないかな？そういうときは塗りつぶしツールアイコンを右クリックするとグラデーションツールが表示されるよ。 大石ゆかり あ！選択できました！ 田島悠介 それではグラデーションを描画してみよう。いろいろな種類のグラデーションが作成できるよ。   この状態で画像上でドラッグ&ドロップをして2点（これが開始点と終了点になります）を指定します。   すると開始点と終了点を半径とする円状のグラデーションができます。   グラデーション選択のツールバーから、他にもいろいろなグラデーションを作ることができます。 例えば、2番目の矢印ではグラデーションの種類の選択ができます。 矢印のところを押すと候補が表示され、その中から選ぶことができます。 また、3番目の矢印の部分では、直線的なグラデーションか、円状のグラデーションかを選べます。   黄色矢印の項目を選ぶと、下記のように表示が変わります。   先ほどと同様に、マウスのドラッグ&ドロップで2点を指定しました。   すると、紫と白のグラデーションが描けます。   グラデーションの基本はわかりましたか？ [PR] Webデザインで副業する方法とはグラデーションをデザインへ応用する グラデーションの操作は理解できても、実際にどうデザインに利用していくのかイメージしにくいと思います。 ここからは、グラデーションを使った3つのデザイン例を紹介します。 陰影をつけて立体的に見せる 文字の色をグラデーションに変化させる 青色のグラデーションで空のようなイメージを描く それでは見ていきましょう。   陰影をつけて立体的に見せる 円に円形グラデーションを設定すると、立体的な円にすることができます。 手順は、レイヤーパネルの「新規レイヤーを作成」アイコンをクリックし、新規レイヤーを作成します。   次に、追加されたレイヤーにだ円形選択ツールを使って、カンバス上に円形の領域（点線で囲まれたエリア）を作成します。   グラデーションの色を「レッド」の中から選びます。   円形の領域の中をドラッグ&ドロップするとグラデーションが設定されます。 文字の色をグラデーションに変化させる 色を変更したい文字レイヤーに、先ほどグラデーションを設定した要領で、「グラデーションオーバーレイ」を設定すると文字にグラデーションを付けられます。   まず、文字ツールで文字を書きます。 文字のレイヤーが選択された状態で、下の「レイヤースタイルを追加」アイコンをクリックします。   すると、レイヤースタイルダイアログが表示されます。 カラーグラデーションオーバーレイをチェックし設定画面を表示します。 グラデーションの詳細を設定します。 （スタイル：線形、角度：90、比率：100）   グラデーションの種類を「グリーン」の中から選びます。   OKボタンを押すと、文字にグラデーションが設定されます。 青色のグラデーションで空のようなイメージを描く 青色を微妙に変化させて空のイメージを作る方法は、背景レイヤーに対してグラデーションをつけることで実現できます。   今回は、表示色を水色、背景色を透明にします。 描画色をクリックし、カラーピッカーで水色を設定します。   次に、グラデーションパネルの「基本」を開き、描画色で設定した水色が設定されたグラデーションを選びます。   レイヤーパネルで背景レイヤーを選択し、カンバス上にドラッグ&ドロップします。   背景にグラデーションが設定されます。   例も含めてやり方は理解できましたか？   田島悠介 プリセットのグラデーションを使って、それぞれのオプションを適用させたとき、どのような効果が出るか練習してみよう。 大石ゆかり 球型にしたり、複数の色を指定したりすることもできるんですね。 田島悠介 グラデーションはレイヤーマスク内でも使えることを覚えておこう。透過と組み合わせてうまく使えば表現の幅が広がるよ。 大石ゆかり なるほど、ありがとうございます！   Photoshopをもっと使いこなすには、Photoshopで写真をモノクロにする方法も合わせてご覧ください。   執筆してくれたメンター メンターOM Webデザインの勉強のためロサンゼルスに留学。 その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。 現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。 また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。 Photoshopを学習中の方へ これで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい 副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？ テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
Photoshop

【綺麗に見せたい！】CSSでグラデーションを付ける方法【初心者向け】現役エンジニアが解説

CSSでグラデーションをつける方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次グラデーションマップとはグラデーションマップでできることグラデーションマップの基本的な使い方まとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！サイトのTOP画面とかで、画面全体にきれいなグラデーションがかかってたりするのがありますよね。あれってどうやってるんですか〜？ 田島悠介 それでは今回はgradientという関数について解説しよう。これを使うことで、画面にグラデーションを表示させることができるよ。 大石ゆかり 色の指定なども、同時にできるんですか？ 田島悠介 グラデーションの各部分に使う色や、向きも設定することができるよ。基本の形を見てみよう。   CSSでグラデーションをつける書き方 グラデーションをつけるには「gradient」という関数を利用します。 以前は、ブラウザによって書き方が少し異なっていましたが、現在のモダンブラウザ（Internet Explorer 11〜、Google Chrome最新版など）では、統一された書き方でグラデーションを表現できるようになりました。 この記事でも、その最新の書き方でグラデーションの表現方法をご紹介していきます。   例えば、線形グラデーションの書き方は以下の通りです。 linear-gradient(方向, 色1, 色2[, 色3, 色4, ...])   ※参考まで、古いブラウザをサポートする必要がある場合の書き方をご紹介します。それぞれの書き方は以下の通りです。 まずは、FirefoxなどのMozilla系ブラウザの書き方は以下の通りです。 linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);   以下は、Google ChromeやSafariでの書き方です。 -webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色));   田島悠介 これがグラデーションを作成するときの書き方になるよ。 大石ゆかり 最近のブラウザでは記述方法が統一されたんですね。 田島悠介 そうだね。では実際に、グラデーションを画面で確認してみよう。   実際にグラデーションをつけてみる 実際にコードを書いてみましょう。 <HTMLファイル> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="gradation.css"> <title>CSSで書くグラデーション</title> </head> <body> <div class="gradation"> <p class="gradation-text">CSSで書くグラデーション</p> </div> </body> </html>   <CSSファイル> .gradation{
CSS

MySQLでALTER TABLEを使ってテーブル構造を変更する方法【初心者向け】

MySQLの初心者向けに、基本的な使い方を解説する記事です。 今回は、ALTER TABLEを使ってテーブル構造に変更・追加・削除といった操作を加える方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ALTER TABLEを使うと、MySQLの既存のテーブルの定義（構造）を変更できます。 実務でも、ALTER TABLEを使ってテーブル構造に変更・追加・削除し、Webアプリケーションのデータ処理を行うので、ぜひ学習してみてください。 目次グラデーションマップとはグラデーションマップでできることグラデーションマップの基本的な使い方まとめ監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   今回は、このようなデータの入ったuserというテーブルをもとに解説を進めます。   大石ゆかり 田島メンター！テーブルを作成して、データを追加できるようになったんですが、作成した後にテーブルの変更ってできるんですか？ 田島悠介 作成したテーブルの内容の変更やフィールドの削除などできるんだ。 大石ゆかり 後からでも全部作り直せる感じでしょうか？ 田島悠介 そうだね。SQLiteなど簡易なデータベースは注意が必要だけど、普通のデータベースは後からでも変更できるんだ。変更の仕方を見てみよう！   テーブル名を変更する際に利用するコマンド テーブル名を変更する際には次のように操作します。 テーブル名を表示するコマンドは必須ではありませんが、名前が変更できたかを確認する方が安心です。 テーブル名を表示 テーブル名を変更   テーブル名一覧を表示するコマンド テーブル名を変更する場合、show tables;を利用します。 show tables;   テーブル名を変更するコマンド テーブル名を変更する場合、alter tableを利用します。 alter table  テーブル名 rename  新テーブル名;   テーブルの中のデータを表示するコマンド テーブルの中のデータを表示する場合、select を利用します。 select * from テーブル名;   データ型を確認するコマンド テーブルのデータ型を確認するためには、descを利用します。 desc テーブル名;   ALTER TABLEを使ってテーブル名を変更してみよう 実際にALTER TABLEを使ってテーブル名を変更してみましょう。   テーブル名を表示 まずはshow tables;を使ってテーブル名を表示させておきましょう。 コマンド  show tables; 実行結果 解説 show tables;というコマンドを実行すると、userというテーブルが表示されました。   テーブル名を変更 alter tableを使って、usersという名前に変えてみたいと思います。 コマンド alter table user rename users; 実行結果 解説 alter table user rename users;というコマンドで、userテーブルをusersテーブルに名称変更しました。 「Query OK」と表示されれば変更完了です。   テーブル名を再確認のため表示 show tablesを利用して、再度テーブル名を確認します。 コマンド show tables; 実行結果 解説 userからusersに変わっています。 これでテーブル名の変更ができました。   [PR] Webデザインで副業する方法とは ALTER TABLEを使ってフィールドを追加する方法 テーブルの中にはいくつかフィールドがありますが、新しいフィールドを追加できます。 フィールドを追加するためのコマンドは次の通りです。 alter table テーブル名 add フィールド名 データ型;   テーブルの中のデータを表示 現在のテーブルの中身を表示させます。 コマンド select * from users; 実行結果 解説 select * from users;では、テーブル名がusersのテーブルの中身を表示しています。 id・username・organization_id・email・password・login_num と、6つのフィールドがあります。   フィールドを追加する フィールドを追加する方法を解説します。 コマンド alter table users add age int; 実行結果   alter table users add
MySQL

PHPでカンマ区切りの値を配列データに変換する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでカンマ区切りの値を配列データに変換する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPでカンマ区切りのCSVファイルを読み込んだままでは、単なる長い文字列で扱いづらいですが、配列に変換するとプログラム中で扱いやすくなります。 目次グラデーションマップとはグラデーションマップでできることグラデーションマップの基本的な使い方まとめ監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPでカンマで区切られた文字を配列で扱いたいんですが、どうしたらいいですか？ 田島悠介 PHPには区切られた文字列を配列に変換するexplodeという便利な関数があるよ。 区切り文字を指定して、配列に変えてくれるんだ。 大石ゆかり そんな便利な関数があるんですね。 田島悠介 カンマ区切りの文字列を配列にするにはexplode関数が使えるけど、カンマ区切りがファイルになったCSVを読み込むときはfgetcsv関数を使うんだ。 大石ゆかり 同じカンマ区切りでも使う関数が違うんですね。 田島悠介 そうなんだ。では、さっそくカンマ区切りの文字列を配列にする方法を解説するね。 大石ゆかり お願いします！   この記事は、カンマ区切りの値を配列データに変換する関数 explodeの使用方法などを解説した記事です。 まだPHPでの開発に慣れていない方でも理解できる内容となっております。 ※カンマ区切りはCSVファイルで使われていますが、CSVファイルからの読み込みにはfgetcsv関数を使います。詳しくは解説記事「簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】現役エンジニアが解説」をご覧ください。 カンマ区切りを配列に変換(explode関数) explode関数とは PHPのexplode関数は、区切られた文字列を配列に変換する関数です。 区切り文字は指定ができるのでカンマ(,)の他、空白やアンパサンド(&)、セミコロン(;)など自由に指定できます。 書式 分割された文字列の配列 = explode(区切り文字, 区切られた文字列)   第1引数には、入力する文字を分割する区切り文字を渡します。 第2引数には、区切り文字で区切られた文字列を渡します。 分割した文字列は、配列となって返却されます。 ※省略できるオプションとして第3引数に変換後の配列の要素数の最大値を渡すことができます。分割されなかった要素については、最後の配列にすべて格納されます。 ※explode関数とは逆に、配列をカンマ区切りに変換するにはimplode関数を使います。implode関数について、詳しくは解説記事「PHPでimplodeを使う方法【初心者向け】」をご覧ください。   サンプルコード カンマで区切られた文字列を配列に変換するサンプルコードです。 ソースコード <?php // カンマ区切りの文字列 $str_csv = "アップル,オレンジ,レモン,グレープ,メロン"; // カンマ区切りのデータを配列にする $fruits = explode(",", $str_csv); // 変換された配列を表示 print_r($fruits); ?> 実行結果 Array ( [0] => アップル [1] => オレンジ [2] => レモン [3] => グレープ [4] => メロン ) 解説 explode関数に区切り文字（”,” カンマ）と、区切り文字で区切られた文字列（”アップル,オレンジ,・・・”)を渡します。 explode関数の戻り値として、「アップル」「オレンジ」などの文字列が配列に格納されます。   【応用】URLのパスを分解する URLをパスごとに分解したいとき、explode関数が使えます。 たとえば、「blog/staff」を「blog」と「staff」に分割して配列に変換します。 explode関数の区切り文字をスラッシュ(/)にし、URLのパスを対象文字列として渡します。 ※単にホスト名やパスやパラメータにURLを分解したいときはparse_url関数を使います。 ※「command=show&id=3」のようなURLパラメータを分解するにはparse_str関数を使います。   サンプルコード URLのパス「blog/staff/12/1」をパスごとに分解します。 ソースコード <?php // URLのパス $str_path = "blog/staff/12/1"; // パスを配列にする $paths = explode("/", $str_path); // 変換された配列を表示 print_r($paths); ?> 実行結果 Array (
PHP

PHPで数値を3桁ずつカンマで区切りにする方法を現役エンジニアが解説【初心者向け】

今回は、PHPで数値を3桁ずつカンマで区切りにする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次グラデーションマップとはグラデーションマップでできることグラデーションマップの基本的な使い方まとめ監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、PHPに関する内容だね！ PHPで数値を3桁区切りで出力させるには、ゆかりちゃんだったらどんなプログラムを作るかな？ 大石ゆかり ズバリ、表示形式の数値で「桁区切り（,）を使用する」ですか！？ 田島悠介 それは表計算ソフトExcelのセルの書式設定だよ。 大石ゆかり それじゃあ・・・String.formatで「”%,d”」ですか！？ 田島悠介 それはJavaだよ・・・（というか、よく知ってるね） 大石ゆかり う～ん。それじゃあ、わからないです。 田島悠介 PHPでは数値を3桁区切りするときに使われる関数があるから見てみよう。 大石ゆかり お願いします！ この記事は、number_format関数を使用して数値を3桁ずつカンマ区切りにする方法について記載した記事です。 PHPでの開発にあまり慣れていない方でも理解できる内容となっています。 number_format関数とは 数字を千位毎にグループ化して3桁ごとにカンマをつけた文字列にフォーマットする関数です。 例えば1000という数字があったら、1,000のようにフォーマットされます。 もちろん、3桁未満の数値ならそのまま文字列に変換されます。 number_format関数のパラメータで３桁区切りの文字や小数点の区切り文字も変えられます。   number_format関数を利用して数値を3桁ずつカンマで区切りにする方法 それでは、数値を3桁ごとにカンマで区切るためにnumber_format関数の使用方法について見ていきましょう。 使用方法： number_format(数値) 上記のようにnumber_format関数に数値を引数で渡すことで、数値を3桁ずつカンマで区切った値を返却します。 [PR] Webデザインで副業する方法とは実際に書いてみよう それでは、実際にnumber_format関数で数値を3桁ずつカンマで区切ってその結果を見てみましょう。 サンプルコード： <?php // 数値を3桁ごとにカンマで区切って出力 echo number_format(1000000); ?>   実行結果： 1,000,000   上記の例では、1000000という数値をnumber_format関数に引数として渡して、3桁ごとにカンマで区切った値にフォーマットし出力しています。 実行結果から分かる通り引数で渡した数値が3桁ごとにカンマで区切られていることが確認できます。   小数に3桁区切りをつける 大石ゆかり 整数に3桁区切りをつける方法はわかったんですが、小数を3桁区切りにすると小数部分がなくなっちゃいました・・・ echo number_format(123.45678); 実行結果： 123 田島悠介 number_formatで小数を扱うには、２つ目の引数で小数点以下の桁数を指定する必要があるよ。 この2つ目のパラメータが省略された場合には、小数点以下が出力されないから注意する必要があるね。 number_formatの２つ目のパラメータを指定すると、出力する小数点以下の桁数を指定できます。 使用方法： number_format(数値, 出力する小数点の桁数) 小数点の桁数指定が数値の小数点の桁数より大きい場合は「0」ゼロで埋められます。 サンプルコード： <?php // 数値を3桁ごとにカンマで区切って出力 echo number_format(123.45678, 0); //小数点以下が出力されない（デフォルト） echo "\n"; echo number_format(123.45678, 3); //小数点以下を3桁 出力する echo "\n"; echo number_format(123.45678, 5); //小数点以下を5桁 出力する echo "\n"; echo number_format(123.45678, 8); //指定桁数が多い場合「0」が出力される ?>   実行結果： 123 123.457 123.45678 123.45678000 大石ゆかり 田島メンター！小数点の桁数の指定が少ないと四捨五入になっています！ 切り捨てじゃないんですね・・・ echo number_format(123.45678, 3); 実行結果： 田島悠介 そうなんだよ。 number_format関数は小数点以下の指定した桁数以上なら四捨五入してしまうから注意が必用だね。 大石ゆかり もしかして、２つ目の引数を指定せずに小数を指定すると四捨五入されちゃうんでしょうか？ 田島悠介 次のPHPコードと実行結果を見てくれるかな。 echo number_format(12345.678); 実行結果： 12,346 大石ゆかり 見事に1の位が四捨五入されています・・・ 田島悠介 そんなわけで、number_format関数に小数を指定する場合は注意が必用だね。 PHPで経理のプログラムを作る場合、知らない間に四捨五入された「1円」が入ってしまうこともあるかもね。 大石ゆかり ひえー。 そんなことになったら大変です！ 気を付けます！   3桁区切りの文字列を数値に戻す方法 3桁区切りが入った文字列「123,456,789」を「123456789」のようにカンマなしの数値に戻せます。 表計算ソフトなどで出力されたCSV形式のファイルをPHPで読み込むときなどに使えるでしょう。 str_replace関数を使うと、文字列を置換できます。 使用方法： str_replace(検索文字列, 置換文字列, 操作対象文字列); str_replace関数で文字列を削除するには、２つ目の置換文字列に””（空白文字）を指定します。 str_replace関数でカンマを削除してみましょう。 $num = number_format($num); //3桁区切りにする echo $num . "<br>\n"; $num = str_replace(",", "",$num); //3桁区切りの解除（カンマを削除） echo $num; 実行結果： 123,456,789 123456789 このようにstr_replace関数でカンマを削除し、数値に戻すことができます。 大石ゆかり 文字列操作でカンマを削除できるんですね。 そういえば型変換なんてありましたけど、(int)で3桁区切りの文字列を整数に型変換できますか？ 田島悠介 いい質問だね。 実際にやってみるといいよ。 大石ゆかり 普通に文字列から整数にできそうなんだけどなあ？ echo (int)"12,345,678"; 実行結果： 12 うわあ。 ほとんど切り捨てられちゃいました。 田島悠介 PHPの型キャストでは、最初の数値として認識できる文字列までしか変換してくれないから左端の「12,」からカンマまでの数字「12」だけが変換されたんだよ。 大石ゆかり なるほどおー。 いろいろ勉強になりますね。   まとめ 以上、number_format関数を使用して、数値を3桁ごとにカンマで区切る方法についてご紹介しました。 このように画面に数値をカンマ区切りで表示したいなどの要件があった場合にnumber_format関数を使用した方法を採用するといいかもしれません。 指定した小数点以下の桁があると四捨五入されるので、注意しましょう。 監修してくれたメンター 井上祐介 テックアカデミーのメンター。 NEC・Microsoftの認定インストラクター。 学生時代からのプログラミング経験を経て業務で使用するプログラムの開発を行う。 新入社員研修でプログラミング初心者がサーバーサイドプログラムを組めるようになるまでの講師を担当した。 プログラム作成初心者がプログラミングを楽しめる講師でありたいというモットーがある。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

背景に画像などを入れたい！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

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopのグラデーションマップについて現役エンジニアが解説【初心者向け】