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

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

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

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML

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

CSS

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

Q&A

解決済

1回答

5107閲覧

svgとdivを横並びにしたいが、svgに描画したグラフがdiv要素の下に表示されてしまう

退会済みユーザー

退会済みユーザー

総合スコア0

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/08/15 09:03

編集2018/08/15 09:08

###実現したいこと
下の画像のように、div要素のside-menu-barの横にsvg要素を並べて表示したいと考えています。

発生している問題

display: flexを指定して、svg要素にD3.jsでグラフを描画していますが、div要素(side-menu-bar)の下に表示されてしまい、グラフが見えなくなってしまいます。
おそらくですが、svg要素の上にside-menu-barが重なっていることが問題なのではないかと考えています・・・。

該当のソースコード

HTML

1 <div id="vis"> 2 <div id="side-menu-bar"></div> 3 <div id="graph"> 4  <svg></svg> 5  </div> 6 </div>

CSS

1#vis { 2 display: -webkit-flex; 3 display: flex; 4} 5 6#side-menu-bar { 7 height: 100%; 8 width: 160px; 9 position: fixed; 10 top: 0; 11 left: 0; 12 background-color: #111; 13 overflow-x: hidden; 14 padding-top: 20px; 15} 16 17svg { 18 background-color: #BAD3FF; 19 width: 100%; 20}

HTML, CSSの初心者ですが、よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

ほんとはもっと細かく指定した方が良さげですが,とりあえず

css

1#graph{ 2 margin-left: 160px; 3}

css

1#vis{ 2 padding-left: 160px; 3}

ですかね

fixedしたらそうなるのは当たり前なので,
他の要素との兼ね合いも考えながら,内包関係等を設計し,CSSで上下左右前後の位置を修正しましょう

投稿2018/08/15 09:40

編集2018/08/16 13:58
liveasnotes

総合スコア1284

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

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

退会済みユーザー

退会済みユーザー

2018/08/16 13:44

ご回答していただき、ありがとうございます。 上記を指定したところ、無事できました!! ありがとうございました。
liveasnotes

2018/08/16 13:59

よく考えたら,親要素のpaddingをいじる方が都合が良さそうなので,回答に追記しときました^^
退会済みユーザー

退会済みユーザー

2018/08/18 03:58

わざわざご丁寧にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問