（番外編）そんなの知らん
2024年6月22日（土） 本日のサマライズ】
やっぱりやってきた！サマサマサマライズ！
今日のおかしい記述のコーナー*！
l 注：極めて低レベルな話をしています
結論：../images/kv-img.jpgと/images/kv-img.jpgの違いの話
■まず、これにしたい
実践的なWebサイト制作にて。
キービジュアルを背景に表示しよう！という課題。
ファイルのあるところの画像をコピーしてアレしたら
できるんじゃないの？と思いきや
（エクスプローラーの画像を右クリックしてコピーして
**background-image: url(○○); **のところに貼り付けたら
いいんじゃないの？と思いつつ
■ところがこうなった
表示されません
真っ白です
**■AI先生に聞いてみた
:robot: もちろんです！小学生向けに説明しますね。:robot:
コンピュータでは、すべてのファイル（画像も含めて）には、
自分だけの特別な「名前」（これをパスと言います）があります。
パスは、そのファイルがどこに住んでいるかを示しています。
「Webページ」→「画像フォルダ」→「背景画像.jpg」のようにパスを作ります。
HTMLで画像を貼り付けるときには、imgタグを使います。
そして、そのimgタグの中にあるsrcという部分に、
その画像までのパス（住所）を書きます。
例えば、<img src="images/背景画像.jpg">と書くと、
「images」というフォルダにある「背景画像.jpg」という画像を表示します。
なので、HTMLで画像を表示させるためには、
その画像がコンピュータの中のどこにあるかを
きちんと指定してあげることが大切です。:robot:
■CSSの話なんだけど
:robot: CSSで画像を挿入するには「background-image」
というプロパティを使用します。
そして、その画像までのパス（住所）を指定します。
例えば、「images」フォルダにある、「
bg.jpg」という画像をあるエリアの背景として設定したい場合は、
以下のようなCSSを書きます：
.element{
background-image: url("images/bg.jpg");
}:robot:
**■さっきからやってるんだよォォ:sob: **
それは分かってるよぉ！
もう５百万回くらいやってるよぉ！（体感）
■こんな記述をしている
background-image: url("website/coding02/kv-img.jpg");これでいいですか？
なぜurlにエラーが出ているのですか？
background-image: url("website/coding02/kv-img.jpg");これでいいですか？
背景はコピーして貼り付けたらいいんですか？（やけくそ）
CSSで背景が表示されないとき、
画像ファイルをプロジェクトの適切なディレクトリに置いた上で
は具体的にどういう動作ですか？
ディレクトリとか英語で言わんでくれ…
もう分からん…
■パス？が適切でないとか言われる
環境構築はその操作や設定により
意図しない問題を引き起こす可能性がございますので、
通話またはAIを利用しないチャットにてご質問いただくようお願いいたします。
AI先生、アタイのポンコツっぷりにいよいよさじを投げたか…
■メンターさんに質問してみた
藁にもすがる思いで聞いてみた
「Webサイト制作コースです。
レッスン４「実践的なサイト制作に挑戦しよう」です。
キービジュアルを作成しようの問題で、
背景の画像が表示されません。
試しにbackground-color: #152a52;を入力するとちゃんと背景色が出ます。
パスがおかしいとAIの回答にはありました。
「index.HTML
kv.imag-jpg」
のような並びになっています。このkv.img-jpgを右クリックしてコピーして
.kv-wrapper {
padding: 225px 0;
background-image: url("website/coding02/kv-img.jpg");
background-position: center;
background-size: cover;
}
貼り付けています。
ctrl+ｓで保存し、開いても画像は表示されません。
どこか初歩的なミスをしている気がしますが
どこなのかが分かりません。
よろしくお願いいたします。
**■メンターさんの回答
:パスの指定の仕方に誤りがある可能性が高いです。
現状の書き方だと、
style.cssと「同じディレクトリにあるwebsite/coding02/kv-img.jpg」を
探している状態です。
sthle.cssはwebsite/coding02/cssの中に記述されているので、
現状の記述だと、目当てのディレクトリが見つからないため、
表示がされていない状態です。
模範解答では、別の記述の仕方をしているので、確認してみてください。
■AI先生とほぼ同じ回答
詰んだ…
もうヒトに聞いても分からないなら分からない…。
てか、模範解答見て記述してみたんだけど？
もうここから一生出られないんじゃないか？
来年の今頃も背景に画像が表示されませんを
ずっとやり続けてるんじゃないだろうか？
**
■先生の言葉を思い出す**
どこかに原因があるはず…しかしどこなのか分からない。
目の前に今まで書き散らかしたコードがある。
そこで、昨日セミナーで先生が話していたことを思い出した。
「問題を７周くらいやりました。体に覚え込ませました。」
私はまだ１周目でしかやってない。
絵画は模写、書道は臨書することが大事という。
客観視に必要な作業だという。
おそらくそういうことだ。
全部消そう。
メモとかいっぱい書いていたが、もったいないが、
今までの時間が無くなりそうだが、すべて消した。イチからやり直した。
■ひとつひとつ確認しつつ
・フォルダやファイルの段階から作り直した。
模範解答を丁寧にコピペして確認した。
「プログラムから開く」たびに祈る思いがした。
■あっさり解決
拍子抜けなほどあっさり画像が表示された。
どこに原因があったのか？
../images/kv-img.jpgと/images/kv-img.jpg
のimegesの前の２つのドットのありなしだった。
■違いはなに？*
AI先生：これらはパス表記で、それぞれ違う位置を指しています。
/images/kv-img.jpg: は絶対パス。
一方で ../images/kv-img.jpg: これは相対パス。
これは上の階に行くための階段のようなものです。
■考えられる原因**
コードが正しくなかった。おそらくCSSコードの順番。
HTMLは書いたものの間にコードを入れこんでいくのに対して、
CSSは下に書き足していくもの。
そこを私はCSSの間にコードを入れこんでいたのだ。
それで効果を打ち消してしまっていたのだろう。
原因は単純なもの。そんなものだ。
■知らんかったぞ
background-image: url("website/coding02/images/images/kv-img.jpg");
そうか、imagesの前の記述が余計だったのか…！
普通にコピペするだけじゃダメなんだ！
余計なやつを省略するドットなんだ！
…知らないぞ！そんなん！テキストにも書いてなかったのに！
それじゃ分からんわ！
あー！疲れた！
あー！でもよかった！今の段階で分かってよかった！
これでプログラミングできます！なんて言ってしまったら
もしうっかり仕事でプログラミングすることになって
こんな初歩的なことで「分かりませんできません」とか
言ってしまって迷惑かけるとこだった！
あー！よかった！ほんとうに！
あやうくアイツ使えんヤツだとか
なんでウチの会社入ったの？とか言われて
便所で水ぶっかけられるとこだった！
あぶない！あぶない！
これで最悪の世界線は回避できたな！
そしてまたひとつ、賢くなった！