htmlの<li>を右寄せ縦並びに表示したい(レスポンシブに表示したい)

前提・実現したいこと

htmlcssでレスポンシブな表示形式を作成しています。

<li>タグでくくった部分を、 PCで見る際は右寄せ横並び表示スマホ、タブレットで見る際は非表示にし、 MENUボタンを押すと右寄せ縦並び表示できるようにしたいのですが、縦表示が出来ません。

該当のソースコード

html
1  <body>
2    <div class="header">
3      <ul>
4        <input type="checkbox" id="hum_op"><label class="op" for="hum_op">MENU</label>
5        {% if user.id  %}
6        <li id="mypage"><a href="/myapp/mypage">マイページ</a></li>
7        {% else %}
8        <li id="login"><a href="/myapp/login">ユーザーログイン</a></li>
9        {% endif %}
10        <li><a href="/myapp/group_list">グループ一覧</a></li>
11      </ul>

css
1a {
2text-decoration:none;
3}
4
5li {
6float:right;
7list-style: none;
8padding: 10px 20px;
9vertical-align: top;
10}
11
12#login,#mypage {
13  padding: 0.25em 0.5em;
14  margin: 5px;
15  color: #FFF;
16  background: #fd9535;/*背景色*/
17  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
18  border-radius: 15px;
19  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
20  font-weight: bold;
21}
22
23#login:active {
24  border-bottom: solid 2px #fd9535;
25  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
26}
27
28label{
29display:none;
30}
31
32input[type=checkbox] {
33display:none;
34}
35
36@media screen and (max-width: 767px) { /*タブレット用とスマホ用*/
37.op{
38display: block;
39float: right;
40list-style: none;
41padding: 10px 5px;
42margin:0px;
43font-size: 20px;
44}
45
46li{
47display:none;
48}
49
50#login,#mypage {
51display:none;
52}
53
54#hum_op:checked ~ li{
55display: block;
56}
57

試したこと

cssファイルにて下記の修正を試しました。

css
1#hum_op:checked ~ li{
2display: list-item;
3}
4※変化なし

css
1#hum_op:checked ~ li{
2display: block;
3flex-direction: column;
4}
5※変化なし

css
1#hum_op:checked ~ ul{
2display: block;
3flex-direction: column;
4}
5※checked時に何も表示されなくなった

補足情報（FW/ツールのバージョンなど）

無関係だとは思いますが、フレームワークはDjangoを利用しています。

yambejp

2019/10/23 01:47

今回はCSSの処理を希望しているなら HTMLは通常のHTML（プログラムで書いているなら出力後のHTML）を提示すべきです

daihuku_chan

2019/10/23 13:58

ご指摘ありがとうございました。今後質問する際はそのようにします。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、ul 要素の子には input や label は取れないので ul の外に出しましょう。

モバイルファーストでないなら打ち消す必要があります。

CSS
1@media screen and (max-width: 767px) {
2  #hum_op:checked ~ ul {
3    float: right;
4    width: 12em;
5  }
6
7  #hum_op:checked ~ ul li {
8    display: block;
9    float: none;
10  }
11}

投稿2019/10/23 04:19

x_x

総合スコア13749

daihuku_chan

2019/10/23 13:56

x_x様 >ul 要素の子には input や label は取れないので ul の外に出しましょう。教えて頂きありがとうございます！素人質問ですみませんでした。。横並びになったものの、MENUの左に縦並びで表示される(MENUの真下に縦並びで表示したい) listが表示された際に別要素が圧迫されるなどが発生したため、別の表記としました。わざわざ答えて頂けたのに申し訳ありません。

行動規範の内容に同意します