# 【Kintone】ポータルのモバイルcssをカスタマイズする時の要素の調べ方

**URL:** <https://community.cybozu.dev/t/topic/4232>\
**Category:** kintone 開発相談\
**Created:** [2019 年 7 月 31 日午前 12:41 UTC](https://community.cybozu.dev/t/topic/4232 "2019-07-31T00:41:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account974](https://avatars.discourse-cdn.com/v4/letter/l/3e96dc/32.png) [@Legacy\_Account974](https://community.cybozu.dev/u/Legacy_Account974)\
**Post date:** [2019 年 7 月 31 日午前 12:41 UTC](https://community.cybozu.dev/t/topic/4232/1 "2019-07-31T00:41:23Z")

</div>

お世話になります。

ポータルのCSSについてモバイル版の調整をしたく、スマートフォン用のCSSファイルをアップロードしました。

例えば、以下のコードはPC用では正しく動作します。

```
.ocean-portal-announcement-text div img {
width:50px!important;
}

```

&nbsp;

しかしながら、モバイル版では恐らく動的にJSがモバイル版で要素を再構築していることから同じセレクタではCSSを適用させることができません。

&nbsp;

基本的な質問なのですが、どのようにしたら、CSS適用させたい要素をモバイル版で調べればよいのでしょうか？

宜しくお願い申し上げます。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2019 年 7 月 31 日午前 1:23 UTC](https://community.cybozu.dev/t/topic/4232/2 "2019-07-31T01:23:54Z")

</div>

下記がご参考になると思います。

[Qiita kintone 開発で Chrome デベロッパーツールを使おう](https://qiita.com/rex0220/items/58122efda9f94f669ec4)

Chrome でモバイル表示すると、DOM を調べられます。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account974](https://avatars.discourse-cdn.com/v4/letter/l/3e96dc/32.png) [@Legacy\_Account974](https://community.cybozu.dev/u/Legacy_Account974)\
**Post date:** [2019 年 7 月 31 日午前 2:18 UTC](https://community.cybozu.dev/t/topic/4232/3 "2019-07-31T02:18:36Z")

</div>

コメントありがとうございます。

```
kintone.events.on('portal.show', function(event) {

kintone.mobile.app.record.get()  
})

```

では何も表示されないため、記事にあるようにアプリ詳細画面等でしかDOM構造が出力されないのではと思われます

宜しくお願い申し上げます。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2019 年 7 月 31 日午前 2:31 UTC](https://community.cybozu.dev/t/topic/4232/4 "2019-07-31T02:31:32Z")

</div>

誤解があるようです。

kintone.mobile.app.record.get() は、アプリ詳細画面等でレコード情報を取得する関数です。

&nbsp;

「開発で Chrome デベロッパーツールを使おう」のモバイル表示のDOM操作の部分を見てください。

[https://qiita.com/rex0220/items/58122efda9f94f669ec4#%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E8%A1%A8%E7%A4%BA](https://qiita.com/rex0220/items/58122efda9f94f669ec4#%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E8%A1%A8%E7%A4%BA)

&nbsp;

Chrome でモバイル表示のポータル画面を見る手順です。

・Chrome でポータル画面を表示

・Chrome デベロッパーツールで、モバイル表示に切り替え

・画面を再表示

・デベロッパーツールで、Elements タブを見ると DOM 構造が分かります。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account974](https://avatars.discourse-cdn.com/v4/letter/l/3e96dc/32.png) [@Legacy\_Account974](https://community.cybozu.dev/u/Legacy_Account974)\
**Post date:** [2019 年 7 月 31 日午前 4:01 UTC](https://community.cybozu.dev/t/topic/4232/5 "2019-07-31T04:01:50Z")

</div>

コメントありがとうございます。

デベロッパーツールの使い方を誤解しておりました。モバイル版に切り替えても普段、DOM構造がわからないなと

思っていましたが、再表示すると切り替わるのですね。

助かりました、宜しくお願い申し上げます。