質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

933閲覧

CSSが読み込まれません。どうすれば読み込まれますか?

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/04/07 00:18

編集2019/04/07 00:36

お世話になります。

CSSが読み込まれません。どうすれば読み込まれますか?

追記 ファイル構成図は下記です。
Portfolio----about----about.html
| |-stylesheet.css
|
|-index
|
|-portfolio-images----images----bg-about.jpg

下記にコードを載せます。

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>About 風景写真家「SNAPPERS」</title> 6<link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet"> 7<link href="/home/yusuke/Desktop/Portfolio/about/stylesheet.css" type="text/css" rel="stylesheet"> 8</head> 9<body id="about"> 10 11 <!-- header始まり --> 12 <header> 13 <div class="logo"> 14 <a href="index.html"><img src="/home/yusuke/Desktop/Portfolio/portfolio_images/images/logo.png" alt="SNAPPERS"></a> 15 </div> 16 <nav> 17 <ul class="global-nav"> 18 <li><a href="portfolio.html">Portfolio</a></li> 19 <li><a href="about.html">About</a></li> 20 <li><a href="contact.html">Contact</a></li> 21 </ul> 22 </nav> 23 </header> 24 <!-- header終わり --> 25 26 <!-- wrap始まり --> 27 <div id="wrap"> 28 <div class="content"> 29 <div class="main-center"> 30 <h1>About</h1> 31 <p>SNAPPERS代表、山田太郎のプロフィールや経歴紹介のページです。</p> 32 <section class="profile clearfix"> 33 <div class="profile-txt"> 34 <h2 class="icon">Profile</h2> 35 <p><span>SNAPPERS 代表:山田太郎</span><br>アナログ、デジタル問わず、トイカメラやポラロイド、ビデオカメラに至るまで、 36 あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br> 37 大学卒業後、有名カメラマンのアシスタントを経て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドア 38 カメラマンとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影 39 を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p> 40 </div> 41 <img src="/home/yusuke/Desktop/Portfolio/portfolio_images/images/about-profile.png" alt="山田太郎プロフィール画像" 42 class="profile-image"> 43 </section> 44 <section class="career"> 45 <h2 class="icon">Career and Job history</h2> 46 <table> 47 <tr> 48 <th>1994年3月</th> 49 <td>丸三角芸術大学写真科 卒業 50 服部写真研究所に入社、服部英明氏に師事 51 </td> 52 </tr> 53 <tr> 54 <th>2002年3月</th> 55 <td>服部写真研究所を退社し渡米、世界各国を放浪しながら撮影を続ける</td> 56 </tr> 57 <tr> 58 <th>2012年8月</th> 59 <td>イタリア・ミラノで開催されたコンクールにて、審査員特別賞を受賞</td> 60 </tr> 61 <tr> 62 <th>2016年1月</th> 63 <td>帰国し「SNAPPERS」を設立</td> 64 </tr> 65 <tr> 66 <th>2016年4月</th> 67 <td>Aichi Musiumにて初の写真展「Snap!Snap!」を開催</td> 68 </tr> 69 </table> 70 </section> 71 </div> 72 </div> 73 </div> 74 <!-- wrap終わり --> 75 76 <!-- footer始まり --> 77 <footer> 78 <small>(C)2017 Hattori-studio.</small> 79 </footer> 80 <!-- footer終わり --> 81 82</body> 83</html>

CSS

1#about { 2 background-image: url(/home/yusuke/Desktop/Portfolio/portfolio_images/images/bg-about.jpg); 3 background-repeat: no-repeat; 4 background-position: center center; 5 background-attachment: fixed; 6 background-size: cover; 7}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/04/07 00:26

HTML・CSS、imgの位置が分かるような、ファイル構成を提示されると良いかと思います。
退会済みユーザー

退会済みユーザー

2019/04/07 00:36

アドバイスありがとうございます。ファイル構成図を追記しました。
yoshinavi

2019/04/07 00:42

>CSSが読み込まれません。 → CSSが全く効いていないのでしょうか?それとも、一部が効いていないのでしょうか? 提示のHTMLは「about.html」でしょうか?
shinami

2019/04/07 01:36 編集

cssを使っていないその他の画像(ロゴとか)は表示されるのでしょうか? jpgではなくjpegとするとどうなるでしょう。 また、indexのリンクやその他のリンクをクリックするとどうでしょう。 表示できないページはございませんか? cssに画像ではなくその他の事をやってみたらどうなるでしょう。
退会済みユーザー

退会済みユーザー

2019/04/07 04:33

解決できました。linkタグのパスを間違っていました。 >yoshinaviさん はい、提示の HTMLはabout.htmlです。 >shinamiさん 解決できました。ありがとうございます。
guest

回答1

0

ベストアンサー

以下がおそらく原因です

HTML

1<link href="/home/yusuke/Desktop/Portfolio/about/stylesheet.css" type="text/css" rel="stylesheet">

href属性の中身は、サーバー内の絶対パス(ファイル名)と思いますが、ここは「ブラウザから閲覧できるURL」でなければなりません。
CSS単体でブラウザで閲覧できることを確認してから、そのURLをここに書けば確実かと思います。できればホスト名を省略して相対URLで書いた方が使いやすいかとは思います。

投稿2019/04/07 00:45

ockeghem

総合スコア11701

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/04/07 04:35

解決できました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問