Androidアプリ開発でImageButton(イメージボタン)を追加する方法【初心者向け】

Androidアプリ開発でGUIコンポーネントの【ImageButton(イメージボタン)】を使いする方法を初心者向けに解説した記事です。ImageButtonを使うと、自分で用意した画像をボタンにすることができます。

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

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。

今回はそのなかの1つである、ImageButton（イメージボタン）を追加する方法と基本的な使い方をご紹介します。

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

田島メンター！！Androidアプリの標準のボタンじゃなくて、自分で作った画像のボタンをおきたいんですけど、どうしたらいいんですか〜？

それならImageButtonを使えばできるよ。

ImageButtonとは

ImageButton（イメージボタン）は、画像ボタンを利用するためのGUIコンポーネントです。

自分で用意した画像を簡単にボタンとして利用することができます。

事前準備

ImageButtonを配置する前に画像を用意しておくと、スムーズに作業ができます。

プロジェクトの「resフォルダ」内に「drawableフォルダ」を用意します。その中に、ImageButtonとして利用したい画像を保存しておきましょう。

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

ImageButtonを配置する

ImageButtonはレイアウトエディタのパレットの「イメージ＆メディア」から配置できます。

パレット内のImageButtonを、配置したい場所までドラッグしましょう。

ダイアログが表示されるので、drawableフォルダにコピーした画像のファイル名を選択し、[OK]ボタンをクリックします。

ImageButtonは配置されましたが、背景に色が付いてしまっているため格好悪いですね。

そこで、プロパティの「Background」を「#00000000」に変更すると、背景の透過が有効になります。

これで、ImageButtonの配置ができました。

xmlファイルを確認すると、次のようなコードが追加されています。

<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="68dp"
android:layout_marginStart="68dp"
android:layout_marginTop="56dp"
android:background="#00000000"
app:srcCompat="@drawable/button1" />

ImageButtonをカスタマイズする

ImageButtonは、画面の解像度に合わせて表示させる画像を変更することができます。

プロジェクトを作成されたときに、下記のようなdrawableで始まるフォルダが作成されます。これに対して、端末に対応したフォルダ内に画像を保存しておけば、アプリを実行したときに、そのフォルダに保存されている画像を優先して表示させることが可能です。

drawable-ldpi　：　低解像度画像（120dpi）
drawable-mdpi　：　中解像度画像（160dpi）
drawable-hdpi　：　高解像度画像（240dpi）
drawable-xhdpi　：　超高解像度画像（320dpi）
drawable-xxhdpi　：　超超高解像度画像（480dpi）

例えば、「drawable-ldpi」フォルダにdrawableフォルダと同じ名前で別の画像を保存します。

そして、画面サイズが違う２つのエミュレーターで起動すると、このような画面が表示されます。

右側のエミュレータの画面は「drawable-mdpi」に対応していますが、「drawable-mdpi」に画像がないため「drawable」に保存された画像が表示されています。

一方の、左側のエミュレータの画面は「drawable-ldpi」に対応しています。「drawable-ｌdpi」に保存された画像が表示されています。

この画像の使い分けは、ImageButton以外でも使えるので覚えておくと便利です。

今回の記事は以上です。

他のGUIコンポーネントを使ってみたい場合は、Androidアプリ開発でSwitchを追加する方法も合わせてご覧ください。

これで好きな画像のボタンが設置できますね♪

そうだね。標準のボタンだと堅いイメージがあるから、アプリによってはImageButtonを活用すると良いね。

はい♪

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

Androidアプリ開発でアクティビティを作成する方法【初心者向け】

Androidアプリでは、画面の切り替えといった操作が可能です。そんな操作を実現する「アクティビティ」について初心者向けに解説します。 ...

Androidアプリ開発

Kotlinのdata class（データクラス）の使い方【初心者向け】

Kotlinのdata class（データクラス）の使い方について解説します。本記事はTechAcademyのAndroidアプリ開...

Androidアプリ開発

Androidアプリ開発でRadioButton(ラジオボタン)を追加する方法

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、RadioBut...

Androidアプリ開発

初心者でもできた！Androidアプリの開発環境構築方法（Windows編）

自分でもAndroidアプリを開発してみたい！と思う方も多いのではないでしょうか。今回は、初心者でもできるWindowsのAndroidアプリの環境構築...

Androidアプリ開発

Androidアプリ開発でgradlewを使ってプロジェクトをビルドする方法

Android Studioからではなくコマンドライン（ターミナル）からAndroidアプリをビルドする方法として、gradlewを使う方法があります。 ...

Androidアプリ開発

Androidアプリ開発でマニフェストを編集する方法【初心者向け】

