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

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

ただいまの
回答率

88.79%

外部CSSが読み込まない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 336

watashi_8

score 13

外部CSS読み込み

「いちばんよくわかるHTML5&CSS3デザインきちんと入門」をみて勉強しています。
テストページを作成していたところ、外部CSSが読み込まないので質問します。

発生している問題・エラーメッセージ

・<link rel~ でstyle.cssを指定しても読み込まない
・<style>タグを使うと表示される

試したこと

・クロームでソースを表示、style.cssは問題なく開けました。
https://teratail.com/questions/183231

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <metta name="description" content="ひとつ上のWeb開発を目指すセミナーvol.2を10月16日に開催します。今回はローカルWebサーバーの構築を紹介します。ただ今参加者募集中。">
  <title>ひとつ上のWeb開発を目指すセミナーvol.2 ローカル開発環境の構築 参加者募集!</title>
  <link rel="styleseet" href="style.css"/>
</head>

<body>
  <article>
   <h1>ひとつ上のWeb開発を目指すセミナーvol.2 ローカル開発環境の構築 参加者募集!</h1>
   <p>
   「ひとつ上のWeb開発を目指す」セミナー第一回は100名以上の参加があり盛況のうちに終了しました。好評につき、第二回を開催致します。</p>

   <p>第二回となる今回のテーマは「ローカル開発環境の構築」。静的なHTML/CSSを書いてWebサイトを構築するだけでなく、近年とみに増えている、WordPressなどCMSパッケージを利用した動的なWebサイトを構築するのに最適な、ローカル開発環境の構築をゼロから紹介します。</p>
   <p>作業用のパソコンにローカルWebサーバーを構築すれば、より本番に近い環境で開発を進めることができます。今回のセミナー前半では、ローカル開発環境を作ることの利点と事前に知っておくべき知識の紹介、後半ではXAMPP/MAMPのインストールと設定を紹介します。</p>
   <p>講師にはWebスペクタクル株式会社のエンジニア、船出健一氏をお招きします。また、セミナー終了後には懇親会も予定しております。皆様の参加こころよりお待ちしております。</p>

<section>
   <h2>場所と日時</h2>

   <ul>
   <li><b>場所:</b>Mr.HandsOn 新宿カンファレンスタワー 11F A会場(<a href="http://studio947.net">地図</a></li>
   <li><b>日時:</b>10月16日 19:00∼21:00(開場は18:30から)</li>
   <li><b>入場料:</b>¥2,000-</li>
   </ul>
</section>

<section>   
   <h2>注意事項</h2>

   <ul>
   <li>ノートパソコンはなくても受講できますが、お持ちになることをお勧めします。Wi-Fiは完備しています</li>
   <li>事前にチケットをお買い求めください</li>
   <li>受付でメールに添付のQRコードを確認いたします。メール本文をプリントアウトするか、その場でご提示ください</li>
   <li><strong>開演中の途中退室はできません。</strong>時間に余裕を持ってお越しください。</li>
   <li><strong>キャンセルの場合はご連絡ください</strong></li>
   </ul>
</section>

<section>   
   <h2>船出健一プロフィール</h2>
   <p>アメリカに留学してIT技術を勉強したのち、大手通信会社に勤務、会員専用サイトの構築・運営に携わる。2013年よりWebスペクタクル株式会社。各種Webサービスの企画・開発、インフラ整備を担当している。</p>
</section>
</article>

 </body>
</html>
@charset "utf-8";

body {
    font-family: sans-serif;
}
h1 {
    font-size: 30px;
    color: #ff0000;
}
h2 {
    font-size: 18px;
}
p {
    margin-top: 0;
    margin-bottom: 0;
}

補足情報

CSSのファイルはHTMLファイルと同じフォルダ内にあります。
よろしくお願いたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+5

誤 :  <link rel="styleseet" href="style.css"/>

誤字ってます

正 :  <link rel="stylesheet" href="style.css"/>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/12 11:59

    回答ありがとうございます。
    初歩的なミスでした...

    キャンセル

  • 2019/04/12 12:02

    1文字だけでもこうなるので、気をつけていきましょうね!
    がんばってマスター!

    キャンセル

  • 2019/04/12 12:05

    よく確認したいと思います...!
    ありがとうございます!

    キャンセル

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

  • ただいまの回答率 88.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る