急いでいます！

( html) 位置指定方法を教えてください。

解決済

質問者：godhappy
質問日時：2019/03/13 09:11
回答数：1件

枠の集合体のサイトです。
枠に文字を書きますが、常に変更されます。

質問内容
１、画像のようにhtmlで書いたら指定の場所へ表示させたいです。文字のみです。
２、htmlへ書くときは分かりやすい順列させたいです。
このＵＲＬです。（編集、更新機能は現在ついていますが排除させますのでここでは考えません。）

ご存知の方、htmlを教えてください。

お願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2019/03/13 12:40

こんにちは

方法はいろいろ考えられると思います。

例として、高さ4行×3列の表形式を考えて、最初の列はrowspan=4、次の列はrowspan=2のように結合した形に各項目を落とし込めば、ご提示のようなレイアウトになると考えられます。
そのままにtableでレイアウトしておいて、HTMLの記述から（スクリプトなどを用いて）転記するという方法もありますし、リストの記述をtable配置で表示することも考えられます。

別の発想として、それぞれの項目をposition:absoluteで直接配置するような方法も考えられるでしょう。
（この方法が、一番位置の自由度に関しては高いかも知れません）

以下は、Flexboxを利用して上記のテーブル配置と同じような配置を行う一例です。
※ HTMLへの記述はリスト（ ul、li ）を利用して記述するものと想定しています。
※ 親要素（=ul）の高さ寸法を必ず指定しておく必要があります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
ul {
width:40em; height:400px;
display:flex;
flex-flow:column wrap;
justify-content:flex-start;
align-items:flex-start;
}
li {
width:30%; height:25%;
list-style-type:none;
display: inline-flex;
flex-direction:column;
justify-content:center;
}
li:first-child { height:100%; }
li:nth-child(2), li:nth-child(3) { height:50%; }
</style>

</head>
<body>

<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
<li>sixth</li>
<li>seventh</li>
</ul>

</body>
</html>