cssでh1とimgなどHTML要素の記述順番に対して表示位置を上下で逆に入れ替える方法はposition

web制作

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で処理できるレベルのことを、あんまり動的に処理したくはないですよね・・・。

最後に一言

positionは慣れると便利。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

cssでh1とimgなどHTML要素の記述順番に対して表示位置を上下で逆に入れ替える方法はposition


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。普段はWEB制作をやっています。得意なのは要件定義や構築で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。