質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2891閲覧

css 上に揃えて、横にも揃える

AAA7

総合スコア10

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/27 15:31

編集2019/08/28 00:17

検索フォームとハンバーガータグと文字の上ゾロえと横にも揃える方法を教えてください。vertical-alignでやろうと思っても実行後
このようになってしまうですのですが検索を真ん中にしてハンバーガータグを一番右上に設置して、POSTを左上にやりたいです。

html

1{% load static %} 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Fooden</title> 6 </head> 7 <body> 8 {% block extrahead %} 9 <link href="{% static 'home.css' %}" rel="stylesheet"> 10 {% endblock %} 11 <div id='main-name'><p>Post</p></div> 12 <form action="自分のサイトURL" method="get"> 13<input id="sbox1" id="s" name="s" type="text" placeholder="検索 …" /> 14</form> 15 <div id="nav-drawer"> 16 <input id="nav-input" type="checkbox" class="nav-unshown"> 17 <label id="nav-open" for="nav-input"><span></span></label> 18 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 19 <div id="nav-content"> 20 <p><a href="">お気に入り</a></p> 21 <p><a href="">予約確認</a></p> 22 <p><a href="">アカウント管理</a></p> 23 <p><a href="">設定</a></p> 24 </div> 25 </div> 26 </body> 27</html>

css

1#nav-drawer { 2 position: relative; 3} 4 5/*チェックボックス等は非表示に*/ 6.nav-unshown { 7 display:none; 8} 9 10/*アイコンのスペース*/ 11#nav-open { 12 display: inline-block; 13 width: 30px; 14 height: 22px; 15 vertical-align: middle; 16} 17 18/*ハンバーガーアイコンをCSSだけで表現*/ 19#nav-open span, #nav-open span:before, #nav-open span:after { 20 position: absolute; 21 height: 3px;/*線の太さ*/ 22 width: 25px;/*長さ*/ 23 border-radius: 3px; 24 background: #555; 25 display: block; 26 content: ''; 27 cursor: pointer; 28} 29#nav-open span:before { 30 bottom: -8px; 31} 32#nav-open span:after { 33 bottom: -16px; 34} 35 36/*閉じる用の薄黒カバー*/ 37#nav-close { 38 display: none;/*はじめは隠しておく*/ 39 position: fixed; 40 z-index: 99; 41 top: 0;/*全体に広がるように*/ 42 left: 0; 43 width: 100%; 44 height: 100%; 45 background: black; 46 opacity: 0; 47 transition: .3s ease-in-out; 48} 49 50/*中身*/ 51#nav-content { 52 overflow: auto; 53 position: fixed; 54 top: 0; 55 left: 0; 56 z-index: 9999;/*最前面に*/ 57 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 58 max-width: 330px;/*最大幅(調整してください)*/ 59 height: 100%; 60 background: #fff;/*背景色*/ 61 transition: .3s ease-in-out;/*滑らかに表示*/ 62 -webkit-transform: translateX(-105%); 63 transform: translateX(-105%);/*左に隠しておく*/ 64} 65 66/*チェックが入ったらもろもろ表示*/ 67#nav-input:checked ~ #nav-close { 68 display: block;/*カバーを表示*/ 69 opacity: .5; 70} 71 72#nav-input:checked ~ #nav-content { 73 -webkit-transform: translateX(0%); 74 transform: translateX(0%);/*中身を表示(右へスライド)*/ 75 box-shadow: 6px 0 25px rgba(0,0,0,.15); 76} 77#sbox1{ 78max-width:500px; 79height:30px; 80outline:0; 81margin-bottom:40px; 82background:#eee; 83} 84 85#main-name { 86 text-align: left; 87 font-size: 50px; 88 top: 0; 89} 90 91#nav-content { 92 text-align: center; 93 top: 0; 94} 95 96 97#nav-drawer { 98 text-align: right; 99 100 top: 0; 101}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatsu

2019/08/27 15:49

実際に書かれたHTMLやCSSも併せて記載していただくと、回答しやすかったりします!mm
yoshinavi

2019/08/27 20:51

現状のコードと問題点はどこか?が提示されないと「丸投げ」と低評価される可能性があります。
azuapricot

2019/08/27 23:59

コードがないのにどう指摘しろとおっしゃるのでしょうか。 回答者はエスパーではないです。
AAA7

2019/08/28 00:17 編集

申し訳ありませんでした。今後はしっかりとコードを書いていきたいと思います。
guest

回答2

0

flexだとこんな感じでしょうか。

HTML

1<div id='main-name'> 2 <p>Post</p> 3 4 <form action="自分のサイトURL" method="get"> 5 <input id="sbox1" id="s" name="s" type="text" placeholder="検索 …" /> 6 </form> 7 8 <div id="nav-drawer"> 9 <input id="nav-input" type="checkbox" class="nav-unshown"> 10 <label id="nav-open" for="nav-input"><span></span></label> 11 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 12 <div id="nav-content"> 13 <p><a href="">お気に入り</a></p> 14 <p><a href="">予約確認</a></p> 15 <p><a href="">アカウント管理</a></p> 16 <p><a href="">設定</a></p> 17 </div> 18 </div> 19 20</div>