Android端末では、通信をしたり、カメラで写真を撮ったりとさまざまなことができます。Androidアプリでも、マニフェストファイルでパーミッションの設定をす...

Androidアプリ開発

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

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？田島悠介それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。大石ゆかりあ、どうやって使うんですか〜？ GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。 GridLayoutを配置する今回は、GridLayoutを使用してこの画像のような画面を作成してみます。 GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。次に、GridLayoutの列数を指定します。列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中GridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。すべてのボタンが配置できたら実行して、画面を確認してください。 GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかりはい♪ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安

Androidアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。大石ゆかりあ、そうなんですか〜！？ TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。ただし、行をまたいでパーツを配置することはできませんのでご注意ください。 TableLayoutを配置する今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください）配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中TableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。 TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout> コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

Androidアプリ開発

Androidアプリ開発でBitmapクラスを使って画像を表示させる方法

Androidアプリを開発では、Bitmapクラスを使って画像を表示したり変更したりすることができます。そこで今回はBitmapクラスを使って画像を表示させる方法を初心者向けにご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！画像を表示したり変更したりするのってどうやって実装したらいいんですか〜？田島悠介それならBitmapクラスを使うと実装できるよ。Bitmapクラスは複数の画像形式に対応しているんだ。大石ゆかりどうやって使うんですか〜？ Bitmapクラスで使える画像形式 Bitmapクラスを使って画像を表示するときに使用できる画像形式は次の3種類です。 JPEG（JPG） PNG GIF これらの画像形式で画像を用意するようにしましょう。 Bitmapクラスの使い方それでは、実際に使用してみましょう。使用する画像は、resファイル内にdrawableファイルを用意し、画像を配置します。その際、形式が違うファイルで画像の名前が同じにならないように注意しましょう。今回は、次の２つの画像を用意しました。まず、レイアウトファイルにImageViewを用意しておきます。 ImageViewはレイアウトエディタのパレットの「Images」から配置できます。パレット内のImageViewを、配置したい場所までドラッグしましょう。すると、以下の画像のようなダイアログが表示されます。これは、表示する画像を選択するためのダイアログです。今回は、後ほど表示する画像を選択するのでキャンセルにしてもいいのですが、画像が変化したことをわかりやすくするため、drawableフォルダにコピーした画像「blue」を選択し、[OK]ボタンをクリックします。これでImageViewの用意ができました。ここでMainActivity.javaには次のように記述します。今回はアプリが起動したときに実行されるonCreateメソッド内に次のように記述してみましょう。 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView iv = (ImageView)findViewById(R.id.imageView); Bitmap bmp1 = BitmapFactory.decodeResource(getResources(), R.drawable.red); iv.setImageBitmap(bmp1); } 各行の説明をします。 Bitmap bmp1 = BitmapFactory.decodeResource(getResources(), R.drawable.red); この行では、drawableに保存した画像をBitmapに変換しています。 iv.setImageBitmap(bmp1); この行で、上で変換したBitmapをレイアウトに用意したImageViewにセットしています。これで画像の表示の設定ができました。アプリを実行して画面を確認してみましょう。アプリを起動すると、onCreateメゾットが実行されるので、ImageViewに表示されるのは、「red.png」になります。 Bitmapクラスを使って画像を表示する方法は以上です。大石ゆかり三角から丸に変更できましたね♪ 田島悠介 Androidアプリで何か操作した後に画像を変更することってあるだろうから、覚えておいたほうがいいね。大石ゆかりはい、覚えておきます♪ Androidアプリ開発をさらに効率よくしたい場合は、Androidアプリ開発のLayoutの使い方も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安・目標への学習プランがわからず、迷子になりそう

Androidアプリ開発

