# 一覧画面で添付フィールドへ保存した画像を大きく表示させたい

**URL:** <https://community.cybozu.dev/t/topic/10114>\
**Category:** kintone 開発相談\
**Created:** [2025 年 2 月 24 日午前 7:33 UTC](https://community.cybozu.dev/t/topic/10114 "2025-02-24T07:33:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tukasa](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@Tukasa](https://community.cybozu.dev/u/Tukasa)\
**Post date:** [2025 年 2 月 24 日午前 7:33 UTC](https://community.cybozu.dev/t/topic/10114/1 "2025-02-24T07:33:11Z")

</div>

一覧画面で添付フィールドへ保存した画像の内容を大きく表示させたいです。（通常表示できるサムネイル画像表示では、小さいのです。）

下記を「PC用のCSSファイル」に設定しても実現できませんでした。

.attachment-thumbnail {  
width: 800px;  
height: auto;  
}

CSSでは実現は難しいのでしょうか、  
JavaScriptが必要な場合は、どのように記載したらよいのでしょうか。  
初心者の質問で申し訳ございませんが、ご教示頂けますと幸いです。

---

<div class="post-metadata">

**Author:** ![lemon\_sour](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/lemon_sour/32/1469_2.png) [@lemon\_sour](https://community.cybozu.dev/u/lemon_sour)\
**Post date:** [2025 年 2 月 24 日午後 1:04 UTC](https://community.cybozu.dev/t/topic/10114/2 "2025-02-24T13:04:50Z")

</div>

こんにちわ。

CSSでもjavascritpでもどちらでも実現可能です。CSSの方が一般的かもしれません。

なお、詳細画面ではなく、一覧画面という認識であってますでしょうか？  
一覧画面におけるほかのフィールドの表示状況にもよって微調整が必要そうなので詳細なサンプルはご提示できませんが、ヒントやテクニックとしてご参考いただければという所を記載します。

1：「開発者ツール」を活用し、どのタグに何を設定するとどう変わるのか見てみてください。いきなりCSSファイルを編集するのではなく、希望の変更になるCSSを見つけていただき、その後にファイルに記述していけばよいと思います。

２：対象の画像のimgタグだけではなくその上位にあるタグ（例えばtdとかdivとか）にもサイズを大きくするCSSが必要かもしれません。

３：CSSには優先順位があります。クラス名１つで設定したCSSより２つで設定したCSSの方が優先されます。サンプルのCSSよりkintoneデフォルトのCSSの方がおそらく優先されるので、複数のクラス名でCSSを記載する、もしくはimportantをつけるなどの必要があると思います。

４：一覧画面で相違なければ対象フィールドの幅は大きくしておいた方がよいと思います。

上記１～４はCSSでもjavascriptで制御するにしても、承知しておいた方がよい内容となります。

不明な単語等は検索していただき、解決に至っていただければと思います。

---

<div class="post-metadata">

**Author:** ![Tukasa](https://avatars.discourse-cdn.com/v4/letter/t/858c86/32.png) [@Tukasa](https://community.cybozu.dev/u/Tukasa)\
**Post date:** [2025 年 2 月 25 日午後 1:32 UTC](https://community.cybozu.dev/t/topic/10114/3 "2025-02-25T13:32:41Z")

</div>

lemon\_sour 様

いろいろと、ヒントを頂きありがとうございます。  
画像を大きく表示したいのは、一覧画面となります。  
頂いたヒントを元に、検索しながら試行錯誤してみます。  
ありがとうございました。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2025 年 2 月 28 日午後 8:40 UTC](https://community.cybozu.dev/t/topic/10114/4 "2025-02-28T20:40:00Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。