HTML

HTMLで画像を画面サイズに合わせて表示する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで画像を画面サイズに合わせて表示する方法について解説しています。最初に、width属性とheight属性による画像サイズ設定方法の基本をおさらいします。次に、様々な媒体に対応したレイアウトを実装するための手法を見ていきましょう。

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

この記事を書いた人

テックアカデミーマガジン編集部

モバイルファースト時代の昨今、WebページはスマホやタブレットやPC、様々な画面で見られています。

Webページに表示する画像も、ユーザーの画面に合わせて表示したいですよね。

ここでは画面サイズに合わせて画像を表示させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

imgタグで画面幅に合わせて画像を表示

imgタグの画像表示では、サイズを指定しないと元の画像サイズがそのまま表示されます。

See the Pen Responsive 1 by TAKAYOSHI (@lspuwbkv)on CodePen.

ここで、CSSでimgタグに対して幅、width:100%;を指定しましょう。

すると、画面幅いっぱいに画像が表示されました。

See the Pen
Responsive 2 by TAKAYOSHI (@lspuwbkv)
on CodePen.

これだけで簡単にできる・・・ように見えますが、いくつか注意点があります。

しっかり理解して使いこなしてくださいね。

指定するのは幅だけ

では先ほどのコードで、CSSで高さを指定するとどうなるでしょうか。

See the Pen
Responsive3 by TAKAYOSHI (@lspuwbkv)
on CodePen.

このように、画像が伸びたように崩れてしまいます。

画像はそれぞれ、様々な四角形の形をしていますよね。

四角形の縦幅と横幅の比率のことを、アスペクト比と呼びます。

画像のサイズが変わっても、縦と横の比率が同じであれば画像は崩れませんね。

See the Pen
Responsive4 by TAKAYOSHI (@lspuwbkv)
on CodePen.

imgタグに幅だけ指定すると、アスペクト比を維持し崩れないように高さを調整してくれます。

幅も高さも指定してしまうと、画像のアスペクト比が崩れ、画像が伸びてしまうのです。

高さはあえて指定しないでおきましょう。

パーセント指定と親要素

先ほどは、幅に100%を指定しました。

パーセントは「基準の何倍か」を表す単位で、100%は基準の1倍、つまり基準と同じという意味です。

気を付けなければいけないのは、この「基準」は画像を囲っている親要素のサイズということです。

See the Pen
Responsive 5 by TAKAYOSHI (@lspuwbkv)
on CodePen.

画面サイズが基準ではありません。

間違えやすいので注意してくださいね。

画面幅に合わせて画像を表示するためには、親要素のサイズや位置も調整しましょう。

この2点に気を付ければ、画像を画面幅に合わせて表示できます。

background-imageで画面全体を覆う

画像表示には、imgタグだけではなく、CSSのbackgroundプロパティを使う方法もあるんです。

See the Pen
responsive 8 by TAKAYOSHI (@lspuwbkv)
on CodePen.

background-imageを使って、画面全体を覆うように画像を表示させてみました。

では、詳しく解説していきましょう。

画像領域に要素を作成

background-imageは、要素の背景に画像を表示するプロパティです。

まずは、画像を表示したい領域で要素を作成しましょう。

See the Pen
Responsive 6 by TAKAYOSHI (@lspuwbkv)
on CodePen.

今回はposition:absoluteを使って、画面全体を覆うようにしました。

画像を表示

background-imageプロパティに、urlで画像のパスを指定します。

imgタグのsrc属性と同様に、相対パスや絶対パスを記述できます。

See the Pen
responsive 7 by TAKAYOSHI (@lspuwbkv)
on CodePen.

要素の背景画像が表示されましたが、まだ画像が寄りすぎていますね。

画像の表示を調整

背景画像の調整には、いくつかのプロパティが用意されています。

background-position　➡画像の表示位置
background-size　　　➡画像の表示サイズ

今回はこの2つを設定して、画像の表示を調整してみました。

