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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

3528閲覧

ある楽天市場の商品ページ(PCページ)のレイアウトの修正をしたい

mirainu

総合スコア20

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2016/12/22 04:14

ある楽天市場の商品ページ(PCページ)のレイアウトの修正をしたいと思っております。

たとえば、
商品ページ下部にある「このショップの人気商品ランキング」を
商品ページ上部に移動したいのですが、
CSSで、position:absolute
で、位置を変更しても
楽天のイベント等で勝手に最上部にバナー等が出てきて
「このショップの人気商品ランキング」の絶対位置は変わらないのに
他の要素が、バナー分ずれて、レイアウト崩れを起こしてしまいます。

なんとかバナー分だけ自動的にずれるようにできないでしょうか。
できればCSSで実現したいですが、
他の方法があるのであればご教授ください。

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

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

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

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

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

kei344

2016/12/22 05:23

問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。
mirainu

2017/01/12 23:41 編集

お答えしたいのですがさまざまな事情により、追記することはできません。。。
guest

回答1

0

ベストアンサー

orderプロパティを使うのはどうですか。

要素は、order の値の昇順に配置されます。order の値が同じ要素は、ソースコード内で現れる順に配置されます。

order - CSS | MDN

サンプル

HTML

1<div id="wrapper"> 2<div id="inserted"> 3挿入 4</div> 5<div id="second"> 62番目 7</div> 8<div id="third"> 93番目 10</div> 11<div id="first"> 121番目 13</div> 14</div> 15<a href="#" id="shift">並べ替え</a> 16<a href="#" id="insert">挿入</a>

CSS

1div{ 2 width:300px; 3 height:100px; 4} 5#wrapper{ 6 height:auto; 7 display:flex; 8 flex-flow: column; 9} 10#first{ 11 background-color:#900; 12} 13#second{ 14 background-color:#090; 15} 16#third{ 17 background-color:#009; 18} 19#inserted{ 20 display:none; 21 background-color:#999; 22} 23.shift #first{ 24 order:1; 25} 26.shift #second{ 27 order:2; 28} 29.shift #third{ 30 order:3; 31} 32.insert #inserted{ 33 display:block; 34} 35

javascript

1var wrapper = document.getElementById('wrapper') 2document.getElementById('shift').addEventListener('click', e => wrapper.classList.toggle('shift')); 3document.getElementById('insert').addEventListener('click', e => wrapper.classList.toggle('insert'));

投稿2016/12/22 05:36

Lhankor_Mhy

総合スコア35860

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

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

mirainu

2017/01/12 23:42

ありがとうございます。試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問