アイコンと文字列を横並びにする方法【Onsen UI】

html
1      <!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
15
16  <script>
17    ons.ready(function(){
18    document.addEventListener('init', function(event) {
19        time();
20        setInterval(time,1000);
21    }, false);
22});
23
24function time(){
25    var now = new Date();
26    document.getElementById("time").innerHTML = now.toLocaleTimeString();
27}
28    ons.ready(function() {
29      console.log("Onsen UI is ready!");
30    });
31
32    window.fn = {};
33    window.fn.open = function() {
34      var menu = document.getElementById('menu');
35      menu.open();
36    };
37    window.fn.load = function(page) {
38      var content = document.getElementById('content');
39      var menu = document.getElementById('menu');
40      content
41        .load(page)
42        .then(menu.close.bind(menu));
43    };
44
45    if (ons.platform.isIPhoneX()) {
46      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
47      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
48    }
49  </script>
50</head>
51<body>
52  <ons-splitter>
53    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
54      <ons-page>
55        <ons-list>
56          <ons-list-item onclick="fn.load('home.html')" tappable>
57            <h5><i style="float: left;"class="material-icons blue">home</i>Home</h5>
58          </ons-list-item>
59          <ons-list-item onclick="fn.load('settings.html')" tappable>
60            <h5><i style="float: left;"class="material-icons blue">settings</i>Settings</h5>
61          </ons-list-item>
62          <ons-list-item onclick="fn.load('about.html')" tappable>
63            <h5><i style="float: left;"class="material-icons blue">pie_chart</i>Chart</h5>
64          </ons-list-item>
65          <ons-list-item onclick="fn.load('about.html')" tappable>
66            <h5><i style="float: left;"class="material-icons blue">help_outline</i>How To</h5>
67          </ons-list-item>
68        </ons-list>
69      </ons-page>
70    </ons-splitter-side>
71    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
72  </ons-splitter>
73
74  <ons-template id="home.html">
75    <ons-page>
76      <ons-toolbar-button onclick="fn.open()">
77      <i style="float: left;"class="material-icons bigblue">reorder</i>
78      </ons-toolbar-button>
79      <i style="float: right;"class="material-icons bigblue">help_outline</i>
80       <h1 id="time"></h1>
81    </ons-page>
82  </ons-template>
83
84  <ons-template id="settings.html">
85  <ons-page>
86    <ons-toolbar>
87      <div class="left">
88        <ons-toolbar-button onclick="fn.open()">
89          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
90        </ons-toolbar-button>
91      </div>
92      <div class="center">
93        Settings
94      </div>
95    </ons-toolbar>
96  </ons-page>
97  </ons-template>
98
99  <ons-template id="about.html">
100  <ons-page>
101    <ons-toolbar>
102      <div class="left">
103        <ons-toolbar-button onclick="fn.open()">
104          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
105        </ons-toolbar-button>
106      </div>
107      <div class="center">
108        About
109      </div>
110    </ons-toolbar>
111  </ons-page>
112  </ons-template>
113
114</body>
115</html>
116

上記の状態で右と左にアイコンが並ぶのですが、その間に

html
1<h1 id="time"></h1>

を挟みたいのですが、

html
1  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2<div class="f-container">
3	<div class="f-item"><ons-toolbar-button onclick="fn.open()">
4      <i style="float: left;"class="material-icons bigblue">reorder</i>
5      </ons-toolbar-button></div>
6  <div class="f-item"><h1 id="time">a</h1></div>
7	<div class="f-item"><i style="float: right;"class="material-icons bigblue">help_outline</i></div>
8</div>

上記のコードと

css
1.f-container {
2  display:flex;
3	flex-diretion: row;
4}

js
1ons.ready(function(){
2    document.addEventListener('init', function(event) {
3        time();
4        setInterval(time,1000);
5    }, false);
6});
7
8function time(){
9    var now = new Date();
10    document.getElementById("time").innerHTML = now.toLocaleTimeString();
11}

とcodepenにかいたのですが、見ればわかるとおりまず時間が表示されないのと、<h1></h1>の中だけ少し低くなってしまいます。これを直すにはどうすればいいでしょうか。
Monacaで動かすのを前提でお願いします。