See the Pen
responsive 8 by TAKAYOSHI (@lspuwbkv)
on CodePen.

背景画像のプロパティは他にもありますので、気になった方はこちらの記事もご覧ください。

background-imageを使うと、簡単に画像と文字を重ねることができます。

さらに応用すると、こんな背景画像の出し方もできます。

See the Pen
responsive hero by TAKAYOSHI (@lspuwbkv)
on CodePen.

このようなインパクトのある画像で全体を覆い、その上にコンテンツを重ねるデザインをヒーローイメージと呼び、昨今トレンドのWebデザインスタイルです。

Webデザインの表現の幅が広がると、制作が楽しくなりますね。

ぜひ、みなさんも画像の出し方をマスターして、おしゃれなWebサイトを作ってみてください！

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

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

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

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

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTMLレイアウトで左右分割する方法を現役エンジニアが解説【初心者向け】

HTMLレイアウトで左右分割する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

HTML

HTMLでbrタグの使い方と正しい改行方法を現役エンジニアが解説【初心者向け】

HTMLでbrタグの使い方と正しい改行方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &...

HTML

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。本記事はテックアカデミーのはじめての副業コースのHTMLカリ...

HTML

HTMLで見出しタグと段落タグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLの「見出しタグ」と「段落タグ」について解説します。 ...

HTML

HTMLでpre要素を使って折返し改行する方法を現役エンジニアが解説【初心者向け】

HTMLでpre要素を使って折返し改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでinputタグのradio属性値を使ってラジオボタンを作る方法を現役デザイナーが解説【初心者向け】

ここでは、お問い合わせフォームなどでよく利用されるラジオボタンについて解説していきます。仮に、HTMLの記述方法がわからない場合には、 HTMLの書き方...

HTML

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

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

CSSで多階層のドロップダウンメニューを表示する方法を現役エンジニアが解説【初心者向け】

CSSで多階層のドロップダウンメニューを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介多階層のドロップダウンメニューを表示する方法について詳しく説明していくね！大石ゆかりお願いします！目次ドロップダウンメニューとは多階層のドロップダウンメニューを実装するコードメガドロップダウンメニューを実装する方法ドロップダウンメニューとはページの上部に表示されていて、クリックすると詳細内容が表示できるメニューのことです。コーディング例はこのようになります。 See the Pen Dropdown fin by TAKAYOSHI (@lspuwbkv) on CodePen. 単一のドロップダウンメニューを実装する単一のドロップダウンメニューを実装していきましょう。基本的な形式は以下になります。 See the Pen Dropdown single by TAKAYOSHI (@lspuwbkv) on CodePen. 混乱を避けるため、できるだけシンプルなスタイルで作りました。また、わかりやすくするためにチェックボックスを表示しているものの、最終的には非表示にします。このチェックボックスがポイントです。  <input type="checkbox" id="menu--toggle1" class="menu--toggle">  <label for="menu--toggle1" class="menu--label"> ：省略 </label> input type=checkbox と label に対して、IDを使って紐づけます。また、下記コードでは、タイトル部分をクリックすると、チェックボックスのチェック状態をON/OFFで切り替えることが可能です。 > .menu--toggle:not(:checked){ ~ .menu--dropdownarea{ padding:0; *{ display: none; } } } > .menu--toggle:checked{ ~ .menu--dropdownarea{ /*なにもしない*/ } } チェックボックスのチェック状態に応じて、ドロップダウン項目のスタイルを変更できます。チェックされていない場合は非表示、チェックされている場合は表示の状態です。 [PR] Webデザインで副業する方法とは多階層のドロップダウンメニューを実装するコードここでは、階層を作り、ドロップダウンメニューを実装していきましょう。子要素をクリックすると、さらに項目が出てくるプログラムコードは下記のように記述します。 See the Pen Dropdown child by TAKAYOSHI (@lspuwbkv) on CodePen. さきほどのHTML構成を二重にする形です。 <div class="menu bigmenu">  <input type="checkbox" id="menu--toggle1" class="menu--toggle">  <label for="menu--toggle1" class="menu--label">  <h2 class="menu--label--title">商品情報</h2>  <span class="menu--label--icon"></span> </label>  <div class="menu--dropdownarea"> <div class="menu smallmenu">  <input type="checkbox" id="menu--toggle1-1" class="menu--toggle">  <label for="menu--toggle1-1" class="menu--label">  <h3 class="menu--label--title">セール商品</h3>  <span class="menu--label--icon"></span> </label>  <div class="menu--dropdownarea"> <p>生活家電</p> <p>情報家電</p> <p>美容家電</p> </div> </div> </div> </div> CSSは、子階層のメニューの表示位置を右側に調整します。 .smallmenu{ width: 100%; position: relative; > .menu--dropdownarea{ position: absolute; top:0; width: 100%; left:100%; } } さらに、子メニューを複数配置していきましょう。 See the Pen Dropdown childlen by TAKAYOSHI (@lspuwbkv) on CodePen. 複数配置する場合は、下記のコードでチェックボックスではなく、ラジオボタンにしましょう。  <input type="radio" name="smallmenu1" id="menu--toggle1-no" class="menu--toggle"> メニューに何も表示していない状態を指すラジオボタンを作り、表示中のメニュータイトルをクリックし、非表示状態になるようにラベルをかぶせることが可能です。わかりやすくするために、赤で色をつけているものの、最終的には非表示にします。そして、親メニューも複数にしていきましょう。 See the Pen Dropdown parents by TAKAYOSHI (@lspuwbkv) on CodePen. コンボボックスを使って複数項目を切り替える手法を親メニューにも適用しました。最後に、ボタンとラベルを非表示にすれば、多階層のドロップダウンメニューが完成です。 See the

