SlideShare a Scribd company logo
1 of 21
Xamarin.Forms CSS
触ってみました
2018/5/23 初心者歓迎XamarinのLT会!Xamarin入門者の集い #4
自己紹介
伊藤 悠太 / Ito Yuta / itaoyuta
CINRA, Inc.のエンジニア/TD
主な技術的興味はXamarin, JavaScript, Docker, Vim
HereNow
アジアのシティガイド(9都市・5ヶ国語)
2017年3月 Xamarinで作りました
HereNow iOS HereNow Androiditaoyuta blog
Supported by
本日のメニュー
・指定の重複
・優先順位
・詳細な指定で優先順位が変わるか
・important
・XAMLでの指定重複でどちらが優先
・複数あてると全部当たってくるのか
・class 2以上
・ID, classパターン
・動的変更
・クラス変更時適用されるのか
参考
[Microsoft Doc]
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/styles/css/
・指定の重複
・優先順位
・詳細な指定で優先順位が変わるか
・important
・XAMLでの指定重複でどちらが優先
・複数あてると全部当たってくるのか
・class 2以上
・ID, classパターン
・動的変更
・クラス変更時適用されるのか
参考
[Microsoft Doc]
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/styles/css/
記述の仕方、“>”の前後に空白なくても読んでくれた
詳細指定で優先順位が変更されるわけではない
あれ、ちょっと想定外
・指定の重複
・優先順位
・詳細な指定で優先順位が変わるか
・important
・XAMLでの指定重複でどちらが優先
・複数あてると全部当たってくるのか
・class 2以上
・ID, classパターン
・動的変更
・クラス変更時適用されるのか
参考
[Microsoft Doc]
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/styles/css/
サポートプロパティリストにないし効かないっすよね、すいません...
・指定の重複
・優先順位
・詳細な指定で優先順位が変わるか
・important
・XAMLでの指定重複でどちらが優先
・複数あてると全部当たってくるのか
・class 2以上
・ID, classパターン
・動的変更
・クラス変更時適用されるのか
参考
[Microsoft Doc]
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/styles/css/
おぉ!ちょっと意外
そもそも読んでくれてる?くれてる!
・指定の重複
・優先順位
・詳細な指定で優先順位が変わるか
・important
・XAMLでの指定重複でどちらが優先
・複数あてると全部当たってくるのか
・class 2以上
・ID, classパターン
・動的変更
・クラス変更時適用されるのか
参考
[Microsoft Doc]
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/styles/css/
属性リストで指定はカンマ区切り、効いてる!
ちなみにこのパターンもちゃんと効きました
・指定の重複
・優先順位
・詳細な指定で優先順位が変わるか
・important
・XAMLでの指定重複でどちらが優先
・複数あてると全部当たってくるのか
・class 2以上
・ID, classパターン
・動的変更
・クラス変更時適用されるのか
参考
[Microsoft Doc]
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/styles/css/
ばっちり効いてます
・指定の重複
・優先順位
・詳細な指定で優先順位が変わるか
・important
・XAMLでの指定重複でどちらが優先
・複数あてると全部当たってくるのか
・class 2以上
・ID, classパターン
・動的変更
・クラス変更時適用されるのか
参考
[Microsoft Doc]
https://docs.microsoft.com/ja-jp/xamarin/xamarin-forms/user-interface/styles/css/
普通にやるだけじゃだめそうでした
この辺りにヒント??
引き続き色々試して実装していきたいと思います。
ご静聴、ありがとうございました!

More Related Content

What's hot

Xamarin概要と活用方法
Xamarin概要と活用方法Xamarin概要と活用方法
Xamarin概要と活用方法Yoshito Tabuchi
 
Xamarin 概要 2017/01/15
Xamarin 概要 2017/01/15Xamarin 概要 2017/01/15
Xamarin 概要 2017/01/15Yoshito Tabuchi
 
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~de:code 2017
 
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92Yoshito Tabuchi
 
BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介Yoshito Tabuchi
 
XamarinStudio勉強会 2014/09/08
XamarinStudio勉強会 2014/09/08XamarinStudio勉強会 2014/09/08
XamarinStudio勉強会 2014/09/08孝文 田村
 
Xamarin.formsとカスタムコントロールの話
Xamarin.formsとカスタムコントロールの話Xamarin.formsとカスタムコントロールの話
Xamarin.formsとカスタムコントロールの話Masuda Tomoaki
 
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Tatsuji Kuroyanagi
 
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成Yoshito Tabuchi
 
Xamarin Native vs Xamarin Forms
Xamarin Native vs Xamarin FormsXamarin Native vs Xamarin Forms
Xamarin Native vs Xamarin FormsTomohiro Suzuki
 
10分でわかる無料になったXamarin
10分でわかる無料になったXamarin10分でわかる無料になったXamarin
10分でわかる無料になったXamarinYoshito Tabuchi
 
Xamarinは辛いよ
Xamarinは辛いよXamarinは辛いよ
Xamarinは辛いよTakkiiii
 
Xamarin × Visual Studio Updates
Xamarin × Visual Studio UpdatesXamarin × Visual Studio Updates
Xamarin × Visual Studio Updates友太 渡辺
 
