Q&A
###前提・実現したいこと
現在、python + djangoにてWEBアプリ開発をしております。
CSSフレームワークであるsemantic-UIを利用して画面を作成し、そこにpythonで機能を付けていこうと思った矢先、semantic-UIのcssが読み込まれずにサンプル画面が表示されなくて困っております。
pythonでcssを画面に読み込む際に必要な作業などありますでしょうか？
###フォルダ構成
helloフォルダのurls.py、view.pyに、templateのindex.htmlを表示するよう記述し、
表示するところまではうまくいっています。
###該当のソースコード
python
1<!DOCTYPE html> 2<html> 3<head> 4 <!-- Standard Meta --> 5 <meta charset="utf-8" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 8 9 <!-- Site Properties --> 10 <title>Fixed Menu Example - Semantic</title> 11 12 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/reset.css"> 13 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/site.css"> 14 15 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/container.css"> 16 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/grid.css"> 17 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/header.css"> 18 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/image.css"> 19 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/menu.css"> 20 21 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/divider.css"> 22 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/list.css"> 23 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/segment.css"> 24 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/dropdown.css"> 25 <link rel="stylesheet" type="text/css" href="../../contents/Semantic-UI-master/dist/components/icon.css"> 26 27 <style type="text/css"> 28 body { 29 background-color: #FFFFFF; 30 } 31 .ui.menu .item img.logo { 32 margin-right: 1.5em; 33 } 34 .main.container { 35 margin-top: 7em; 36 } 37 .wireframe { 38 margin-top: 2em; 39 } 40 .ui.footer.segment { 41 margin: 5em 0em 0em; 42 padding: 5em 0em; 43 } 44 </style> 45 46</head> 47<body> 48 49 <div class="ui fixed inverted menu"> 50 <div class="ui container"> 51 <a href="#" class="header item"> 52 <img class="logo" src="assets/images/logo.png"> 53 Project Name 54 </a> 55 <a href="#" class="item">Home</a> 56 <div class="ui simple dropdown item"> 57 Dropdown <i class="dropdown icon"></i> 58 <div class="menu"> 59 <a class="item" href="#">Link Item</a> 60 <a class="item" href="#">Link Item</a> 61 <div class="divider"></div> 62 <div class="header">Header Item</div> 63 <div class="item"> 64 <i class="dropdown icon"></i> 65 Sub Menu 66 <div class="menu"> 67 <a class="item" href="#">Link Item</a> 68 <a class="item" href="#">Link Item</a> 69 </div> 70 </div> 71 <a class="item" href="#">Link Item</a> 72 </div> 73 </div> 74 </div> 75 </div> 76 77 <div class="ui main text container"> 78 <h1 class="ui header">Semantic UI Fixed Template</h1> 79 <p>This is a basic fixed menu template using fixed size containers.</p> 80 <p>A text container is used for the main container, which is useful for single column layouts</p> 81 <img class="wireframe" src="assets/images/wireframe/media-paragraph.png"> 82 <img class="wireframe" src="assets/images/wireframe/paragraph.png"> 83 <img class="wireframe" src="assets/images/wireframe/paragraph.png"> 84 <img class="wireframe" src="assets/images/wireframe/paragraph.png"> 85 <img class="wireframe" src="assets/images/wireframe/paragraph.png"> 86 <img class="wireframe" src="assets/images/wireframe/paragraph.png"> 87 <img class="wireframe" src="assets/images/wireframe/paragraph.png"> 88 </div> 89 90 <div class="ui inverted vertical footer segment"> 91 <div class="ui center aligned container"> 92 <div class="ui stackable inverted divided grid"> 93 <div class="three wide column"> 94 <h4 class="ui inverted header">Group 1</h4> 95 <div class="ui inverted link list"> 96 <a href="#" class="item">Link One</a> 97 <a href="#" class="item">Link Two</a> 98 <a href="#" class="item">Link Three</a> 99 <a href="#" class="item">Link Four</a> 100 </div> 101 </div> 102 <div class="three wide column"> 103 <h4 class="ui inverted header">Group 2</h4> 104 <div class="ui inverted link list"> 105 <a href="#" class="item">Link One</a> 106 <a href="#" class="item">Link Two</a> 107 <a href="#" class="item">Link Three</a> 108 <a href="#" class="item">Link Four</a> 109 </div> 110 </div> 111 <div class="three wide column"> 112 <h4 class="ui inverted header">Group 3</h4> 113 <div class="ui inverted link list"> 114 <a href="#" class="item">Link One</a> 115 <a href="#" class="item">Link Two</a> 116 <a href="#" class="item">Link Three</a> 117 <a href="#" class="item">Link Four</a> 118 </div> 119 </div> 120 <div class="seven wide column"> 121 <h4 class="ui inverted header">Footer Header</h4> 122 <p>Extra space for a call to action inside the footer that could help re-engage users.</p> 123 </div> 124 </div> 125 <div class="ui inverted section divider"></div> 126 <img src="assets/images/logo.png" class="ui centered mini image"> 127 <div class="ui horizontal inverted small divided link list"> 128 <a class="item" href="#">Site Map</a> 129 <a class="item" href="#">Contact Us</a> 130 <a class="item" href="#">Terms and Conditions</a> 131 <a class="item" href="#">Privacy Policy</a> 132 </div> 133 </div> 134 </div> 135</body> 136 137</html> 138
###試したこと
cssを読み込んでいる部分についてはいろいろ変更してみましたが、
上手く読み込まれませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
python 3.0
回答1件
0
ベストアンサー
$ python manage.py runserver
上記 runserverコマンドでDjangoアプリを開発中に、静的ファイル(CSS/画像)を表示させたいという話かと思いますが、ドキュメントに記載されていますので、リンクを貼っておきます。
https://docs.djangoproject.com/en/1.11/howto/static-files/#serving-static-files-during-development
投稿2017/04/30 11:16
総合スコア2120
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/30 13:50
2017/05/04 00:46
2017/05/04 10:29