前提・実現したいこと
サイト制作を学習しています。学習歴1月未満です。CSSで設計した通りにサイトを表示させたいです
発生している問題・エラーメッセージ
sublime textを使ってコードを書いていますが
デスクトップに保存しているhtmlファイルをクリックすると
ちゃんと自分が思い描いたサイトデザイになりますが
そのhtmlファイルとCSSファイルをサーバーにアプロードして
アクセスすると
CSSで書かれたコードが全く適用されませんでした
エラーメッセージ
なし?
該当のソースコード
html
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="UTF-8" /> 5 <title>夢物語</title> 6 <link rel="stylesheet" href="style.css"> 7</head> 8 <body> 9 <header class="header"> 10 <h1 class="site-title">夢物語</h1> 11 <p class="site-title-sub">*.*.*.meet you in my dream.*.*.*</p> 12 </header> 13 <nav class="nav"> 14 <div class="button_wrapper"> 15 <a class="button" href="#recently">主页</a> 16 <a class="button" href="#tweet">说说</a> 17 <a class="button" href="#album">相册</a> 18 <a class="button" href="#story">夢物語</a> 19 <a class="button" href="#study">学习笔记</a> 20 </div> 21 </nav> 22 </body> 23</html>
css
1 2.header { 3 height: 30vh; 4 background: url('yume2.jpg'); 5 background-size: cover; 6} 7 8.nav { 9 height: 100vh; 10 background-color: white; 11} 12 13.site-title { 14 color: #8B4513; 15 text-align: center; 16 line-height: 120px; 17 letter-spacing: 0.2em; 18 font-family: 'Hiragino Mincho ProN'; 19 margin: auto; 20} 21 22.site-title-sub { 23 color: #8B4513; 24 text-align: center; 25 letter-spacing: 0.1em; 26 font-family: 'Courier'; 27 margin: auto; 28 29} 30 31 32.button_wrapper { 33 text-align: center; 34} 35 36.button { 37 display: inline-block; 38 width: 200px; 39 padding: 20px; 40 margin: 10px; 41 border-radius: 8px; 42 background-color: #FFA500; 43 color: #fff; 44 text-decoration: none; 45 letter-spacing: 1px; 46 font-size: 1.2rem; 47 text-align: center; 48} 49
試したこと
どうすればいいのか全然わからないので、まだ解決方法を探している途中で、何も試してません。転送したファイルを削除して再転送することはやってみました。
補足情報(FW/ツールのバージョンなど)
サーバーはXServerを使っています
FileZillaを使ってファイルを転送しています
デスクトップで保存したhtmlファイルをクリックして表示されるものです
自分のURLでアクセスしたらこんな風になりました
head内のlinkをhref="http://nakihanatubaki.com/style.css"にしてみたらサイトの背景色が青くなりました(CSSでは背景を青に設定していません)
回答5件
あなたの回答
tips
プレビュー