Androidアプリ開発でImageViewを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、ImageView（イメージビュー）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！Androidアプリの画面上に画像を置きたいんですけど、どうやるんでしたっけ・・・？田島悠介 ImageViewっていうGUIコンポーネントを使うんだ。 ImageViewとは ImageViewとは、アプリ内で画像を表示したい場合に使われるGUIコンポーネントです。アプリを開発する際に画像を表示するのは必須とも言えると思いますので、基礎を覚えておきましょう。準備 ImageViewを配置する前に画像を用意しておくと、スムーズに作業ができます。画像は、プロジェクトの「resフォルダ」内に「drawableフォルダ」を用意します。その中に、ImageViewに表示したい画像をコピーしておきます。これで事前準備は完了です。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中ImageViewを配置する準備ができたら画像を配置（移動）していきましょう。 ImageViewはレイアウトエディタのパレットの「イメージ＆メディア」から配置できます。パレット内のImageViewを、配置したい場所までドラッグしましょう。 PropertiesのSrcを選択し、表示される[…]ボタンをクリックします。画像の様なダイアログが表示されます。左側の「drawable」を選択します。drawableフォルダにコピーした画像のファイル名を選択し、[OK]ボタンをクリックします。このようにImageViewを配置すると、xmlファイルには次のようなコードが追加されます。 <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView" android:src="@drawable/android_logo" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> android:src属性で、表示させる画像を指定します。表示させる画像を変更したい場合は、この部分を書き換えてください。これでImageViewの配置は完了です。アプリを起動すると、画面に指定した画像が表示されます。応用編：画像を透過させる最後にちょっとした応用を紹介します。 ImageViewを使って画像を表示させると、表示させる画像を透過させることが可能です。透過していることが分かりやすいように、背景を黄色にしてあります。プロパティの「Alpha」に0～1までの任意の値を入力して、画像の透明度を変更できます。値が小さくなるほど透明に近くなるので覚えておきましょう。今回の記事は以上です。さらにAndroidアプリのGUIコンポーネントを使いこなしたい場合は、Androidアプリ開発でTextViewを追加する方法も合わせてご覧ください。大石ゆかり画像を置くことができました！田島悠介アプリ開発で画像を置く場面ってたくさんあるから、覚えておくと良いね♪ 大石ゆかりはい♪ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。プログラミングを独学で学習していて、このように感じた経験はないでしょうか？・調べてもほしい情報が見つからない・独学のスキルが実際の業務で通用するのか不安

Androidアプリ開発

HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。うまく画像をつかって、おしゃれなWebページを作ってくださいね。目次ImageButtonとは事前準備ImageButtonを配置するImageButtonをカスタマイズするそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 imageタグを使って画像を表示する方法について詳しく説明していくね！大石ゆかりお願いします！【動画でも解説しています。クリックで見る！】画像を表示する方法 HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。 <img src="image.png" alt="海の写真" title="空と海"> それぞれ1つずつ確認していきましょう。 imageタグ <img … > ここには画像を表示しますよ、ということを示します。ソース属性 src=”…” ソースは、出所や源泉という意味です。表示する画像ファイルの、ファイル名やファイルの場所を示します。タイトル属性 title=”….” 画像のタイトルを指定します。オルト属性 alt=”…” オルタナティブ、代替の略です。目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。 Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。では具体例をみてみましょう。表示したい画像ファイルを用意してsrc属性で指定しましょう。ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。 <img src="image.png" alt="海の写真" title="空と海"> 画像が表示されました。マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。基本的な使い方はこれだけです。大石ゆかりサイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！田島悠介そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。大石ゆかり src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。田島悠介 alt属性は代替テキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。画像ファイルを指定する方法 HTMLで、画像を始めとする外部ファイルと連携をするときには、ファイルの場所やファイル名で、どのファイルかを指定します。この、どのファイルかを指定するための記述方法を、パス（path = 道順）と言います。 Webページを作っている各ファイルは、こちらの図のようなフォルダ構成になっていることがよくあります。このフォルダ構成を意識して、HTMLファイルにフォルダ名やファイル名を記述して道順を示していくんですね。パスの書き方には、絶対パスと相対パスの2種類あります。それぞれ詳しく説明しますね。絶対パス HTMLファイルの位置は関係なく、基準となる位置からの道順を示すのが絶対パス。市役所に行くには、駅から南に300m・・・と、基準となる場所から示す道順です。絶対パスの1つは、Webサイトの各ファイルをまとめている、おおもとのフォルダからの場所を示す方法です。今回の図では、demoというフォルダがおおもとですね。パスの記法では、先頭に置いた「 / 」スラッシュの記号をルート（根本）と呼び「おおもとのフォルダ」という意味があります。また、英単語の後に「 / 」スラッシュ記号を置くことで、フォルダ名を示します。実際にimgタグのsrcに、ルートからimage.jpgまでのパスを記述すると、このようになります。 <img src="/images/image.jpg" > 分解して翻訳すると、こんな意味ですね。「 / 」おおもとのフォルダ内の「 images/ 」images というフォルダ内の「 image.jpg 」image.jpg というファイルこの道順に沿って、HTMLは表示する画像ファイルを見つけるのです。また、すでにインターネット上に公開されている画像を指定する場合は、URLで記載することもできます。 <img src="https://techacademy.jp/sample/image.jpg" > URLを用いた記法も絶対パスの1つです。 HTMLファイルがどこにあるかは関係なく、公開されているWebサイトを基準に道順を示しているんですね。相対パスパスを記述するHTMLファイルと指定するファイルの、位置関係を意識して道順を示すのが相対パスです。市役所に行くには、ココから北に500m・・・と、今いる場所ココを基準に示す道順です。相対パスは、パスを記述するHTMLファイルとの位置関係を示す方法です。いくつかのパターンで、具体的に説明していきます。 HTMLとファイルが同階層にある場合このようなファイル構成で、index.htmlから同じフォルダ内にあるimage.jpgを指し示す方法です。パスの記法で、文頭の「 ./ 」ドットスラッシュ記号をカレント（現在位置）と呼び、パスを記述したファイルがあるフォルダを示します。 imgタグのsrcに、カレント記号を使ってからimage.jpgまでのパスを記述すると、このようになります。 <img src="./image.jpg" > また、カレント記号は省略することもできます。 <img src="image.jpg" > どちらの記法でも、記述したHTMLファイルと同じフォルダ内のimage.jpgを指し示しています。ファイルがHTMLより下のフォルダ階層にある場合次に、こちらの図のように、index.htmlの下層フォルダにあるimage.jpgを示す場合です。このパスは、今まで説明したカレントやフォルダ名のパス記法で、以下のように記述します。 <img src="./images/image.jpg" > また、カレント記号を省略すると、以下のようにも記述できますね。 <img src="images/image.jpg" > ファイルがHTMLより上のフォルダ階層にある場合最後に、index.htmlの上層フォルダにあるimage.jpgを示す場合です。パスの記法では先頭の「 ../ 」ドットドットスラッシュ記号をペアレント（親）と呼び、上位のフォルダ、親フォルダを示します。ファイルが上位のフォルダ階層にある場合のパスは、親フォルダ記号を使ってこのように記述します。 <img src="../image.jpg" > これを応用すると、下記のように複雑なパスも簡単に示すことができます。親フォルダの中にある、imagesフォルダの中にある、image.jpgを示すパスは、このように記述します。 <img src="../images/image.jpg" > パスの記号の意味が理解できると、簡単に記述することができますね。 imgタグを使って画像ファイルを表示するには、パスを記述して正しい道順を示すことがとても大事ですので、ぜひマスターしてください。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中【応用】画像の表示スタイルを調整する画像の表示スタイルは、imgタグにCSSを指定して調整していきます。 ※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。画像の大きさを調整する imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。 img.image1{

HTML

ファイルの操作！JavaでFileクラスを使う方法【初心者向け】

この記事では、JavaでFileクラスを使う方法について解説しています。ファイルの操作を行う際に使うクラスなので、実際にプログラムを書きながら理解しましょう。なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。田島悠介今回はFileクラスを使ってみよう。大石ゆかり田島メンター！Fileクラスは何に使うんですか〜？田島悠介ファイルに関する色々な操作を行うことができるんだ。詳しく見ていこう。大石ゆかりはい！ Fileクラスとは Fileは、ファイルまたはフォルダ(ディレクトリ)を表すクラスです。ファイルの読み書きや、フォルダ中のファイル一覧の取得といった、ファイルシステムの操作全般で使用します。 Fileクラスの書き方操作対象のパスを引数とし、コンストラクタを呼び出します。 File f = new File("C:pathtofile"); 以降、Fileインスタンスを用いて各種操作を行います。 String name = f.getName(); // 名前を取得する boolean b = f.exists(); // 対象が存在すればtrue f.delete(); // 対象を削除する。 boolean b = f.isFile(); // ファイルならばtrue boolean b = f.isDirectory(); // フォルダならばtrue int length = f.length(); // サイズを取得する詳細は公式のリファレンスを参照してください。田島悠介 Fileクラスの基本の書き方だね。大石ゆかり引数は対象のファイルやフォルダのパスになるんですね。田島悠介次は実際にFileクラスを使ってみよう。ここでは指定のフォルダ内の一覧を行うコードを書いてみるよ。 [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中実際に書いてみよう指定したフォルダ配下のフォルダ、ファイル一覧を表示するプログラムです。種類(フォルダかファイルか)、名前、サイズを表示します。ソースコード import java.io.File; import java.nio.file.Paths; public class FileDemo { public static void main(String[] args) { // 一覧を取得する対象の親フォルダ String targetFolderPath

Java

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Androidアプリ開発でImageButton(イメージボタン)を追加する方法【初心者向け】

ImageButtonとは

事前準備

ImageButtonを配置する

ImageButtonをカスタマイズする

関連するキーワード

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

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発でBitmapクラスを使って画像を表示させる方法

Androidアプリ開発でImageViewを追加する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法【初心者向け】

ファイルの操作！JavaでFileクラスを使う方法【初心者向け】

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

ImageButtonとは

事前準備

ImageButtonを配置する

ImageButtonをカスタマイズする

記事を検索

関連するキーワード

関連する記事

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

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

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