item.html物件詳細画面の項目をPC表示で縦1列から3列にしてスマホでは縦１列にレスポンシブにする方法
| カテゴリ | 【CMS】高機能版（不動産・求人・自治体など） | ||
|---|---|---|---|
| タイトル | item.html物件詳細画面の項目をPC表示で縦1列から3列にしてスマホでは縦１列にレスポンシブにする方法 | ||
| 質問者 | かがやきさん (1507) | ||
| 質問日時 | 2023/06/05 15:40 | 回答数 | 4 |
| メディア共有 |
Tweet
|
||
| 参考ファイル | pc1.png | ||
| 質問内容 | |||
|
tp_fudosan16_green01 テンプレートを利用させていただく予定にしております。 |
|||
質問に回答するには、ログインしてください。
回答（4件）
- 回答者：
- かがやきさん (1507)
- 回答日時：
- 2023/06/07 16:53
サンプルコードありがとうございます。参考にして変更してみます。
不動産テンプレートに参考にできる3列がないか探しましたがありませんでした。求人向けテンプレートにあったのですね。
そちらも参考にさせていただきます。
ご丁寧にご返答頂きありがとうございます。
また不明な点などありましたらよろしくお願いいたします。ありがとうございました。
- 回答者：
- テンプレートパーティーサポートさん (21)
- 回答日時：
- 2023/06/06 17:11
お世話になっております、テンプレートを制作しているテンプレートパーティのサポート担当です。
２列または３列にする方法ですが、以下をやってみて下さい。（floatでなくflexにしました）
①item.htmlの既存のテーブルの外側に１つブロック(以下の例ではc-box)を作り、その中に２列または３列分のテーブルタグを入れて下さい。
例：
<div id="c-box">
<table class="ta1">
・・・
</table>
<table class="ta1">
・・・
</table>
</div>
②次にcssフォルダのstyle.cssの前半（大きな端末用のブロック内）に以下を追加。ここの30%は３列の場合です。２列にするなら48%などに変更して下さい。
#c-box {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#c-box .ta1 {
width: 30%;
}
③同じstyle.cssの後半（小さな端末用）に以下を追加。３列だったものを１列にするスタイルです。
#c-box {
display: block;
}
#c-box .ta1 {
width: 100%;
}
上記を設定したものが以下です。（土台が求人向けになっていますが、結論は同じです。）
https://q19cms.com/files_m/q19_bbs/1806/?act=bukken&id=5
> また出力を個別にする場合ですが、物件名は {val item/info/title} で出力されていますが、
> 各項目を出力させる場合はどのように指定すればよろしいのでしょうか？
上記ですが、マニュアルが以下にありますので一度ご覧下さい。
https://q19cms.com/files_m/cms_db_fudosan/stepothers_item4.html
同じ高機能版タイプの「求人向け」は、詳細ページが個別出力になっていますので試用版をDLしてご覧頂くと参考になるかと思います。
大変参考になりました
- 回答者：
- かがやきさん (1507)
- 回答日時：
- 2023/06/06 12:54
十分なCSSの知識がないので間違った事を言っていたらご指摘ください。
eachで自動出力にならないか、考えておりました。やはりeachで自動出力はできないのですね。承知いたしました。
>それから、もし３列にする場合ですが、添付された画像のようにすっきりとはならない可能性もあります。
>項目によって入力されるテキスト数の差が大きいと、１列分のテーブルだけ高さが短かったり、逆に長かったりする可能性があります。
テーブルの長さが凸凹になる件、承知いたしました。項目数が12～15なので2列が妥当かもしれませんがfloatを使ってやってみます。
サンプル程度でよろしいのですが、floatを使ったCSSをお教えいただくことは可能でしょうか？
また出力を個別にする場合ですが、物件名は {val item/info/title} で出力されていますが、各項目を出力させる場合はどのように指定すればよろしいのでしょうか？
{val item/info1/value} 1番目の項目
{val item/info2/value} 2番目の項目
{val item/info5/value} 5番目の項目
{val item/info13/value} 地図
このような感じよろしいのでしょうか？よろしくお願いいたします。
- 回答者：
- テンプレートパーティーサポートさん (21)
- 回答日時：
- 2023/06/05 16:03
お世話になっております、テンプレートを制作しているテンプレートパーティのサポート担当です。
３列表示についてですが、詳細ページの項目の出力は個別に行われていますか？それともeachで自動出力になっていますか？
個別出力であればご希望のレイアウトは可能だと思いますが、eachを使った自動出力の場合は、途中で切る事ができないので難しいと思います。
それから、もし３列にする場合ですが、添付された画像のようにすっきりとはならない可能性もあります。
項目によって入力されるテキスト数の差が大きいと、１列分のテーブルだけ高さが短かったり、逆に長かったりする可能性があります。
それでもよければ、tableを３列にfloatで横並びにしておき、小さな画面ではfloatを解除するだけで対応できるかと思います。（※冒頭書いたようにeachタイプではご希望を叶える事はできません。）
