Это видео недоступно.
Сожалеем об этом.

【HTML入門】#14 .画像を表す要素

Поделиться
HTML-код
  • Опубликовано: 6 июн 2018
  • 本気で学ぶHTML入門講座14回目は、
    画像を表示するimg要素についてです。
    ●公式サイトで見る
    creatorquest.jp/lessons/html/...
    ■目次
    ・概要と目標 0:15
    ・画像を表示する要素 0:40
    ・画像を表示してみよう 4: 55
    ・画像にリンクを指定してみよう 8:21
    ・画像のサイズを変更してみよう 9:53
    ・練習問題 12:55
    ・解答 14:28
    ・まとめ 19:21
    ■img要素
    img要素は、画像を表示するための要素です。
    img要素は、src属性で表示したい画像ファイルのパスを指定します。
    また、alt属性を使って代替えテキストを利用することで、
    画像が表示できない時に変わりに表示するテキストを指定できます。
    なお、この音声ソフトによってはこのalt属性に指定されているテキストを読み上げてくれます。
    ■画像にリンクを設定する
    画像にリンクを設定する場合は、
    img要素を、aタグで挟むことで実現できます。
    ■画像のサイズを変更する
    img要素にwidth属性やheight属性を使えば、
    画像の表示サイズを変更できます。
    ただ、通信しているファイル容量は変わりません。
    ■本気で学ぶ!HTML入門講座
    • 本気で学ぶ!HTML入門講座
    素材
    ・CV:さとうささら(CeVIO)
    cevio.jp/
    ・CV:タカハシ(CeVIO)
    cevio.jp/
    ・BGM:甘茶の音楽工房
    amachamusic.chagasi.com/

