Materialを利用してデザインを調整していきます。Materialは、Googleが主導しているAngularのマテリアルデザインのための公式ライブラリです。CSSでスタイルを定義しなくても簡単にデザイン調整ができるので、迅速にデザイン調整をしたい時などに重宝します。マテリアルデザインに関してはこちらの記事がまとまっていて参考になりました。Materialのボタンのコンポーネントを利用してデザイン調整していきます。Materialの使い方をパッと知りたい方はこちらをどうぞ。変更前の画面の状態がこちら。このコイン一覧ページのテーブルデザインを調整していきます。</tbody></table>テーブル形式で表示するようにhtmlファイルを変更します。10px;}cssでスタイルを調整します。htmlでテーブル形式で表示するように変更してcssを調整したことで、見やすくなったはずです。テーブル形式なので若干見やすくなりましたね。ページをつけて表示できるコイン数を増やす現状のページでは、画面の初期表示時のみAPIアクセスをしていますが、ページ指定して他のコインも確認できるようにしていきます。'3'];...まずはコンポーネントで「現在のページ」と「ページの配列」を用意します。</li></div>...htmlに以上の記述を追加します。「(click)="onclick(page)"」の記述によって、ボタンが押されたらページの番号が引数に指定されてonclickメソッドが呼ばれ、そのメソッドの処理の中でAPIアクセスがおこなわれて該当のページのコイン情報が表示されるようになりました。currentPage"」の箇所で、現在のページだった場合にはボタンを押すことができないようにしています。10px;}cssに以上の記述を追加します。ボタンを横並びに変更し、ボタンの下に10px分空白を作ります。ここまで変更ができたら、ページを確認してみましょう。Materialでデザイン調整をしていきます。MaterialとAnimationsをインストール。@angular/animations次にapp.moduleにモジュールを追加します。],...これでhtmlでモジュールを利用できるようになったので、htmlファイルでモジュールを利用します。「」をhtmlファイルに追加し、デザイン調整をしたいbuttonに「mat-raised-button」を追加します。Materialが適用されたはずです。画面を確認してみます。ボタンのデザインがマテリアルデザインに調整されてますね。他のコンポーネントもこちらから確認できるので、きになる方は使ってみると楽しいかと。Materialを利用してデザイン調整をしていきましたが、CSSの調整はいくら時間をかけても終わりのない世界だと思うので、簡単に最低限のデザイン調整ができるのはありがたいなと感じました。次回は、以下のことを実装していきます。・コイン一覧ページからコイン詳細ページに遷移Angularチュートリアルだけで分からない箇所を理解するために、AngularアプリケーションプログラミングのKindle版を読んでいますが分かりやすくてオススメです。(発売)世界最大級のオンライン学習サイトUdemy↑UdemyでAngularのプログラミング講座が提供されているので、基本的な文法や書き方はこちらで学ぶとよいです。前回の記事でAngularの基本的な学習方法に関して紹介しましたが...2018-03-20はてなブログ記事シェアボタンのデザインを変えてクリックしやすくする方法(コピペでOK)はてなのデフォルトの記事シェアボタンって超押しづれえ...。積極的にさぼるために頑張る25歳Webエンジニアのブログ。プログラミング・エンジニアのスキルアップ・ブログ運営についてよく書きます。@virtual_techXプログラムとか技術の話はQiitaでよく書いてます。Webエンジニア向けです。virtual_techXはてなブログをはじめよう!virtual-surferさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。