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でアクセスからスマホ判定して動作を替える方法を現役デザイナーが解説【初心者向け】

HTMLでアクセスからスマホ判定して動作を替える方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

HTML

HTMLで画像サイズを縮小する方法を現役エンジニアが解説【初心者向け】

HTMLで画像サイズを縮小する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次 HT...

HTML

HTMLのキャッシュを無効にする方法を現役エンジニアが解説【初心者向け】

HTMLのキャッシュを無効にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも...

HTML

HTMLでspan要素で囲った部分を改行する方法を現役デザイナーが解説【初心者向け】

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

HTML

HTMLで改行でずれるレイアウトの原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで改行でずれるレイアウトの原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

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

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

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ページを作ってくださいね。目次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

Pythonで画像をリサイズする方法を現役エンジニアが解説【初心者向け】

Pythonで画像をリサイズする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonで画像をリサイズする方法について詳しく説明していくね！大石ゆかりお願いします！目次画像のリサイズとは Pillowとは Pillowを利用して画像をリサイズする方法実際に書いてみようまとめ監修してくれたメンター画像のリサイズとは画像のリサイズとは、画像のサイズを元の大きさから変更することです。例えばブログやSNSに写真をアップする際に画像サイズを大きくしたいときがあるでしょう。また、画像を他者にメールで送る際に画像サイズを小さくしたいときもあるかもしれません。このように、テクノロジーが発達した社会ではプライベートや仕事の様々な場面で日常的に画像のリサイズが行われています。 [PR] Webデザインで副業する学習方法を動画で公開中画像ライブラリ、Pillowとは PillowとはPythonで画像を扱うためのライブラリです。Pillowを使えば、画像の読み込みカラー画像からモノクロ画像への変換画像の保存回転リサイズなど実に様々な処理ができます。画像の枚数が数枚であれば手作業で処理してしまっても問題ないかと思いますが、画像の枚数が多い時にはPillowを使って画像を処理していくと作業の効率化ができて良いでしょう。 Pillowを利用して画像をリサイズする方法 Pillowで画像をリサイズするのは非常に簡単です。リサイズにはPillowのImageモジュールにあるresize()という関数を用います。引数には (画像の横サイズ, 画像の縦サイズ) という形でタプルを指定します。実際に書いてみようまずコードの概要を概要を以下に示します。必要なライブラリをインポート画像を読み込む画像を表示画像のリサイズリサイズした画像を表示リサイズした画像を保存それでは実際にコードを書いてみましょう。今回の例では.jpgの画像を用いていますが、拡張子は.pngでも問題ありません。 from PIL import Image import matplotlib.pyplot as plt %matplotlib inline #画像の読み込み beautiful_view = Image.open("view.jpg") #画像を表示して確認 plt.imshow(beautiful_view) #画像のリサイズ small_beautiful_view = beautiful_view.resize((2000, 3000)) #リサイズした画像を表示して確認 plt.imshow(small_beautiful_view) #リサイズした画像を名前をつけて保存 small_beautiful_view.save("small_view.jpg") リサイズした結果は以下のようになります。また、フォルダ内を確認してみると確かにリサイズした結果が保存されていることがわかります。まとめこの記事ではPillowで画像をリサイズする方法についてご紹介しました。画像の編集は多くの方にとって身近な作業であると思います。是非Pillowを使いこなし、業務の効率化を図ってください。監修してくれたメンター柴山真沙希（しばやままさき）大手IT企業などでエンジニアとして2年ほど勤務した後、個人事業主としてプログラミングスクール「エンペサール」を経営。子供から大人まで幅広い層を対象にプログラミングを教えている。得意言語はPython, HTML, CSSで、機械学習やデータ分析、スクレイピングなどが得意。サッカー観戦や読書が趣味である。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

Python

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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