Q&A
前提・実現したいこと
練習のため、Djangoを用いたwebサイトを制作しています。
そのページでCSSを用いて枠をつけようとしたのですが、枠が表示されません。どうすれば上手くいくか教えてください。
参考にしているページ：https://miyazakilife.com/design/5683/
（これの２６番です）
timeline.html
html
1{% load staticfiles %} 2 3<html> 4 <head> 5 <title>タイムライン | Tuttaccater</title> 6 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 8 <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet" type="text/css"> 9 <link rel="stylesheet" href="{% static 'css/timeline.css' %}"> 10 </head> 11 <body> 12 13 <div class="page-header"> 14 <h1><a href="/">Tuttaccater</a></h1> 15 <h2>タイムライン</h2> 16 </div> 17 18 <br /> 19 20 <div class="post"> 21 <div class="content"> 22 {% for post in posts %} 23 <div class="box26"> 24 <span class="box-title">{{post.user_id}}</span> 25 <p>{{post.post_text}}</p> 26 <div class="date"> 27 <p>{{post.post_submit_date}}</p> 28 </div> 29 </div> 30 <br /> 31 {% endfor %} 32 </div> 33 </div> 34 35 </body> 36 37</html> 38
timeline.css
css
1 2.page-header { 3 background-color: #00e1ff; 4 margin-top: 0; 5 padding: 20px 20px 20px 40px; 6} 7 8 9.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active { 10 color: #ffffff; 11 font-size: 40pt; 12 text-decoration: none; 13 font-family: 'Handlee'; 14} 15 16 17.content { 18 margin-left: 40px; 19} 20 21h1, h2, h3, h4 { 22 font-family: 'Lobster', cursive; 23} 24 25.date { 26 color: #828282; 27} 28 29.save { 30 float: right;post-form input { 31 width: 100%; 32} 33 34.top-menu, .top-menu:hover, .top-menu:visited { 35 color: #ffffff; 36 float: right; 37 font-size: 26pt; 38 margin-right: 20px; 39} 40 41.post { 42 margin-bottom: 70px; 43} 44 45.post h1 a, .post h1 a:visited { 46 color: #000000; 47} 48 49 50/*https://saruwakakun.com/html-css/reference/box*/ 51 52.box26 { 53 position: relative; 54 margin: 2em 0; 55 padding: 0.5em 1em; 56 border: solid 3px #95ccff; 57 border-radius: 8px; 58} 59.box26 .box-title { 60 position: absolute; 61 display: inline-block; 62 top: -13px; 63 left: 10px; 64 padding: 0 9px; 65 line-height: 1; 66 font-size: 19px; 67 background: #FFF; 68 color: #95ccff; 69 font-weight: bold; 70} 71.box26 p { 72 margin: 0; 73 padding: 0; 74}
よろしくお願いいたします。
回答1件
0
ベストアンサー
CSSの真ん中あたりがおかしいので、ここを修正したら直るでしょうか？
css
1.save { 2 float: right;post-form input { 3 width: 100%; 4}
↓
css
1.save { 2 float: right; 3} 4.post-form input { 5 width: 100%; 6}
投稿2018/02/17 04:39
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/17 04:42