JavaScriptでdivの位置を別のdivを基準に設定する方法｜CSS flex-directionの活用
あるdivを基準にして別のdivの位置を設定・入れ替えたい場合は、CSSのFlexboxレイアウトと「flex-direction」プロパティを使うのが最もシンプルな方法です。Flexboxでは、親要素（コンテナー）に対して子要素の並び順や方向を自由に指定できるため、HTMLの記述順序に左右されずに表示位置をコントロールできます。
CSSスタイルの定義
まずは、以下のようなCSSスタイルを用意します。flex-direction に column-reverse を指定すると、子要素が縦方向に逆順で並びます。
<style>
.demo{
display: flex;
flex-direction: column-reverse;
}
</style>
この設定により、HTML内では後に書かれている .demo2 のdivが先頭（上）に表示され、.demo1 はその下に配置されるようになります。
サンプルコード（完全版）
実際に動作する完全なコード例を見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.demo{
display: flex;
flex-direction: column-reverse;
}
</style>
</head>
<body>
<div class="demo">
<div class="demo1">DIV_DEMO1</div>
<div class="demo2">DIV_DEMO2</div>
</div>
<script>
</script>
</body>
</html>
プログラムの実行方法
上記のプログラムを実行するには、ファイル名を「index.html」（任意の名前でも可）として保存し、VS Codeエディターでファイルを右クリックして「Open with Live Server」を選択してください。ブラウザー上で結果をすぐに確認できます。
出力結果
実行すると、次のように DIV_DEMO2 が先頭（上）に表示され、DIV_DEMO1 がその下に配置された状態で出力されます。
-
JavaScriptをHTMLファイルに埋め込む方法をわかりやすく解説
JavaScriptをHTMLファイルに埋め込む方法は、大きく分けて2つあります。<script>タグ内に直接コードを記述する「インライン方式」と、src属性で外部の.jsファイルを読み込む「外部ファイル方式」です。 ここでは、両方の方法を組み合わせた具体的なサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo
-
JavaScriptで<strong>タグにテキストを設定する方法
Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1：<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st