CSS

1#main-name { 2 /* text-align: left; 3 font-size: 50px; 4 top: 0; */ 5 display: flex; 6 justify-content: space-between; 7 8} 9 10#main-name p { 11 margin: 0; 12 font-size: 50px; 13 line-height: 1; 14}

投稿2019/08/28 01:28

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AAA7

2019/08/28 22:56

自分が知らないようなdisplayでやる方法まで教えてくださりありがとうございます。今後このようなものを使ってやっていきたいとも考えています。ありがとうございます。
guest

0

ベストアンサー

vertical-alignでは無理があるんじゃないでしょうかねー。
position:relative と position:absolute使ってみました。
再現するのに邪魔なタグとか消しちゃったんでコピペじゃ動かないと思います。

HTML

1<html lang="en" dir="ltr"> 2 <head> 3 <meta charset="utf-8"> 4 <title>Fooden</title> 5 </head> 6 <body> 7 <div class="test"> 8 <div id='main-name'> 9 <span>Post</span> 10 </div> 11 <input id="sbox1" id="s" name="s" type="text" placeholder="検索 …" /> 12 <div class="test2"> 13 <div id="nav-drawer"> 14 <input id="nav-input" type="checkbox" class="nav-unshown"> 15 <label id="nav-open" for="nav-input"><span></span></label> 16 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 17 <div id="nav-content"> 18 <p><a href="">お気に入り</a></p> 19 <p><a href="">予約確認</a></p> 20 <p><a href="">アカウント管理</a></p> 21 <p><a href="">設定</a></p> 22 </div> 23 </div> 24 </div> 25 </div> 26 </body> 27</html>

CSS

1#nav-drawer { 2 position: relative; 3} 4 5/*チェックボックス等は非表示に*/ 6.nav-unshown { 7 display:none; 8} 9 10/*アイコンのスペース*/ 11#nav-open { 12 display: inline-block; 13 width: 30px; 14 height: 22px; 15 vertical-align: middle; 16} 17 18/*ハンバーガーアイコンをCSSだけで表現*/ 19#nav-open span, #nav-open span:before, #nav-open span:after { 20 position: absolute; 21 height: 3px;/*線の太さ*/ 22 width: 25px;/*長さ*/ 23 border-radius: 3px; 24 background: #555; 25 display: block; 26 content: ''; 27 cursor: pointer; 28} 29#nav-open span:before { 30 bottom: -8px; 31} 32#nav-open span:after { 33 bottom: -16px; 34} 35 36/*閉じる用の薄黒カバー*/ 37#nav-close { 38 display: none;/*はじめは隠しておく*/ 39 position: fixed; 40 z-index: 99; 41 top: 0;/*全体に広がるように*/ 42 left: 0; 43 width: 100%; 44 height: 100%; 45 background: black; 46 opacity: 0; 47 transition: .3s ease-in-out; 48} 49 50/*中身*/ 51#nav-content { 52 overflow: auto; 53 position: fixed; 54 top: 0; 55 left: 0; 56 z-index: 9999;/*最前面に*/ 57 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 58 max-width: 330px;/*最大幅(調整してください)*/ 59 height: 100%; 60 background: #fff;/*背景色*/ 61 transition: .3s ease-in-out;/*滑らかに表示*/ 62 -webkit-transform: translateX(-105%); 63 transform: translateX(-105%);/*左に隠しておく*/ 64} 65 66/*チェックが入ったらもろもろ表示*/ 67#nav-input:checked ~ #nav-close { 68 display: block;/*カバーを表示*/ 69 opacity: .5; 70} 71 72#nav-input:checked ~ #nav-content { 73 -webkit-transform: translateX(0%); 74 transform: translateX(0%);/*中身を表示(右へスライド)*/ 75 box-shadow: 6px 0 25px rgba(0,0,0,.15); 76} 77#sbox1{ 78 max-width:500px; 79 height:30px; 80 outline:0; 81 margin-bottom:40px; 82 background:#eee; 83 position:absolute; 84 top:20px; 85 left:40%; 86} 87 88#main-name { 89 text-align: left; 90 font-size: 50px; 91} 92 93#nav-content { 94 text-align: center; 95 top: 0; 96} 97 98#nav-drawer { 99 text-align: right; 100 top: 0; 101} 102 103.test { 104 position:relative; 105} 106.test2 { 107 position:absolute; 108 top:20px; 109 right:20px; 110}

イメージ説明

投稿2019/08/28 00:52

編集2019/08/28 00:54
azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AAA7

2019/08/28 22:55

返信遅れて申し訳ありませんでした。実行してみたところうまく起動することができました。詳しいコメントの追記ありがとうございます。
AAA7

2019/08/28 22:59

nav-contentを今の結果だと左から出てくるようになっているのですが、右からできるようになるにはどうすればいいのか教えてくださると幸いです。
azuapricot

2019/08/28 23:56

元々右でした?左だったのを右にしたい?
AAA7

2019/08/29 01:07

左のものを右にしたいと考えております。
azuapricot

2019/08/29 01:16

それは今回の質問とはまた別になるので、別途新しく立ててもらえますか?
AAA7

2019/08/29 03:26

了解です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問