mistn

2019/11/17 12:15

ソースコードは全文書いてもらえませんか？全文が長くなるならうまくいかない状態が再現できる最小のコードでもいいです。あと、「どうもうまくいきません。」では何がうまくいかないのかわからないので詳しくお願いします。それとどういう結果になったらうまくいったことになるのかも詳しくお願いします。

kyoya0819

2019/11/17 12:44

試したことはなんですか？

taiyakix

2019/11/17 12:59

Flexboxです。あと、display: inline-block;

mistn

2019/11/17 13:49

追記してもらったコードに挟みたいというpタグがどこにも見当たらないのですがどこに挟むのでしょうか？ codepenではOnsen UIが読み込まれてないので別の問題が発生してますね。今回は使わないほうがいいです。

taiyakix

2019/11/17 21:53

すいません codepenで時間が見当たらないのは当然でしたpタグではなくh1タグでした修正しました

kyoya0819

2019/11/17 22:20

間に挟みたいというのは具体的にどのような結果を期待していますか？

taiyakix

2019/11/17 22:53

同じ高さでアイコン、文字、アイコンと並べたいということです

mistn

2019/11/18 05:22

codepenにコードは無視するとして、問題のある個所は <ons-template id="home.html"></ons-template> で囲まれている箇所であってますか？

taiyakix

2019/11/18 06:53

そうですコメントアウトで書かないとわからないですよねすみません

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<ons-template id="home.html">
2    <ons-page>
3        <!-- 変更点1 -->
4        <ons-toolbar>
5            <ons-toolbar-button onclick="fn.open()" class="left">
6                <i class="material-icons bigblue">reorder</i>
7            </ons-toolbar-button>
8            <!-- 変更点2 -->
9            <div id="time" class="center" style="font-size: 200%"></div>
10            <i class="material-icons bigblue right">help_outline</i>
11        </ons-toolbar>
12    </ons-page>
13</ons-template>

大きな変更点としては2つです。

1つ目はons-toolbarタグを追加したことです。ons-toolbar-buttonタグを使うならセットにしましょう。
(ほかのページではセットで使っているので忘れただけですかね？)

2つ目はh1タグではなくdivタグに変えたことです。今回のように並べて表示したい場合は見出し用のh1タグを使う意味はないと思います。文字を大きくしたいならcssを書いてあげればいいです。上のコードではfont-size: 200%を追加しています。

小さな変更としては、ボタンの配置をOncen UIで用意されたcssを適用するようにしています。
classにleft center rightを与えることで左、中央、右に配置することができます。

投稿2019/11/18 08:35

mistn

総合スコア1191

taiyakix

2019/11/18 09:02

小さな変更に対して class="center"の意味を初めて知りました。androidだと中央にならないのはなぜですかね。変更点2に対して javascriptのとおり、h1タグでは時間を取得して表示していますがdivタグでもいいのでしょうか（確認します）変更点1に対して ons-toolbarはあえて使っていません。ons-toolbar-buttonで挟んだ理由はonclickでmenuを出したかったからです。もしかして、divタグにonclick="fn.open()"と書いて囲えばいいのでしょうか。

mistn

2019/11/18 09:29

android端末で中央に表示されないのはおそらく仕様です。中方に表示したい場合はstyleに text-align: center を追加すれば中央に表示されます。 divタグでも大丈夫です。もちろんidはつけていないとだめですが。 divタグにonclickをつけても動きますし、iタグにonclickをつけても動きます。

taiyakix

2019/11/18 09:52

ありがとうございます！実はtext-align: center;をつけると、androidの場合、アイコンを除いた横幅の中央になるので少しずれてしまうのですがどうすればいいでしょうか

mistn

2019/11/18 10:06

普通はそうなるものではないのですか？ cssについてはあまり詳しくないので解決できないようでしたら新たに質問をしたらどうでしょうか。

taiyakix

2019/11/18 10:18

了解です。色々とお手数かけてすみませんでした

行動規範の内容に同意します