だれかのなにかに役立てるウェブ制作者YoTaの趣味ブログ

css h1とimgなどHTML要素の表示位置を上下で入れ替える方法はposition

HTMLでの順番を強引にcssで入れ替える場合は、相対位置と絶対位置を扱うpositionで実現できます。

処理方法

HTMLで構築をしていると、

・h1タグ
・imgタグ

というように、見出し>中身の順で、マークアップの順番をしっかり並べたくなります。

ただ、デザイン側からは、

・写真
・見出しテキスト

といった順番のレイアウトで指示されることも少なくありません。

とくにニュースサイトなど、「サムネイル画像+タイトル」の要素があると、写真が上側に来ることも珍しくありません。

こんな時は、positionを使いましょう。やり方はいくつもありますが、

div⇒relative
h1⇒absolute
img⇒absolute

という感じで絶対位置を示してやれば、HTMLの順番はそのままにしながら、レイアウトは上下を逆に入れ替えてあげることができます。

参考リンク

コードの具体例など、詳しくは下記リンクがとても参考になります。

▼【レスポンシブ対応】CSSだけでDIVの上下を入れ替える
http://www.02320.net/upside-down-boxes-by-css/

▼CSSで要素を上下入れ替える方法。[レシポンシブ対応]
https://pochi-web.github.io/entry/2017/01/21/133917/

▼CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方
http://bl6.jp/web/css/replace-element-upper-lower/

ただ、上下入れ替えのcssをリキッドレイアウト(可変グリッド)などでやろうとすると、要素の高さ部分の調整で難しくなることがあります。たとえばテキストのボリューム次第で要素の高さが変わってしまうからです。

この場合、高さを固定にしても良いんですが、そうすると今度は余白が目立ったり、逆にギュウギュウになったりして、けっこう難しいです。可変タイプのサイトを作る際は、あまりpositionに頼らない方が良いでしょう。(レイアウトにこだわる際はテキストのことも考えてあげる必要があります。)

最後の手段は、js、j-queryですが、本来はcssで処理できるレベルのことを、あんまり動的に処理したくはないですよね・・・。

今はflexなどで色々と自由度が上がりました

昔はpositionくらいしか方法がなかったですが、古いブラウザが廃止になり、css3になり、flexが普及してきたので、今はもっと簡単に実現できるようになっています。

ページ上部に戻る