Xamarin 社内勉強会の LT 資料
Xamarin 社内勉強会の LT 資料Xamarin 社内勉強会の LT 資料
Xamarin 社内勉強会の LT 資料Yoshito Tabuchi
 
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編Yoshito Tabuchi
 

What's hot (20)

Xamarin概要と活用方法
Xamarin概要と活用方法Xamarin概要と活用方法
Xamarin概要と活用方法
 
Xamarin 概要 2017/01/15
Xamarin 概要 2017/01/15Xamarin 概要 2017/01/15
Xamarin 概要 2017/01/15
 
Docmgt_004
Docmgt_004Docmgt_004
Docmgt_004
 
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
[MW08] de:code イベントアプリの作り方 ~ Xamarin.Forms で開発しています ~
 
Docmgt_001
Docmgt_001Docmgt_001
Docmgt_001
 
Docmgt_003
Docmgt_003Docmgt_003
Docmgt_003
 
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
 
BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介
 
XamarinStudio勉強会 2014/09/08
XamarinStudio勉強会 2014/09/08XamarinStudio勉強会 2014/09/08
XamarinStudio勉強会 2014/09/08
 
Xamarin概要
Xamarin概要Xamarin概要
Xamarin概要
 
Xamarin.formsとカスタムコントロールの話
Xamarin.formsとカスタムコントロールの話Xamarin.formsとカスタムコントロールの話
Xamarin.formsとカスタムコントロールの話
 
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
 
Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成Xamarin を使用したC# によるモバイルアプリ作成
Xamarin を使用したC# によるモバイルアプリ作成
 
Xamarin Native vs Xamarin Forms
Xamarin Native vs Xamarin FormsXamarin Native vs Xamarin Forms
Xamarin Native vs Xamarin Forms
 
Xamarin の救世主 Unity !
Xamarin の救世主 Unity !Xamarin の救世主 Unity !
Xamarin の救世主 Unity !
 
10分でわかる無料になったXamarin
10分でわかる無料になったXamarin10分でわかる無料になったXamarin
10分でわかる無料になったXamarin
 
Xamarinは辛いよ
Xamarinは辛いよXamarinは辛いよ
Xamarinは辛いよ
 
Xamarin × Visual Studio Updates
Xamarin × Visual Studio UpdatesXamarin × Visual Studio Updates
Xamarin × Visual Studio Updates
 
Xamarin 社内勉強会の LT 資料
Xamarin 社内勉強会の LT 資料Xamarin 社内勉強会の LT 資料
Xamarin 社内勉強会の LT 資料
 
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
 

Similar to Xamarin.Forms CSS 触ってみました

Introduction to Xamarin - JXUG 20171209
Introduction to Xamarin - JXUG 20171209Introduction to Xamarin - JXUG 20171209
Introduction to Xamarin - JXUG 20171209Takeshi Fujimoto
 
Xamarin概要と活用方法
Xamarin概要と活用方法Xamarin概要と活用方法
Xamarin概要と活用方法Yoshito Tabuchi
 
20171202 Xamarinの歩き方
20171202 Xamarinの歩き方20171202 Xamarinの歩き方
20171202 Xamarinの歩き方Yoshito Tabuchi
 
Xamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターンXamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターン一希 大田
 
そろそろXamarin使ってみませんか 1
そろそろXamarin使ってみませんか 1そろそろXamarin使ってみませんか 1
そろそろXamarin使ってみませんか 1Naoyuki Sano
 
NET Standard と Xamarin
NET Standard と XamarinNET Standard と Xamarin
NET Standard と XamarinYoshito Tabuchi
 
2018/06/24 .NETラボ Xamarinトーク
2018/06/24 .NETラボ Xamarinトーク2018/06/24 .NETラボ Xamarinトーク
2018/06/24 .NETラボ XamarinトークKenshiro Fukuda
 
Developers.io.札幌 xamarinってどうよ
Developers.io.札幌 xamarinってどうよDevelopers.io.札幌 xamarinってどうよ
Developers.io.札幌 xamarinってどうよShinichi Hirauchi
 
Xamarin で クラシックデスクトップ 2
Xamarin で クラシックデスクトップ 2Xamarin で クラシックデスクトップ 2
Xamarin で クラシックデスクトップ 2m ishizaki
 
かけ算で使いこなす Xamarin
かけ算で使いこなす Xamarinかけ算で使いこなす Xamarin
かけ算で使いこなす XamarinTatsuji Kuroyanagi
 
Xamarin.Forms.WPF を試してみた
Xamarin.Forms.WPF を試してみたXamarin.Forms.WPF を試してみた
Xamarin.Forms.WPF を試してみたm ishizaki
 
.NET Standard で SQLServer と接続してみた
.NET Standard で SQLServer と接続してみた.NET Standard で SQLServer と接続してみた
.NET Standard で SQLServer と接続してみたm ishizaki
 
ゆるふわ Xamarin Tips
ゆるふわ Xamarin Tipsゆるふわ Xamarin Tips
ゆるふわ Xamarin TipsDaiki Kawanuma
 