CSS

WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressでは、記事1つ1つにサムネイル画像（アイキャッチ画像）を設定できます。ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。テックアカデミーマガジンの場合は、このように表示されています。アイキャッチ画像を設定すると、下記のメリットがあります。記事の内容がひと目で分かる記事一覧の画面でわかりやすい記事のクリック率が上昇する SNSなどでシェアされた時に目立つそこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。目次imgタグで画面幅に合わせて画像を表示background-imageで画面全体を覆うHTMLを学習中の方へ大石ゆかり田島メンター！！記事一覧で見た時に記事ごとに画像が表示されていると思うんですけど、あれってどうやって表示するんですか〜？田島悠介アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。大石ゆかりはい、お願いします！ Gutenberg（標準ブロックエディタ）でWordPressのアイキャッチ画像を設定する方法 WordPressバージョン5.0から、標準エディタがブロックエディタ（通称Gutenberg）に変更になっています。ここでは、ブロックエディタでアイキャッチ画像を設定する方法をご説明します。【Gutenberg】アイキャッチ画像の設定エリアを表示する Gutenbergでは、アイキャッチ画像は記事投稿画面でデフォルトで表示されています。アイキャッチ画像の右側の∨マークをクリックすると、∧マークに切り替わり、「アイキャッチ画像の設定」ボタンが表示されます。【Gutenberg】アイキャッチ画像を設定する「アイキャッチ画像の設定」ボタンをクリックします。上部の「ファイルのアップロード」タブをクリックすると、次のような画面が表示されます。「ファイルの選択」ボタンをクリックして、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。これで設定は完了です。設定する画像を間違えた場合には、「画像の置換」ボタンをクリックし、選択し直すことができます。また、「アイキャッチ画像の削除」というテキストリンクをクリックして、設定の削除もできます。設定は右上の「下書き保存」ボタンをクリックするまで保存されませんのでご注意ください。旧エディタ（Classic Editor）でWordPressのアイキャッチ画像を設定する方法 WordPressは5.0から、標準のエディタがブロックエディタ（Gutenberg）になりました。しかし旧バージョンから使用している方は、いままでの旧エディタ（Classic Editor）のほうが使い慣れている方も多いでしょう。 Classic Editorはプラグインとして追加することで、切り替えが可能です。ここでは旧エディタ（Classic Editor）でアイキャッチ画像を設定する方法をご説明します。アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面で表示されていない場合には、以下の手順で表示させてみましょう。投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。すると、投稿画面で表示されるオプションリストが表示されます。その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアができます。これでアイキャッチ画像追加の準備はできました。【旧エディタ】アイキャッチ画像を設定するアイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。投稿画面に、設定したアイキャッチ画像が反映されます。間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除」というテキストリンクをクリックし、またやり直せば大丈夫です。記事を公開し、どのように反映されているかを見てみましょう。これでアイキャッチ画像の設定は完了です。 [PR] Webデザインで副業する方法とはWordPressのアイキャッチ画像が表示されないときの対処法とは大石ゆかり田島メンター！！アイキャッチ画像を設定したんですけど、表示されません…！田島悠介原因はいくつかあるから順番に対処法みていこうか。大石ゆかりお願いします！ここではWordPressのアイキャッチ画像が表示されないときの対処法をご説明します。前述した設定の通りアイキャッチ画像が保存されているのであれば、テーマの設定にアイキャッチ画像の機能を有効化する関数が設定されていない場合が考えられます。オリジナルで作成したテーマなどを利用している場合などにも、functions.phpの設定の有無でアイキャッチ画像は表示されない場合があります。 functions.php /** * アイキャッチ画像の機能を有効化 */ add_theme_support( 'post-thumbnails' ); いままで表示されていたアイキャッチ画像が表示されなくなったような場合は、プラグインの競合が起きている場合がほとんどです。このような場合は、有効化しているプラグインを順番に無効化していきます。これにより、影響をおよぼしているプラグインを特定できます。プラグインが特定できたら、しばらくそのプラグインを無効化して、次のバージョンアップなどで問題が修正されるのを待つのが方法の1つです。または代替できるようなプラグインを探して、そちらに差し替えるなどの方法があります。最後にもう一度各投稿記事を開いて、アイキャッチ画像が正しく設定できているかも確認してみましょう。 WordPressのアイキャッチ画像の最適なサイズとはアイキャッチ画像のサイズは、デフォルトでは「設定」の「メディア設定」の数値で決まります。画像はWordPressにアップロードすると、この設定によりメディアライブラリにオリジナルサイズを加えて指定されたサイズで登録されます。縦横比が上記の設定と違う場合は、以下のように横の長さを基準としてそれぞれの画像サイズで保存されます。この例では、元の画像は横620pxで縦349pxの画像です。この場合、メディア設定の大のサイズ指定よりも小さい画像なので、フルサイズはオリジナルのサイズ、中が横300pxを基準として縦横比で縮小したもの、サムネイルは横150pxを基準として中央で正方形にトリミングした画像です。 4番目の例は、「サムネイルを実寸法にトリミングする」のチェックマークをオフにした場合の画像です。この場合は、サムネイルは同じ縦横比を保ったまま縮小されます。固定または投稿ページに画像ブロックで配置した画像のサイズは、右側のプルダウンメニューから選択できます。アイキャッチ画像はSNSのOGP画像としても使われることも多いので、最適なサイズは横1200px × 縦630pxとされています。様々なSNSでの画像の表示を確認したい場合は、以下のサイトなどを利用すると便利です。 OGP画像シミュレータまとめ：アイキャッチ画像を設定して魅力的なサイトを作ろう標準のブロックエディタ、旧エディタでのアイキャッチ画像の設定方法、アイキャッチ画像が表示されない場合の対処方法、最適なアイキャッチ画像のサイズと設定や確認方法をご紹介しました。アイキャッチ画像はこのように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。大石ゆかりアイキャッチ画像があると、記事のイメージがつかめていいですね♪ 田島悠介そうだね。　アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね！大石ゆかりはい、分かりました！ WordPressを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WordPress

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

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。うまく画像をつかって、おしゃれなWebページを作ってくださいね。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次imgタグで画面幅に合わせて画像を表示background-imageで画面全体を覆うHTMLを学習中の方へそもそも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] Webデザインで副業する方法とは【応用】画像の表示スタイルを調整する画像の表示スタイルは、imgタグにCSSを指定して調整していきます。 ※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。画像の大きさを調整する imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。 img.image1{

HTML

HTMLの折りたたみメニューを有効活用する方法を現役エンジニアが解説【初心者向け】

折りたためるメニュー、通称アコーディオンメニューはWebページに必須のパーツです。おしゃれなメニューを効果的に活用したいですよね。アコーディオンメニューの作り方がよくわからない、うまく作れないという方に、この記事ではHTMLでアコーディオンメニューを作り、有効活用する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次imgタグで画面幅に合わせて画像を表示background-imageで画面全体を覆うHTMLを学習中の方へそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLと折りたたみメニュー（アコーディオンメニュー）について詳しく説明していくね！大石ゆかりお願いします！ HTML5でアコーディオンメニューを作る方法 HTML5では、detailsタグとsummaryタグを使って、アコーディオンメニューを簡単に作ることができます。 See the Pen Accordion by TAKAYOSHI (@lspuwbkv) on CodePen. 2010年代は、inputタグとCSS3アニメでアコーディオンメニューを作っていました。まず、inputタグのチェックボックスを透明にし、onとoffを切り替えるスイッチを作成します。そのonとoffをCSSでセレクトし、アニメで切り替えていく手法です。見えないinputタグを複雑に活用するため、難しいテクニックでした。しかし現在、HTML5のdetailsタグとsummaryタグを使って簡単に作れるようになりました。 2021年10月現在、Chrome、Edge、FireFox、Safariがdetailsとsummaryをサポート (Can I Use)。 IEではサポートされていませんので注意してくださいね。それでは詳しく解説していきます。 detailsタグとsummaryタグ detailsタグとsummaryタグは折りたたみ要素、つまりアコーディオンメニューを作るためのタグです。 <details>タグの中に<summary>タグで囲った常に見える要素と、折りたたむ要素を並べて記述してください。 See the Pen detail by TAKAYOSHI (@lspuwbkv) on CodePen. これだけで、シンプルなアコーディオンメニューとして表示されます。 detailsタグやsummaryタグをCSSで装飾すると、おしゃれなアコーディオンメニューになるんですね。 See the Pen detail 2 by TAKAYOSHI (@lspuwbkv) on CodePen. アコーディオンの折りたたみ状態に応じたCSS アコーディオンを開く閉じるに応じて、デザインを変えたいことがあります。その時は、detailsタグの[open]セレクタで、開いた状態をセレクトしましょう。 details[open] { /* アコーディオンが開いている状態のCSS */ } summaryなどの子要素を装飾したい場合は、子孫セレクタでつなげます。 details[open] summary{ /* アコーディオンが開いている状態のCSS */ } このテクニックを使って、開閉するとメニューの色が変わるようにしたサンプルです。 See the Pen detail 3 by TAKAYOSHI (@lspuwbkv) on CodePen. CSSアニメーションでアコーディオン次に、開閉によるデザインの違いをアニメーションにしていきましょう。変化に時間をかけることで、アニメーションを表現するtransitionプロパティを使います。 details summary{ /* 変化に0.5秒かけるアニメーション*/ transition: 0.5s; } すると、デザインの変化が滑らかにアニメーションします。 See the Pen

HTML

ヒーローイメージで印象を大きく変える10のデザイン事例

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UI/UXデザイナーのNick Babich氏によって投稿されました。あなたのWebページを訪問したユーザーは、何らかの反応を示すでしょう。ユーザーの反応は、肯定的であれ否定的であれ、大部分は彼らが何を見るかによって決定されます。視覚はおそらく人間の最も優れた感覚であるため、ヒーローイメージは、ユーザーの関心を引く最も手っ取り早い方法の1つといえます。大胆で、グラフィックを使用した、メッセージ性の強い画像は、ユーザーの関心を引きます。ヒーローイメージすぐにユーザーを惹き込み、ミニマリストデザインのアプリやWebサイトにおいて完璧な中心的存在となるでしょう。ヒーローイメージは単なる美しい画像以上の存在です。それは強力なコミュニケーションツールです。この記事では、ヒーローイメージの使用に関するヒントをいくつか紹介します。 1. Webサイトの内容と関連性を持たせるヒーローイメージは導入として考えてください。ヒーローイメージはユーザーに、Webサイトの他の部分に何を期待できるかを連想させるものです。ヒーローイメージの目的は、あなたのWebサイトが何であるか、また伝えたいアイデアは何であるかを、瞬時に訪問者に伝えます。ヒーローイメージがWebサイトのコンテンツの意図を上手く伝えていない場合、ユーザーに役立つものにはなりません。かえって画面上の貴重なスペースを無駄に使い、ときには混乱の原因にさえなります。画像がブランドや製品に対する先入観に合わないと、ユーザーは混乱します。悪い画像選択の代表的な例、誰もがこの画像（上記参照）が銀行ローンに関連することに気づくとは限りません。画像選びは妥協してはいけません。あなたが創造しようとしているキャンペーン、テーマ、目的に合うものを選んでください。上記のLunet Eyewearのヒーローイメージを見てください。Webサイトのメッセージを明確に伝えています。画像のコンテンツはブランドを表しているのです。製品の宣伝または販売のためにWebサイトを使用している場合、ヒーローイメージの利点を活かすことができるはずです。製品のコンテクストに合うヒーローイメージを使用してください。そして、製品の外観だけでなく、実際の設定で製品がどのように機能するかを示しましょう。製品を販売する最良の方法は、商品それ自身に販売させることです。ヒーローイメージは製品のメリットのデモを行うことができます。デジタル製品やサービスについても同様です。互換性のあるデバイス上でのスクリーンショットのモックアップを作成し、あなたのアプリやサービスの使用感を人々に伝えましょう。 Slackは、ヒーローイメージとしてアプリのインターフェースを採用しています。もちろん、ヒーローイメージのデザインと選択は難しいことです。そこで、Angie Schottmuller氏はヒーローイメージの判断基準として、7つのポイントで構成されるフレームワークを作成しました。キーワードの関連性画像はターゲットキーワードを視覚化できているでしょうか？目的の明確さ画像はWebサイトのメッセージを明確に伝えていますか？デザインのサポート画像は行動喚起（Call To Action）を促すためにページフローをシームレスにサポートしていますか？信頼性画像はあなたのブランドを信頼感のあるものとして表現していますか？付加価値画像は関連性を高めたり、ユーザーにとってのメリットを示していますか？望みの感情イメージは、あなたがユーザーに望むアクションを引き起こさせる感情を描写していますか？主人公としての顧客顧客は製品を購入したら主人公になれるということを描写していますか？ 2. 画像を中心的存在にするヒーローイメージは、少ない情報を伝えるには完璧な環境です。はっきりと目立つものがよいでしょう。ユーザーはWebサイトに訪問する度に立ち止まって眺めることになるでしょう。しかし、画像ですべてを伝える必要があるという意味ではありません。むしろ画像は、関連性を持たせた方法で、メッセージを視覚的に強化することが必要なのです。 [PR] Webデザインで副業する方法とは3. 感情的に説得力のある画像を選択するデザインにも感情を組み込むべきです。感情的な影響を与え、インスピレーションを生み出し、あなたがユーザーに望む感情を高めるような画像を選択するべきです。結局のところ、人々が重要な意思決定をするときに、しばしば感情は理性を上回ります。肯定的な感情を刺激することによって、ユーザーとのつながりを構築することができます。 4. 読み込みとレンダリングは可能な限り早くするヒーローイメージは重要な設計要素なので、素早くレンダリングする必要があります。残念なことにヒーローイメージの多くのデザインは、HID（ヒーローイメージ遅延）という現象に悩まされています。これは主に、スクリプトやCSSのスタイルシートによって読み込みがブロックされることが原因です。デザイナーは、ヒーローイメージがいつ表示されるかに焦点を当てる必要があります。しかし、これは想像以上に厄介です。モダンブラウザでは、いつコンテンツが表示可能になるかを知るためのフックがありません。 1つの簡単な例は「インラインスクリプトタイマー」であり、これは時間を記録し、imgタグの直後に置かれるものです。コードは次のようになります。 <img src="hero.jpg" onload="performance.mark('hero1')"> <script>performance.mark('hero2')</script> このコードはUser Timing APIを利用しており、Steve氏の作成したテストページでどのように動作するかを見ることができます。 5. 高解像度の画像を使用する画像は、ピクセル化（画像が粗くなり個々の画素が見えること）したりぼやけて表示されるべきではありません。低画質の画像ほど悪いものはありません。ヒーローイメージは、画像がすべてであり、第一印象が重要になります。そのため高画質の画像を使用しましょう。重要なヒーローイメージの場合、要素とsrcset属性やsizes属性を使用して、さまざまな画像のバリエーションを提供することが重要です。低画質の画像 vs. 適正にサイズ調整された画像 6. 異なる画面サイズを考慮する画像は、ディスプレイやプラットフォームに合わせて適切なサイズにしてください。すべてのデバイスに合わせて画像を最適化します。これは、小さなデバイスでは、大きな画像をサイズ変更（リサイズ）またはより小さな画像と交換することです。レスポンシブデザインのWebサイトの開発者は、たとえモダンなWebサイトの場合でも、さまざまなデバイスに合う最適な画像解像度を選択することに苦労します。すべての画面解像度とデバイスに対して、1つの画像では足りないことは明らかです。Webサイトは、すべての異なるデバイスにおいて、またすべての異なる解像度、ピクセル密度、向きにおいて完璧に表示されるように適応しなければなりません。レスポンシブWebサイトを構築する際、開発者が直面する主な課題の1つは、メディア（特に画像）の管理、操作、配信です。幸い、この問題の解決策があります。レスポンシブブレークポイントジェネレーターは、画像のブレークポイントをインタラクティブに生成するのに役立つ、無料のオープンソースのWebツールです。レスポンスブレークポイントジェネレーターは、複数のサイズの画像を管理するのに役立ち、レスポンシブデザイン画像のブレークポイントをインタラクティブに生成できます。 7. 行動喚起（Call To Action）を強調するデザインの主役はヒーローイメージにするとしても、行動喚起（Call To Action、以降CTA）などの要素も含める必要があります。ただし、CTAはヒーローイメージと競合させるべきではありません。色は強調のために非常に重要です。CTAのボタンは他の要素よりも明るい色で目立つようにするべきです。 CTAのボタンの視覚的な重みは、ヒーローイメージと均斉がとれるようにしましょう。ぼかし効果を行動喚起（CTA）にテストするぼかし効果を使用して、ページの視覚的階層をテストしましょう。ぼかし効果のテストは、ユーザーの視線が本当にあなたの思惑通りに移動するかを実験する手助けとなる、簡単なテクニックです。必要な手順は、Webサイトのスクリーンショットを撮り、Adobe XDでオブジェクトのぼかし効果を適用することです。例として、以下のCharity WaterのWebページを見てください。ページのぼやけたバージョンでは、どの要素が目立っているように見えますか？その印象をあなたが気に入らなければ、戻って修正しましょう。ぼかし効果のテストは、デザインの焦点と視覚的階層を明らかにするテクニックです。 8. コントラストをデザインする画像の上にあるタイポグラフィが読みやすいか確認してください。太文字で読みやすくて画像と調和する、しかし画像から独立して目立つようなタイプフェイスを選択してください。画像の上にテキストを配置する予定の場合、画像の主要部分が見えて、認識可能であることを確認してください。オーバーレイおそらく最も簡単な方法は、シンプルなテキストを画像の上に直接置くことです。ただし、テキストと画像のコントラストが十分でない場合は、画像全体に半透明色のオーバーレイを加えると効果的です。 Outlinesは、カラーオーバーレイを使用しています。ブランドカラーを使用すれば、ヒーローイメージを向上させることができます。既存の製品やブランドのデザインをしている場合は、特定の色がすでにそれらに関連付けられている可能性が高いでしょう。原色を特定し、それを画像の前面に表示してみましょう。 Cliqueのヒーローイメージは、アプリの青いインターフェースの色調と合っています。スクリム（scrim）あるいは、スクリムを使用してテキストにコントラストを追加することもできます。スクリムは、オーバーレイされたテキストをより読みやすく柔らかい印象にするために使用される、半透明のレイヤーです。不透明度の値はコンテキストに依存します。デザインに応じてグラデーションの不透明度を選択します。一部のヒーローイメージには、以下に表示される画像のように暗めの60％のグラデーションが必要です。 9. 実際の人物画像を使用する人物画像を使用することは、ユーザーの関心を引くのに非常に効果的な方法です。私たち人間は、人物の顔を見ると彼らとつながっているように感じ、単に商品を買っているような気分にはなりません。しかし多くの企業のWebサイトで、「信頼を築く」ための偽善的な印象の人物画像が使用されていることは、残念です。ユーザビリティテストでは、純粋に装飾的な画像（以下に示すような）がデザインに価値付加を与えることは滅多になく、ユーザー体験を向上させるというより、むしろ逆効果であると示されています。したがって、笑顔で無難な印象のビジネスパーソンの画像を理由もなく使用するのは避けてください。不自然な画像は、浅はかで偽善的な印象をユーザに残します。実践上役に立つルールは、あなたのアプリやWebサイトのキャラクターのイメージに合う人物の高品質の画像を使用することです。画像は、商品、企業文化の本物を表現したものでなければなりません。以下にいくつかのヒントがあります。混雑したショットの画像は避けてください。主役となる被写体が1つの写真を使用します。本物のストーリー性を持つ画像を追求してください。興味深い活動をしている人々の写真を撮ってください。製品がある場合、人々がその製品を使用している写真を撮ることも検討してください。 10. ヒューマンタッチな（人間的な触れ合いの感じられる）イラストヒーローイメージは単なるビジュアルです。あらゆる種類の画像を利用することができます。イラストは人気の高い選択肢になりつつあり、時には写真よりも個性豊かな表現が可能です。イラストは、画像のコンテンツとテクニックによる詳細なデザインの両方を、より制御できます。ユニークなイラストを使用すると、他のサービスと差別化され、より良いブランドの知名度を高めることができるでしょう。 Dropboxは、簡単に理解できるイラストを使用してメッセージを明確に示し、複雑なアイデアを伝えます。イラストは想像力に訴えかけ、見る人との間に強いつながりを確立します。イラストが機能するためには、容易に認識可能なものでなければならず、それが伝える情報は見る人が異なるとしても同じ様に解釈されるものでなければならないのです。複数のイラストを使用する場合、一貫性がなければなりません。ソースが同じであるように、つまり同じ人がイラストを描いたように、見えるようにしましょう。結論クオリティが高く、見るのが楽しく、コンテンツと上手く機能する限り、ヒーローイメージは素晴らしい選択肢です。この技巧を最大限に活用するには、十分なコントラストとCTAのある設計にしましょう。また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。独学に限界を感じている場合はご検討ください。

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLで画像を画面サイズに合わせて表示する方法を現役デザイナーが解説【初心者向け】