Q&A
ファイルをどこにおいているか、HTMLとCSSの関係性がわかるものを提示してください。（「HTMLとCSSが同じフォルダにある」とか「HTMLと同じフォルダにstaticフォルダがあってその中にCSSがある」とか）
前提・実現したいこと
”Pythonではじめる Webサービス＆スマホアプリ”という書籍でpythonとJavascriptの勉強をしております。その中でCSSで、pure.cssを使用していますが、Webブラウザで表示時に適用されません。
今回私が書いているソースでは、”会員制の掲示板”の背景の帯を表示できるようにしたいです。
発生している問題・エラーメッセージ
エラー表示はなし。
該当のソースコード
HTML、CSS
1 2<!DOCTYPE html> 3<html><meta charset="UTF-8"> 4 <meta name="viewport" 5 content="width=device-width, initial-scale=1.0"> 6 <!-- <link rel="stylesheet" href="static/pure-min.css"> --> 7 <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous"> 8 <link rel="stylesheet" href="static/style.css?v=12"> 9 10 <body><div class="content"> 11 <h1>会員制の掲示板</h1> 12 <form action="/try_login", method="POST" 13 class="pure-form pure-form-stacked"> 14 <legend>☺️ログインが必要です</legend> 15 <fieldset> 16 <label for="user"> ユーザー名</label> 17 <input type="text" name="user" id="user"> 18 <label for="pw"> パスワード</label> 19 <input type="password" name="pw" id="pw"> 20 <button type="submit" 21 class="pure-button pure-button-primary"> 22 ログイン</button> 23 </fieldset> 24 </form> 25</div></body></html> 26 27
試したこと
元々書籍では下記で"pure-min.css"でCSSが利用されていましたが、pureのHPからダウンロードしたファイルの中に"pure-min.css"が見つからなかったため、直接リンクを付けています。
【本に記載のリンク】
<link rel="stylesheet" href="static/pure-min.css">
【今回私の方で記載したリンク】
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
また、下記が上手くリンクできていないと思われるのですが解決方法がわかりません。
<link rel="stylesheet" href="static/style.css?v=12">pure-min.cssのダウンロード方法、style.cssの使い方についてご存知の方お教えいただけると助かります。
補足情報（FW/ツールのバージョンなど）
MacbookAir(Early 2015)
OS:10.15.5 Catalina
WebBrowser:
Google Chrome:83.0.4103.61
Safari:13.1.1 (15609.2.9.1.2)
Atom 1.48.0 x64
ファイル構成
Pure-min.cssについての記述
おそらく、Djangoなどのフレームワークを使っているはずです。
static もその中でディレクトリ構造が設定されていると思います。そのあたりのコードに誤りはありませんか？
ファイルの保存場所について上記にファイル構成を記載させていただきました。ただ、static/の中に"pure-min.css"と"style.css"をCSSのフレームワークの”pure”よりコピーして置くと記載してあるのですがこのファイルがWeb上で見つからず止まっている状況になります。
Djangoなどのフレームワークは動作していますか？
DJangoのフレームワークは動作していません。
それではCSSは読み込めないと思います。
書籍の記述では、Djangoについてどのように説明されていますか？
質問の追記を拝読。
2点、補足願います。
・basic_head.html というファイルは前述のディレクトリ構成にありませんでした。これはどこに置いているのですか？
・スクリーンショットの下に「CDNを利用して使う方法」という項が見えますが、これは【今回私の方で記載したリンク】と同じ方法ではありませんか？
ありがとうございます。
1.ルート直下に置いております。
2.【今回私の方で記載したリンク】と同じ方法になります。pure-min.cssファイルが見つけられなかっため、CDN利用で一度動作させました。
結局のところpure-min.cssとstyle.cssがpureのアーカイブに入っていないことが課題な気がするのでこちらを現在確認しております。
style.css は Pure.css ではないと思いますが……
pure-min.css をどうしてもファイルという形で欲しいなら、CDNのURLをブラウザのURL欄にコピペして移動し、Ctrl+Sで保存すればいいかと思いますよ。
> アーカイブに入っていないことが課題な気がする
違うと思います。
ご提示のディレクトリ構成で、index.html から style.css を参照する相対パスが static/style.css であるはずがないです。
なので、なんらかのフレームワークが動いていないと、ご提示のディレクトリ構成でご提示のコードは動作するはずがないのです。
なので、くりかえし「フレームワークは動いていますか？」とお訊ねしています。そこをご理解いただきたいのですが、私の言っていることは難しいですか？
あと、それに付随して、Pythonタグを質問に追加しておいた方が、よりよい回答が付きやすいと思いますよ。
「Pythonではじめる Webサービス＆スマホアプリ」の商品ページを見てきましたが、
【本書の対象読者】
◎Webサービスを開発しようと思っている人
◎Pythonの基礎が分かっている人
◎Webアプリの仕組みに興味がある人
と書いてありました。
前述の「フレームワークが動いていないなら、動作するはずがない」ということが理解できないならば、失礼ながら、kenta0228さんにはこの本は難しすぎるのではないかと思います。
まず、HTML入門から始めた方がよいです。
その通りかもしれません。ありがとうございます。
回答1件
0
ベストアンサー
”会員制の掲示板”のスタイルについての情報は構造を見る限りstatic/stile.cssに記載されているはずです。
style.cssを書籍通りのディレクトリに配置しましょう。
style.cssの内容は書籍のどこかに記載されているはずです。探しましょう。
投稿2020/06/22 09:51
総合スコア4447
"pure-min.css"にしても"style.css"にしてもダウンロードしてPureのファイル”pure-2.0.3 2”のなかで見当たらず書籍とネットの中で探している状況になります。探している場所が違うのか・・・。
アドバイスいただきありがとうございます。
実際にpureで配布されている"pure-2.0.3.zip"の中身を見てみました。pure-min.cssは存在しません。style.cssは複数見つかりますが公式サイトのサンプルに使用されているものでしょう。書籍中にstyle.cssの中身について説明がないのであれば、出版社に問い合わせをすべきと思います。内容がいい加減すぎないか、と。
hope_mucci様
ありがとうございます。
書籍に記載がある”style.css”についても、”styles,css” s付きならあるのですが、sが付いていない”style.css”はアーカイブデータの中に見つからなかったのです。一度出版社に確認してみるようにします。わざわざご確認いただきありがとうございます。
初心者で初歩的なことから勉強しようと思ってはじめましたが用語がわからずなかなか難しいです・・・。
あなたの回答
tips
プレビュー
