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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

2回答

2179閲覧

html、CSSでとある要素をその下の要素に回り込ませたい(配置させたい)

widget11

総合スコア221

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/06/19 06:31

編集2018/06/19 06:53

現在ruby on railsでhtmlとcssでビュー部分を作っております。
railsと言ってもこのviewのコードには軽いlink_toヘルパーメソッドがあるだけなのでほとんど、htmlとcssの質問です。

//html <div class="container"> <h1>テスト</h1> <div class="menu"> <div class="menu1"> <label for="Panel1">・メニュー1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><%= link_to 'サブメニュー1','/men1/index' %></li> <li><%= link_to 'サブメニュー2','/men2/index' %></li> </ul> </div> <div class="menu1"> <label for="Panel2">・メニュー2</label> <input type="checkbox" id="Panel2" class="on-off" /> <ul> <li><%= link_to 'サブメニュー1','/men1/index2' %></li> <li><%= link_to 'サブメニュー2','/men2/index2' %></li> </ul> </div> </div> </div>
//css #panel1 { background: green; color: #81DAF5; padding: 12px; display: block; margin: 0; border: 1px solid #fff; } #panel2 { background: green; color: #fff; padding: 12px; display: block; margin: 0; border: 1px solid #fff; } .menu1{ position:relative; background: white; color: #0040FF; padding: 12px; display: inline-block; margin: 0; border: 1px solid #fff; } .menu2{ position:absolute; bottom:10; color: #0040FF; margin: 0; border: 1px solid #fff; } input[type="checkbox"].on-off{ display: none; } .menu ul { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; margin: 0; padding: 0; list-style: none; } .menu li { padding: 5px; } input[type="checkbox"].on-off + ul{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + ul{ height: 200px; }

今このhtml、cssファイルをブラウジングすると

メニュー1  メニュー2 ・サブメニュー1      ・サブメニュー1 ・サブメニュー2      ・サブメニュー2

以上の様な形でメニューをクリックするとツリー(アコーディオン型)のサブメニューが出てくるというコードを書いております。
ここに加えて

メニュー1  メニュー2 ・サブメニュー1      ・サブメニュー1 ・サブメニュー2      ・サブメニュー2 メニュー3          メニュー4 ・サブメニュー1       ・サブメニュー1 ・サブメニュー2 ・サブメニュー2

メニュー1とメニュー2のすぐ下にメニュー3とメニュー4というツリーメニューの要素を下に回り込ませたい(配置したい)場合どうすれば良いでしょうか?
メニュー1のdiv要素のpositionをrelativeとして、その中にメニュー3のdiv要素のpositionをabsoluteとしてもダメでした。
見よう見まねで書いたCSSですのでごちゃごちゃしており申し訳ございませんがよろしくお願い致します。

#再修正 
リンク内容
メニューツリーで参考にしたCSSの記事はこちらです 

この縦型のツリーにdisplay: inline-block;を書き加え、横並びにしてます。
よろしくお願いします。

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

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

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

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

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

m.ts10806

2018/06/19 06:32

参考にした記事などご提示ください >見よう見まねで書いた
widget11

2018/06/19 06:42

記事の編集を致しました。
m.ts10806

2018/06/19 06:43

リンクの貼り方ミスってます。リアルタイムでプレビューが表示されるのでそちらで確認しながら調整してください。
widget11

2018/06/19 06:54

修正以来ありがとうございます。修正致しました。よろしくお願いします。
m.ts10806

2018/06/19 06:56

あと細かいですが、コード内に //htmlのように入れるより コードブロック冒頭に言語名を入れたほうが適切にハイライトしてくれるので見やすくなります。```html ```css など 参考:https://teratail.com/questions/7119
m.ts10806

2018/06/19 07:05

タグからするとBootstrapが入っているようですが、アコーディオンメニューは利用されないのでしょうか?配置についてもグリッド・パネルなどを駆使すれば容易にできそうに思うのですが・・
guest

回答2

0

ベストアンサー

すでにflexが出ているので、グリッドレイアウトを挙げておきましょう

CSS

1.menu { 2 display: grid; 3 grid-template-columns: repeat(2, 1fr); 4}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

投稿2018/06/19 07:28

x_x

総合スコア13749

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

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

widget11

2018/06/19 08:36

CSSにほとんど触ったことがなかったのですがすごい便利でびっくりしました!ありがとうございます!
guest

0

ざっくり見た感じ、HTML,CSSについては問題なさそうですねー。

なので、問題があるとすれば
htmlにメニュー3と4が記述されてないことなのかな?

もしそうだとすると、
htmlでメニュー3と4を入力してください。
その後、
cssの.menuに
display:flex
flex-wrap: wrap
を入れればいいんじゃないかと。

投稿2018/06/19 06:52

teruri

総合スコア220

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問