質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

1707閲覧

ons-list Thumbnails and titlesの下に文字を入れたい

todayyy

総合スコア31

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2020/03/30 20:36

編集2020/03/31 18:47

https://ja.onsen.io/v2/api/js/ons-list-item.html
上記のサイトにあるThumbnails and titles というテンプレートを使用しているのですが、その下の項目に文字やアイコンを表示させたいのですが表示されません。
イメージ説明

<ons-list> <ons-list-header>Thumbnails and titles</ons-list-header> <ons-list-item> <div class="left"> <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40"> </div> <div class="center"> <span class="list-item__title">Cutest kitty</span><span class="list-item__subtitle">On the Internet</span> </div> </ons-list-item> </ons-list>

<ons-list> <ons-list-header>Thumbnails and titles</ons-list-header> <ons-list-item> <div class="left"> <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40"> </div> <div class="center"> <span class="list-item__title">Cutest kitty</span><span class="list-item__subtitle">On the Internet</span> </div>    <p> test test test </p> </ons-list-item> <ons-list>

test test testが表示されません。イメージとしては
イメージ説明
青い線内に一つのons-list-itemとしてテキスト、アイコンを入れたいのですが、改善策はありますでしょうか?
ご回答よろしくお願いします。

イメージ説明
test-text 2020/3/31というテキストをサムネイル画像、タイトルの下に追加をしたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

簡単な方法として、サムネイルとタイトルの下にメッセージ分の余白を設け、position: absolute;でメッセージを表示します。
この場合のメッセージは、<div class="center"></div>の中に記述します。

HTML

1<ons-list> 2 <ons-list-header>Thumbnails and titles</ons-list-header> 3 <ons-list-item class="list-item-thumbnail"> 4 <div class="left"> 5 <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40"> 6 </div> 7 <div class="center"> 8 <span class="list-item__title">Cutest kitty</span> 9 <span class="list-item__subtitle">On the Internet</span> 10 <div class="message">test test test test test</div> 11 </div> 12 </ons-list-item> 13</ons-list>

CSS

1.list-item-thumbnail { 2 position: relative; 3} 4.list-item-thumbnail .list-item__center, 5.list-item-thumbnail .list-item--material__center, 6.list-item-thumbnail .list-item__left, 7.list-item-thumbnail .list-item--material__left { 8 padding-bottom: 36px; 9} 10.list-item-thumbnail .message { 11 position: absolute; 12 left: 16px; 13 bottom: 12px; 14}

イメージ説明

投稿2020/03/31 14:55

otak-lab

総合スコア276

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

todayyy

2020/03/31 20:57

イメージ通りできました!ありがとうございます!
guest

0

具体的な表現が分からないですが、こんな感じでしょうか?

html

1<ons-page> 2 <ons-list-header>Thumbnails and titles</ons-list-header> 3 <ons-list-item modifier="nodivider"> 4 <div class="left"> 5 <img class="list-item__thumbnail" src="https://placekitten.com/g/40/40"> 6 </div> 7 <div class="center"> 8 <span class="list-item__title">Cutest kitty</span> 9 <ons-list-item modifier="nodivider"> 10 下に追加 11 </ons-list-item> 12 </div> 13 </ons-list-item> 14 <ons-list-item> 15 <div class="left"> 16 <img class="list-item__thumbnail" src="http://placehold.jp/0/EFEFF4/EFEFF4/40x40.png"> 17 </div> 18 <div class="center">行の下に追加</div> 19 </ons-list-item> 20</ons-page>

動いているサンプルはこちら。

https://jsfiddle.net/nbjou3mk/

イメージ説明

行の下に追加 は上のリストを modifier="nodivider" にて下線を消しつつ、リストと同じ色の画像(透明の画像でも大丈夫です)で左側に空白を入れています。

投稿2020/03/31 01:39

moongift

総合スコア250

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

todayyy

2020/03/31 12:06

説明が分かりづらくて申し訳ないです。新たにlist-itemを追加するのではなく、1つのlist-itemとして表示させたいのです。 追記で画像を載せさせていただきます!
otak-lab

2020/03/31 14:05

todayyyさんが掲載したコードをベースにすると、ons-listで囲まれていないので正しく表示されません。
todayyy

2020/03/31 18:45

otak-labさん すみません入力ミスです。。。再度更新します!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問