Q&A
他の質問を「解決済み」にされてはいかがでしょう。
前提・実現したいこと
自己紹介サイトを公開したい
http://tapiokachan000.com/index.html
途中まで出来ました。↓こんなかんじです
この下の画像がヘッダーの部分にくる予定です。（自分のデスクトップ上で開いたときにはちゃんと表示されるのですが、アップロードしたものをみると表示されません）
発生している問題・エラーメッセージ
なぜかヘッダーの画像が表示されていません。
試したこと
画像をすべてアップロードした。ヘッダーの画像もアップロードしました。
このサイトを開きましたが、「こんな感じです」の画像のようには表示されてないですが。
関係のない話でなんですが。ドットインストールのやつのように、<a href="mailto:">をしないことをお勧めします。（世にはメールアドレスをWEBページから探して取得していく悪質なBotがありますから...）
また、顔写真の部分ですが、丸になってませんね。原因は、border-radius: 70px;にしているからです。ここをborder-radius: 50%;にすれば綺麗な丸になります。
kei344さん
ご指摘ありがとうございます。先ほど解決済みに変更しました。
robottokurieitaさん
<a href="mailto:">が勝手に読み取られてしまうのは知りませんでした。勉強になります。
顔写真のアドバイスもありがとうございます。私自身も少し気になってはいたのですが、それが原因だったのですね。
えっと、
前の質問（ https://teratail.com/questions/188994 ）で解決できている内容のような？
問題が起きたときの調べ方まで書いているのでそのあたりも質問前に見てもらいたいのですが・・
既に当質問の問題も解消されている状態なので、この質問も締められたほうが良いかと思います。
（あと質問に関連性があるのでしたらその質問へのリンクも質問本文に提示されたほうが回答者も色々理解したり察することができますので）
mts10806さん
申し訳ないです。
mts10806さんの回答来る前に気になって、質問していました。
問題は1個1個解決していったほうがいいかもしれません。
全く別のものに取り込んでいるならともかく同じものでしたら最初の質問で一通り解決できることも少なくないです。色々気になるのは分かりますが、焦らず行きましょう。
その通りですね。焦ってました。ご指摘ありがとうございます。
はい。別質問に同じ回答が寄せられることになると二度手間三度手間になってお互い大変になるので、そこはちょっと気にしてもらえたらと。
かしこまりました。気を付けます
回答4件
0
ベストアンサー
質問者の方はCSSファイルをアップロードする場所を間違えているというのが正解なので
href="css/styles.css" を href="styles.css" に変えないほうが良いです。
CSSのbackgroundのurlが ../img になっていることからも
間違えて css/ ではなく / にアップロードしたことが
現在は確定しています。
css
1url(../img/amyuheader.JPG);
投稿2019/05/12 16:15
総合スコア2937
当該回答のコメント欄でやり取りされたほうがよいのでは。
あ、
間違えてあなたの回答に書いてしまいました。削除リクエストを送りました。
質問者のレベルだとベストアンサーを間違えそうなので
例外的に2回目の回答をして目立たせました。
通常であればご指摘の通り、コメント投稿で記載する内容です。
yasutomiさん
アドバイス頂きありがとうございます。他の回答者様のアドバイスで<link rel="stylesheet" href="css/styles.css">を
<link rel="stylesheet" href="styles.css">に書き換えたら上手くいったのですが、それだと他の所に不具合が出てきてしまうのでしょうか？
CSSのbackgroundのurlが ../img になっていることからも
間違えて css/ ではなく / にアップロードしたことが
現在は確定しています。
という意味が理解できませんでした。
初心者すぎて理解できずに申し訳ないです。
href="styles.css"でも表示はされますが
CSSのbackgroundのurlが ../img になっているということは
styles.cssはcssフォルダに入っているのが正しいのです。
なぜなら../imgは「cssフォルダの上の階層にあるimgフォルダ」を
指定していることになるからです。
「間違えて css/ ではなく / にアップロードしたことが〜」というのは
言い換えると「cssフォルダではなく、その上の階層にアップロードしたことが〜」
という意味になります。
余談ですがindex.htmlの場合はURLは
http://tapiokachan000.com/index.html
ではなく
http://tapiokachan000.com/
になりますので、これも覚えておくと良いでしょう。
どちらでも表示されますが
index.htmlの場合はURLの短い後者が使用されます。
href="styles.css"でも表示はされますが
CSSのbackgroundのurlが ../img になっているということは
styles.cssはcssフォルダに入っているのが正しいのです。
なぜなら../imgは「cssフォルダの上の階層にあるimgフォルダ」を
指定していることになるからです。
↑
その通りです。
<link rel="stylesheet" href="css/styles.css">にしたまま
cssに書いたurl(../img/amyuheader.JPG);を何かに書き換えることで、ヘッダー画像は表示されるようになるのでしょうか？
URLの件、初めて知りました。ありがとうございます。
前の質問の回答にも書きましたしおおよそ解決しているのでこちらにぶら下がらせていただきますが、
その画像ファイルはCSSにとっては「道具」です。
間違いないのは「道具を置いた場所を指定する」ことです。
なので、「CSSファイル（または記述が書いてあるファイル）から見た画像を置いた場所を指定する（相対パスor絶対パス）」が正しいのです。
（相対パス、絶対パスについては以前の質問の私の回答に説明記事へリンクが貼ってあります）
あと下記についても
><link rel="stylesheet" href="styles.css">に書き換えたら上手くいったのですが、それだと他の所に不具合が出てきてしまうのでしょうか？
確かに「そこに置いたのでリンクを指定した」というのは手順としては正しいのですが、
「ファイル管理」という観点から問題が起きる可能性も出てきます。
サイトのコンテンツが充実してくるとそれだけ扱うファイルが増えてきます。
場合によってはCSSも別のファイルわけるケースもあることでしょう。
その場合にhref="styles.css"と指定していたら「HTMLファイルと同じ階層」に置いてあることになります。
PCのデスクトップをイメージしてください。ファイルがデスクトップにそのまま置いてあるとどこに何があるか分からなくなってきますよね？
なので、「CSSファイルはCSSフォルダに」分けておくようにするとどこに何が置いてあるのかわかりやすくなるので探すのも楽になりますし、「ここにCSSを置けばよい」と分かるので、
例えば同じサイトを複数人で作るときのルールにもなります。
（実務では全て一人でやりきることってあまりないし、作って終わりではなく、ずっと一人でメンテナンスするわけではなく「引継ぎ」は必ず起きるので）
もちろん、細分化すればするほどそれだけ役割がハッキリしてくるのでHTMLも全部トップではなくカテゴリ名をつけたフォルダにしたり、CSSも単にCSSフォルダ直下ではなく、役割をわけたフォルダにわけたり（画像も同様）しておくのも有用となってきます。
そのあたりを意識しておくと、コードもスッキリしてくるでしょうし、見た目だけはなく構造や作りもキレイなWebサイトにつながってくるので、もしSEO対策とかも考えるのでしたら役割分担を徹底しておくに越したことはないと思います。
ありがとうございます。
前回の回答を拝見して、相対パスと絶対パスについては理解できたつもりです。。
これが相対パスということで間違いないでしょうか？
url(../img/amyuheader.JPG);
href="styles.css"としてしまうとファイル管理の面で複雑になってしまうのですね。
それではhref="css/styles.css"にします。
はい。
「絶対パス」であれば「/」または「http://example.com/」のように始まります。
「相対パス」は「そのファイルから見た位置」なので「../」のようにフォルダをさかのぼっていくような記述が採用されます。
ちなみに「同じ階層からの相対パスの書き方」は
「css/」と「./css/」で同じ挙動をしますがなるべく後者で統一されたほうが良いと個人的におもいます
よかったです。ありがとうございます。
0
CSSが読み込まれていないようです。CSSのパスが間違っているようです。
仮にこうすると...
HTML
1<link rel="stylesheet" href="css/styles.css">
↓
HTML
1<link rel="stylesheet" href="styles.css">
正しく表示されました。
ただ、ご指摘もあったように、CSSのパスを見る限り、画像のパスがCSSフォルダーに入っていると考えて書いてあったので...CSSを編集するのではなくCSSフォルダーを作成して、その中にstyles.cssを入れてください。
投稿2019/05/12 15:41
編集2019/05/13 09:17退会済みユーザー
総合スコア0
このやり方で、私もできました！ありがとうございます。
この回答は今回のケースでは間違っているので
ベストアンサーではないです。
予想通り間違えてしまいましたね。
回答者の文章ををよく読んだほうが良いです。
えっと、、、
読んだのですが、これ以外の方法で解決する方法が分からなかったので、ベストアンサーにしてしましました。
なんかすみません。
ベストアンサーはずしました
解決方法は書かれてあるので
回答者の文章をよく読んだほうが良いです。
これ以降のamyugramuさんへの回答は
差し控えます。
申し訳ありませんでした。
回答の編集ありがとうございます。cssのファイルにstyles.cssを入れて、それをアップロードしたらちゃんとネットで表示されました。
お騒がせしました。
大丈夫です。こちらこそ、最初の回答が少し意味が違ってしまっていて...指摘されるまで気づきませんでした。
0
CSSがアップロードされていません。
ヘッダー画像が表示されていないのも
現在のソースコードを見た限りではCSSがアップされていないことが原因です。
(おそらくCSSのbackgroundでヘッダー画像を指定している)
http://tapiokachan000.com/css/styles.css
投稿2019/05/12 15:27
総合スコア2937
あなたの回答
tips
プレビュー