ちょっとエモい話
ちょっとエモい話ちょっとエモい話
ちょっとエモい話Yoshito Tabuchi
 
2024-01-26_サーバーワークス_クラウドエンジニア交流会_マルチテナント構成に最適化したTerraform運用
2024-01-26_サーバーワークス_クラウドエンジニア交流会_マルチテナント構成に最適化したTerraform運用2024-01-26_サーバーワークス_クラウドエンジニア交流会_マルチテナント構成に最適化したTerraform運用
2024-01-26_サーバーワークス_クラウドエンジニア交流会_マルチテナント構成に最適化したTerraform運用oriishitakahiro
 
Xamarin.Forms のこれまでとこれから
Xamarin.Forms のこれまでとこれからXamarin.Forms のこれまでとこれから
Xamarin.Forms のこれまでとこれからYoshito Tabuchi
 
XamarinにMono申す!
XamarinにMono申す!XamarinにMono申す!
XamarinにMono申す!Akira Hatsune
 

Similar to Xamarin.Forms CSS 触ってみました (18)

Introduction to Xamarin - JXUG 20171209
Introduction to Xamarin - JXUG 20171209Introduction to Xamarin - JXUG 20171209
Introduction to Xamarin - JXUG 20171209
 
Xamarin概要と活用方法
Xamarin概要と活用方法Xamarin概要と活用方法
Xamarin概要と活用方法
 
20171202 Xamarinの歩き方
20171202 Xamarinの歩き方20171202 Xamarinの歩き方
20171202 Xamarinの歩き方
 
Xamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターンXamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターン
 
そろそろXamarin使ってみませんか 1
そろそろXamarin使ってみませんか 1そろそろXamarin使ってみませんか 1
そろそろXamarin使ってみませんか 1
 
NET Standard と Xamarin
NET Standard と XamarinNET Standard と Xamarin
NET Standard と Xamarin
 
2018/06/24 .NETラボ Xamarinトーク
2018/06/24 .NETラボ Xamarinトーク2018/06/24 .NETラボ Xamarinトーク
2018/06/24 .NETラボ Xamarinトーク
 
Developers.io.札幌 xamarinってどうよ
Developers.io.札幌 xamarinってどうよDevelopers.io.札幌 xamarinってどうよ
Developers.io.札幌 xamarinってどうよ
 
Xamarin で クラシックデスクトップ 2
Xamarin で クラシックデスクトップ 2Xamarin で クラシックデスクトップ 2
Xamarin で クラシックデスクトップ 2
 
かけ算で使いこなす Xamarin
かけ算で使いこなす Xamarinかけ算で使いこなす Xamarin
かけ算で使いこなす Xamarin
 
DataTable
DataTableDataTable
DataTable
 
Xamarin.Forms.WPF を試してみた
Xamarin.Forms.WPF を試してみたXamarin.Forms.WPF を試してみた
Xamarin.Forms.WPF を試してみた
 
.NET Standard で SQLServer と接続してみた
.NET Standard で SQLServer と接続してみた.NET Standard で SQLServer と接続してみた
.NET Standard で SQLServer と接続してみた
 
ゆるふわ Xamarin Tips
ゆるふわ Xamarin Tipsゆるふわ Xamarin Tips
ゆるふわ Xamarin Tips
 
ちょっとエモい話
ちょっとエモい話ちょっとエモい話
ちょっとエモい話
 
2024-01-26_サーバーワークス_クラウドエンジニア交流会_マルチテナント構成に最適化したTerraform運用
2024-01-26_サーバーワークス_クラウドエンジニア交流会_マルチテナント構成に最適化したTerraform運用2024-01-26_サーバーワークス_クラウドエンジニア交流会_マルチテナント構成に最適化したTerraform運用
2024-01-26_サーバーワークス_クラウドエンジニア交流会_マルチテナント構成に最適化したTerraform運用
 
Xamarin.Forms のこれまでとこれから
Xamarin.Forms のこれまでとこれからXamarin.Forms のこれまでとこれから
Xamarin.Forms のこれまでとこれから
 
XamarinにMono申す!
XamarinにMono申す!XamarinにMono申す!
XamarinにMono申す!
 

Xamarin.Forms CSS 触ってみました

Editor's Notes

  1. 現状だとwordpress案件でVue.jsやったりしてます Unity前職ってのあって、クロスプラットフォーム環境に好意をもっていました
  2. ちょっと気になったことを少しだけ調べて見ました 今日話す内容です
  3. 記述の前提の話ですが公式ドキュメントではくっついていたので気になりました
  4. webのcssだと、詳細に指定してある方が優遇されるので違いますね
  5. 結局どうやったら効くのかわからなかった、、
  6. ちょっと興味あったので
  7. バッチリ怒られます
  8. 意外と?cssが優先されています
  9. 次項の複数あてると全部当たってくるかにかぶってしまいますが
  10. 同じクラスの指定箇所が違う場合ですね
  11. webだとクラス変更してレイアウトを変えていくことが多々あります
  12. HereNowアプリもそうですが、引き続きアイディアがまとまれば新しいアプリケーションを作っていきたいと思っています