読者です 読者をやめる 読者になる 読者になる

「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

CSSで要素を上下入れ替える方法。[レシポンシブ対応]

f:id:pochiweb:20170121133654j:plain

要素を上下で入れ替える方法。レスポンシブにも対応。

 

CSSのpositioを使った要素の上下入れ替えってよくやりますよね?

にもかかわらずいつも忘れてしまうので、コードの理解と保存のために記しておきます。

やりたいこと

 

f:id:pochiweb:20170121115137p:plain

 

こんな状態をCSSでこうしたい。

 

f:id:pochiweb:20170121115152p:plain

 

これを行います。 

 

HTML

HTML_positionで要素の上下入れ替え(レスポンシブ)

 

CSS

CSS_positionで要素の上下入れ替え(レスポンシブ)

 

手順 

  1. 全体を包むボックスを用意します。
    今回のコードだと<section>です。
    ここにposition:relativeを指定して、<section>内の左上をこのボックス内でのpositionの起点とします。

    また、同様の要素が続く場合は特に、marginで各要素との間隔を調整します。

  2. 見出しと文章を含むボックスの用意をして、必要な要素を書き込みます。
  3. <img>を記述します。
  4. css のpositionで入れ替えを設定する


入れ替えの理屈

下に移したい<div>にposition:absoluteを指定して、任意の場所に指定します。

今回は<div>を<img>の下に配置しました。

absoluteを使うと、後続の要素はabsoluteが指定された要素の高さ分詰まってきます。floating-Boxと考え方は同様です。

f:id:pochiweb:20170121131400p:plain

f:id:pochiweb:20170121131539p:plain


<div>に対して、positionをbottom:0;にすることで、imgの下に配置して、padding-topを%で指定することでボックスの高さが変わることに対応します。
配置したい位置次第でこの数値は変更します。
この<section>を複数使用する場合は、sectionに対してmarginを設定します。<div>内の<p>などの高さ次第では、メディアクエリで何段階か指定が必要になります。


残念なあとがき

そもそもこの上下入れ替えは「sectionやarticleタグの直下は見出しタグでなければならない」というvalidationエラーが出ていた為に行なっていました。

しかし、最近ではこのsectionやarticleの直後にimgが有ることに対してエラーを吐かない様なのです。いや、そもそもそんなエラーは存在しなかったのかもしれないんですが。

今回記事を書くにあたりテスト的に色々な並びでバリデータかけてみましたが、不要な様です。