Комментарии • 42

  • @user-mx2kh5od9g
    @user-mx2kh5od9g 6 лет назад +14

    いつもありがとうございます。この動画は私にとってとても助かるのでこれからも動画投稿お願いします。

    • @CreatorQuest
      @CreatorQuest  6 лет назад +4

      ありがとうございます。
      これからも頑張ります。

  • @YM-bv1ll
    @YM-bv1ll 6 лет назад +8

    動画全部とても参考になってます。これからCSSなどもやるのかな?

    • @CreatorQuest
      @CreatorQuest  6 лет назад +13

      少しでもお役に立ててよかってです。
      CSSやJavaScriptなどもやるつもりです。

    • @YM-bv1ll
      @YM-bv1ll 6 лет назад +7

      編集大変そうですが、とてもわかりやすいです。応援してます。頑張ってください。

  • @user-lr3zk3ct5p
    @user-lr3zk3ct5p 3 года назад +1

    scrでやらかしてて、2日無駄にしちまっつぁああw
    でも解決してすっきりんちょ

  • @user-zz5iz6of1w
    @user-zz5iz6of1w 4 года назад +4

    わかりやす動画ありがとうございます!
    質問なのですがピクセル指定にはpxはいらないのでしょうか?

    • @CreatorQuest
      @CreatorQuest  4 года назад +7

      imgタグのwidth属性やhight属性にはpxはいらないです。

    • @user-zz5iz6of1w
      @user-zz5iz6of1w 4 года назад +1

      @@CreatorQuest そうなんですね!
      早急な返信ありがとうございます!

  • @panchi2645
    @panchi2645 3 года назад

    自分の作ったゲームを載せる場合ってどうやってやるか分かりますか?(ブラウザゲームみたいな)

  • @user-ou2ny7rl2d
    @user-ou2ny7rl2d 4 года назад +2

    クリエイタークエストさんにはいつもお世話になっています。
    pcでレッスンのHTML入門講座をやっていたのですが、チャプター30での画像の拡張子の指示がjpgとなっていて試したところ表示が上手くいきませんでした。そこはpngで表示できましたが、pngで問題ないと言う事でしょうか?始めたばかりなので、いい加減なことを言っているかもしれませんが答えてもらえると助かります。

    • @CreatorQuest
      @CreatorQuest  4 года назад

      すいません!!こちらのミスです。
      画像のファイルの拡張子に合わせてもらって大丈夫です。

    • @user-ou2ny7rl2d
      @user-ou2ny7rl2d 4 года назад

      CreatorQuest 確認ありがとうございました!

  • @ghostcherry2548
    @ghostcherry2548 4 года назад

    コメント失礼します。
    WindowsにてBracketsを使用し、imagesフォルダーを自分で作成しそこにpngファイルを保存し、下記内容でプログラムを組んでみたのですがうまく画像が表示されません。




    可能性として考えられることをご教授いただけると幸いです。

    • @CreatorQuest
      @CreatorQuest  4 года назад +1

      画像がちゃんとあるのでしたら、綴りか相対パスのどちらかが違うと思います。

  • @haruudon
    @haruudon 5 лет назад

    質問があるのですが、何かの文字または画像をクリックした際に(MacだったらFinder Windowsだったらエクスプローラー)が開かれ、画像ファイルをクリックしてサイト状に貼るといったことはできないのでしょうか
    ===================================
    図1↓
            開く       「開く」をクリック
    画像1               画像を選択(画像2)
    ===================================
    図2↓     
            開く       画像が「画像1」から「画像2」に変化
    画像2
    ===================================
    といった内容のことをHTMLで作りたい際、どうすればよいでしょう

    • @CreatorQuest
      @CreatorQuest  5 лет назад

      図の部分が見れないのであれですが、画像のアップローダーのようなものですか?
      もしそうであれば、それはinput要素で作ります。
      違う場合は、もしよろしければ、@Hiro_Shiva宛に図の画像を付けてツイートして頂ければと思います。

  • @user-dn2uf2hl9e
    @user-dn2uf2hl9e 2 года назад

    とても丁寧で一からの私にもなんとかついてっています。
    質問ですが19:04の最後のところで、【ホーム】のページが開きません。
    参照のindex.HTMLの指定がおかしくないですか?何度やってもダメ何で質問させて頂きました。

    • @CreatorQuest
      @CreatorQuest  2 года назад

      index.htmlというファイルから自分自身へのリンクなので、自ファイル名をそのまま記述すればリンクは成立します。他にも「./」と書いて現在のフォルダにリンクを先を指定しても、基本はindex.htmlが選択されるので問題ありません。

    • @user-dn2uf2hl9e
      @user-dn2uf2hl9e 2 года назад

      @@CreatorQuest さん
      ありがとうごさいます❗️
      とてもよくわかりました。

  • @user-cb1mz8lg4v
    @user-cb1mz8lg4v 4 года назад +4

    画像を入れることができません😭インターネット上にあるような写真をいれることはできるのですが、自分のフォルダ内にある写真を表示することができません‼どうしたらよいでしょうか?階層は一緒の時も、相対パスの時も試してみたのですが、、、

    • @CreatorQuest
      @CreatorQuest  4 года назад

      多くの場合は相対パスが違っている、綴りが間違っているというケースが多いです。
      あとは、画像の拡張子は適切かとかですかね。

    • @user-cb1mz8lg4v
      @user-cb1mz8lg4v 4 года назад

      @@CreatorQuest 返信ありがとうございます😭
      綴りは間違ってないみたいですし、コピペしても画像表示されません(゚ω゚;)
      とりあえず後々解決するかもと思って先に進みましたが自分のファイルにあるものにlinkする系のみ上手く行かないので相対パスが出来てないんだと思います😭
      でもこればっかりは実際見ないと何が間違ってるか分かりませんよね…根気強く考えたりプログラミングできる人探して教えてもらおうかと思います😭ほんとに親切にありがとうございます🙇

    • @user-cb1mz8lg4v
      @user-cb1mz8lg4v 4 года назад

      @@CreatorQuest あ、拡張子は.pngにしてます‼

  • @user-qz2dt1be3j
    @user-qz2dt1be3j 6 лет назад +3

    HTMLで作ったファイルを公開する方法が知りたいです。

    • @CreatorQuest
      @CreatorQuest  6 лет назад +6

      これは、別の講座で紹介しようと思ってるのですが、公開するにはWebサーバが必要になります。
      Webサーバは、一般的にはホスティング会社からレンタルします。
      そしてその、レンタルサーバ内の公開フォルダ内に、HTMLを保存すると公開されます。
      ただ少々インターネットの仕組み(FTPや、ドメインなど)について理解しておく必要があるので、
      そのあたりを含め、別の講座で紹介する予定です。

  • @user-tz6wb3qu2y
    @user-tz6wb3qu2y 4 года назад +6

    17:07

  • @user-sn8vi7rb6s
    @user-sn8vi7rb6s 4 года назад

    その いつも使ってるchapterは 僕もインストールできるんですか? 最初からいつもつくってるんですが

    • @user-bb8jg9rw7j
      @user-bb8jg9rw7j 4 года назад

      概要欄の公式サイトの教材をダウンロード
      一回目の動画で説明してるから俺の説明で分からないなら見ればいいとおも

  • @user-ng7wb6rq6u
    @user-ng7wb6rq6u 4 года назад +1

    画像の大きさの変更はcssをつかわないんてすか?

    • @CreatorQuest
      @CreatorQuest  4 года назад

      ここではHTMLにフォーカスして、img要素で使える属性を紹介しているのですが、もちろんCSSで変更することも可能です。

  • @pan3524
    @pan3524 2 года назад

    質問です。
    うまく画像がを入れられません。
    入れたい画像はこのデバイスのスクリーンショットにあるのですが
    どうしたらうまく挿入できますか?windows10です。

    • @pan3524
      @pan3524 2 года назад

      だれか教えてくれませんか?

    • @CreatorQuest
      @CreatorQuest  2 года назад

      @@pan3524 画像を挿入したいHTMLファイルと同じフォルダ内に画像を一度移動し、HTMLファイルからみた相対パスを指定してもらえたらと表示されると思います

    • @pan3524
      @pan3524 2 года назад

      @@CreatorQuest ありがとうございます。
      うまく表示させることができました。

  • @flexdumb7504
    @flexdumb7504 4 года назад +3

    IMG_(数字).JPGの画像を挿入したいときどうしたら良いんですか?

    • @CreatorQuest
      @CreatorQuest  4 года назад

      そのまま指定して下さい

    • @flexdumb7504
      @flexdumb7504 4 года назад

      CreatorQuest ありがとございます

  • @user-tk5ep8iv3z
    @user-tk5ep8iv3z 3 года назад

    天月はHTMLはできない

  • @oneng2339
    @oneng2339 3 года назад

    1.5倍速以上にしたら面白いことを知ったwww

  • @user-uy5xf3hs9r
    @user-uy5xf3hs9r 4 года назад +3

    生徒と同じミスしてた。scrって書いてたw