HTML&CSS基礎編 #5 HTMLでホームページに画像を表示させてみよう！画像の高さや幅の調整方法も説明します。 HTML初心者向け講座
HTML-код
- Опубликовано: 8 сен 2024
- ★☆★☆★☆今なら500円クーポンもらえる☆★☆★☆★
【ひらくと一緒に勉強しませんか？】
チャットで質問、ビデオ通話でレクチャー
ひらくと一緒にプログラミング学習を加速させていきましょう！
MENTAで500円クーポンがもらえます(^^)
詳細は以下のURLから
menta.work/inv...
ひらくのプログラミング教室 第5回
今回はHTMLでホームページに画像を表示させていきます。
・HTMLで画像の挿入
・alt属性について
・画像の幅と高さを調節
・パスについて
丁寧に説明しました。
★チャンネル登録はこちら
/ @hiraku-program
動画を見て分からないことがあればコメント欄で質問ください。
確認後ご返信します。
ひとつ前の動画→第4回はこちら
• HTML&CSS基礎編 #4 HTMLで文字...
次の動画→第6回はこちら
• HTML&CSS基礎編 #6 HTMLでホー...
Twitter→たまにつぶやきます(笑)
/ hilarkjp
★再生リスト
・HTML&CSS基礎編
• HTML&CSS基礎編
・HTML&CSS補足編
• HTML&CSS補足編
・CSSアニメーション入門
• CSSアニメーション #1 transiti...
・テキストエディタの使い方
• テキストエディタVScodeの使い方
・javascript入門
• Javascript入門編
・javascript実践
• javascript実践編
・jQuery入門
• jQuery入門
・PHP入門
• PHP入門 #1 プログラミング言語PHPと...
・python入門
• python入門
・パソコンハウツー
• パソコンのハウツー
前回のコードの続きというのが非常に学びやすいです。
ありがとうございます！
毎度最初からだと時間かかりますし、続けて行った方が分かりやすいかなと思って、こんな感じにしてみました！
数日前からプログラミング学習を始めたばかりの初心者で、元々pc操作に疎かったので観ながら学習させてもらっています。
つまづく→コメント→粘ってコメント消すを繰り返しながらやっています💦💦
これからも参考にさせていただきます！
本当にわかりやすくて助かりました🤤ありがとうございます🥺
ご視聴＆コメントありがとうございます(^^)
これからもよろしくお願いします！
とても分かりやすかったですありがとうございます😭
こちらこそご視聴＆コメントありがとうございます(^^)
これからもよろしくお願いします＼(^o^)／
いつも分かりやすい説明ありがとうございます...!!
ご視聴andコメントありがとうございます！
今後ともよろしくお願いします☺️
最近プログラミングを始めて画像が出せなくて数日困っていましたが、
拝見させていただきすんなり表示させる事が出来ました。
ここ数日の時間を返してほしいくらいです。
大変勉強になりました。
チャンネル登録しましたので、以後拝見させていただきます。
ありがとうございました。
動画のご視聴＆コメントありがとうございます(^^)
悩みを解決していただいたようで嬉しく思います！
これからもよろしくお願いします！！
難しくとらえていたけど、いざやってみると簡単で拍子抜けした！
ご視聴＆コメントありがとうございます(^^)
他の動画もよろしくお願いします！
分かりやすい説明ありがとうございます。画像の挿入、表示ができません。画像を用意するまでの手順を教えてください。画像を保管するフォルダ、ファイルの作成などが必要ではないのでしょうか。
ご視聴＆コメントありがとうございます♪
この動画の1分くらいから画像の挿入、配置についてちょうど説明しておりますので、動画の通りに一度やってみてください。
画像は最初はなんでも良いので、スマホなどで撮影してパソコンに移動させて使いましょう！
よろしくお願いします。
画像の位置を上や下にずらしたい場合はどうしていますでしょうか？
margin: top margin: bottomでいちいち下や上にずらしています。
ご視聴＆コメントありがとうございます(^^)
画像をどのように配置するのか、周りのレイアウトによっても位置の変え方は変わってくるとは思いますが、基本的にはmarginなど余白を使って移動させることが多いと思います。
よろしくお願いします！
わかりやすい動画ありがとうございます
HTMLで作成した画像付き文章をPCからicloud driveにドロップしたら画像の部分だけ白バケしてしまいました。
画像が見えるようにするにはどうすれば良いでしょうか？
ブラウザでは確認できるのに不思議です
ご視聴＆コメントありがとうございます(^^)
iCloud driveを使ったことがないので分からないのですが、htmlファイルと一緒に画像もアップしてますでしょうか？
また、HTMLファイルと画像の位置関係は大事です。
一度確認してみてください。
数日前から視聴しています。分かりやすい説明ありがとうございますm(_ _)m
altの画像説明ですが、文字が出ないのでググってみると、出なくても大丈夫と出てましたが、大丈夫ですか？
ご視聴＆コメントありがとうございます(^^)
文字は出なくて大丈夫です（ブラウザの仕様に変更があったみたいです）。でもコードの中ではaltに画像の説明は入れるようにしたほうが良いと思います！
これからもよろしくお願いします♪
返信ありがとうございますm(_ _)m新しい事を覚えては1から戻って復習をするとどんどんわかってきます(^^)これからも視聴しますので宜しくお願いしますm(_ _)m
スミマセン回答ありがとうございましたm(_ _)mでしたm(_ _)mこれからもaltは入れたいと思います(^^)
ありがとうございます☺️
これからもよろしくお願いします！
Vs Codeではなく、Bracketsde作成した場合でも、画像の高さ、幅を同様に調整できますでしょうか？
ご視聴＆コメントありがとうございます☺️
テキストエディタはVScodeでなくても問題なく動作します。
よろしくお願いします！
動画ありがとうございます。言われたとおりにやっているのですが、jpgの自分で撮った写真を入れたのですが、大きいままです。またaltの説明も画像の下に
alt=”桜" width="360px">
と出てきます。なぜできないのかわかりますか？
動画のご視聴&コメントありがとうございます(^^)
おそらくですが、コードの記載にミスがあると思います。
で一回タグを書き終えたりしていませんかね？
画像の下に表示されている「alt=”桜" width="360px">」が文字として認識されているのだと思います。一度確認してみてください(^^)
よろしくお願いします。
ありがとうございました。できました。
実は大学の情報の課題で、メモ帳でウェブサイト作成がありまして。
ワラにもすがる思いで、こちらの動画を1から見ております。この先、またつまづきましたら、コメントにて質問することもあると思いますが、そのときはよろしくお願いします。
とても簡単そうに操作していらっしゃいますが、自分がやると、思わぬところでつまづき、進まなくなります。すべて文字で入れるのって難しいですね。
次の動画も頑張ってやってみます。先は長い
課題でやるのですね、、なかなか大変かなと感じますが頑張ってください！
メモ帳というのもなかなかキツイと思います^^;
せめてテキストエディタが使えれば少しは楽な気がしますが、分からないところあればまたコメントください(^^)
1年後から失礼します。
画像を表示の際に、動画ではフォルダの中の写真を保存して表示させていましたが、僕はそれだと表示されなかったので、ファイルに入れず、デスクトップ上に、画像を置いていたら、表示されました。どういうことでしょうか。
ご視聴＆コメントありがとうございます！！
画像ですがsrc属性の中確認いただけると良いかなと思います。
src="ここに画像の場所とファイル名"
となるのですが、
img/sample.jpg
の場合、imgというフォルダの中のsample.jpgという画像ファイルという意味になります。
このimg/という部分が抜けていたり、フォルダ名と違っていたりしないでしょうか？
よろしくお願いします！
@@hiraku-program できました！ありがとうございます😊
同じように画像を挿入しても表示されません。どうすればよろしいでしょうか
ご視聴andコメントありがとうございます！
おそらく誤字脱字かと思います。。
動画の通りに書いていただけると同じように表示されるはずですので、
一度確認してみてください！
よろしくお願いします！
画像はjpgじゃダメですか？
ご視聴andコメントありがとうございます😊
画像の形式は何でも大丈夫ですよ！
コードを書くときに拡張子まで正しく書くようにしてください。
よろしくお願いします☺️
同じ事をしているのに
表示がされないのは
何故なんでしょうか
すいません！解決されました！
コメントありがとうございます！
何か違いが必ずあるはずです。
誤字とか、スペースが全角になってるとか！
探してみてください！
インデックスhtmlというファイルがどこにあるかわからないんですがどういうことでしょうか？
ご視聴＆コメントありがとうございます！
テキストエディタで保存しているかと思うのですが、保存する時の保存先を確認していただけると良いかなと思います！