CSS逆引きSwiftUIチートシート【執筆中!23.10.3更新】

CSS逆引きSwiftUIチートシートです。必ずしもCSSとSwiftUIのコードが同じものでないことにご留意ください。
また、初学者のため、間違いや追加すべきものがあればぜひご指摘お願いします🙏

# 背景色　background-color
<img width="100" alt="bg-color" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/28b737e8-9ee4-1019-93cd-64591e8a347c.png">


```
struct SampleView: View {
    var body: some View {
        ZStack {
            Color(.orange)
            Text("")
        }
    }
}
```
## セーフエリアまで表示領域を広げる: 

<img width="100" alt="bg-color" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/246c0b25-6a73-30c7-67a4-110a9b2cfe8b.png">

```.edgesIgnoringSafeArea```を使う。

```
var body: some View {
        ZStack {
            Color(.orange)
                .edgesIgnoringSafeArea(.all)
            Text("edgesIgnoringSafeArea")
        }
    }
```
```.edgesIgnoringSafeArea(.all)``` で上下余白
```.edgesIgnoringSafeArea(.top)```で上側だけ
```.edgesIgnoringSafeArea(.bottom)```で下側だけ
塗りつぶすことができる。

# 色

### デフォルトカラー
```(Color.色)```
例
```
.background(Color.yellow)
```

色は下記より選択

https://developer.apple.com/design/human-interface-guidelines/color#iOS-iPadOS-system-colors

### HEXコードを使用する場合:
```(hex: 0x0077FF)```

例
```
Color(hex: 0x0077FF)
```

### RGB値を使用する場合：
```
Color(red: 0.5, green: 0.75, blue: 1.0)
```

https://www.yururiwork.net/archives/1226

### グラデーション
#### 線型グラデーション　linear-gradient()
<img width="100" alt="linear-gradient" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/546f5333-7589-ffea-f7a2-38390c2dbd37.png">


```LinearGradient```
```
 var body: some View {
        // 線形グラデーション（青→黒）を生成
        LinearGradient(gradient: Gradient(colors: [.blue, .black]), startPoint: .leading, endPoint: .trailing)
            .ignoresSafeArea()      // フレームサイズをセーフエリア外まで広げる
    }
```

#### 放射状グラデーション　radial-gradient()
<img width="100" alt="radial-gradient" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/35dd6b62-4c53-559e-af33-3ac0a4482e0a.png">


```RadialGradient```
```
var body: some View {
        // 放射状グラデーション（赤→黒）を生成
        RadialGradient(gradient: Gradient(colors: [.red, .black]), center: .center, startRadius: 1, endRadius: 300)
            .ignoresSafeArea()      // フレームサイズをセーフエリア外まで広げる
    }
```

#### 円すい状グラデーション　conic-gradient()
<img width="100" alt="conic-gradient" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/5d9a0ea9-981b-c0a2-6c42-254a4abf3e4f.png">

```LinearGradient```

```
var body: some View {
        // 円すい状グラデーション（緑→黒→緑）を生成
        AngularGradient(gradient: Gradient(colors: [.green, .black, .green]), center: .center, angle: .degrees(-45))
            .ignoresSafeArea()      // フレームサイズをセーフエリア外まで広げる
    }
```

上記コードは下記ブログから参照させて頂きました。その他グラデーションも掲載されています↓

https://capibara1969.com/1800/

# 文字　 font
### 色 color
```.foregroundColor()```

<img width="200" alt="bg-color" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/c56d6607-423a-6388-b055-80c7e0e7a607.png">



```
Text("foregroundColor()")
                .foregroundColor(.red)
```

色の種類については色の項を参照↓

https://qiita.com/MIDO-ruby7/private/28f500f0309fa1924714#%E8%89%B2


### サイズ font-size
<img width="300" alt="font-size" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/41898125-2fa1-cb35-d41a-01d7b9b08b2f.png">


```.font()  ```
```
Text("largeTitle").font(.largeTitle)   // 大きなタイトル
Text("title").font(.title)             // タイトル
Text("headline").font(.headline)       // 見出し
Text("subheadline").font(.subheadline) // 小見出し
Text("body").font(.body)               // 本文
Text("callout").font(.callout)         // 吹き出し
Text("caption").font(.caption)         // キャプション
Text("footnote").font(.footnote)       // 注釈
```

https://qiita.com/wai21/items/21b381823fb12bb88268

### スタイル font-style

### 太さ font-weight
<img width="300" alt="font-weight" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/11a6091a-d16e-cbb3-7d2f-7efb7bfd3eb0.png">


```.fontWeight()```
```
Text("black").fontWeight(.black)
Text("bold").fontWeight(.bold)
Text("heavy").fontWeight(.heavy)
Text("light").fontWeight(.light)
Text("medium").fontWeight(.medium)
Text("regular").fontWeight(.regular)
Text("semibold").fontWeight(.semibold)
Text("thin").fontWeight(.thin)
Text("ultraLight").fontWeight(.ultraLight)
```

# 文字装飾
## 線　text-decoration-line
#### アンダーライン　 underline
![スクリーンショット 2023-10-03 20.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/b7391c7f-5ff2-9939-dc6d-7026050baf7e.png)

``` .underline()```

例
```
Text("Hello, SwiftUI")
                .underline()

```

#### オーバーライン　overline


#### 取り消し線　line-through
![スクリーンショット 2023-10-03 20.54.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/e56cea21-a6e0-34a7-d9e9-28a44136ffee.png)


``` .strikethrough()```

例
```
Text("Hello, SwiftUI")
     .strikethrough()
```


# レイアウト
### 横並び　flex-direction row + justify-content center
```HStack```


### 縦並び　flex-direction column + justify-content center

```VStack```

### 要素を重ねて表示　absolute　z-index

```ZStack```

# 余白

### border領域の内側に余白を取る　padding

### border領域の外側に余白を取る Margin
無し。
>HTMLレイアウトにおいては１つのオブジェクトに対してPaddingとMarginは１つずつしか設定できません。しかし、SwiftUIにはそのような制約はなく、Paddingを幾つでも設定できます。（borderも幾つでも設定できます。）そのためMarginという概念が不要になるわけです。これがSwiftUIにおけるPaddingの特徴です。

https://shuhey-hashimoto.com/swiftui/%E3%80%90swiftui%E3%80%91%E4%BD%99%E7%99%BD%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8Bmodifier%E3%80%8Cpadding%E3%80%8D%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/


# 形
### 線
### 四角　

<img width="100" alt="bg-color" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/3ead97fe-27bb-b723-b908-329e56695883.png">

```
Rectangle()　//四角
    .foregroundColor(.blue)　//色
    .frame(width: 200, height: 200)　//サイズ
```

### 丸: border-radius

<img width="100" alt="bg-color" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/df16ce46-75e7-e789-a9a5-3b5030093900.png">

```
Circle()
    .foregroundColor(.blue)　//色
    .frame(width: 200, height: 200)　//サイズ
```

# 画像
## 画像の表示

## 画像のサイズ
``` .frame(width: ⚫︎, height: ⚫︎)```
```
 Image("sampleImg")
            .resizable()
            .frame(width: 87, height: 122)
    }
```

## 画像を加工
#### 丸
``` .clipShape(Circle())```
```
Image("soba")
    .resizable() //画像をリメイクできるように処理
    .clipShape(Circle())
```

# アニメーション

## 

# ナビゲーションバー

https://keigosaito.com/blog/swiftui-navigation-bar

# フォーム

## select

[![Image from Gyazo](https://i.gyazo.com/713f4fd5aa33e453aac314fd9407228e.gif)](https://gyazo.com/713f4fd5aa33e453aac314fd9407228e)

```
struct ContentView: View {
    @State private var selectedValue = 1　//初期値
    var body: some View {
        VStack {
            Picker("色を選択", selection: $selectedValue) {
                Text("赤").tag(1)
                Text("青").tag(2)
                Text("黄色").tag(3)
            }
        }
    }
}
```
```
struct ContentView: View {
    let colors = ["赤", "青", "黄色"]
    @State private var selection = 1  
    
    var body: some View {
        VStack {
            Picker(selection: $selection, label: Text("色を選択")) {
                ForEach(0 ..< colors.count) { num in
                    Text(self.colors[num])   // .tag()の指定は不要
                }
            }
            .frame(width: 400)
            
            Text("選択値：\(selection)")
        }
    }
}
```
    
色などの情報を持たせることもできる
[![Image from Gyazo](https://i.gyazo.com/e74014d526eedfc4f93cb8e6c674e995.gif)](https://gyazo.com/e74014d526eedfc4f93cb8e6c674e995)

```
struct ContentView: View {
    @State private var selectedValue = UIColor.red
    var body: some View {
        ZStack {
            Color(selectedValue)
                .edgesIgnoringSafeArea(.all)
            
            VStack {
                Picker("色を選択", selection: $selectedValue) {
                    Text("赤").tag(UIColor.red)
                    Text("青").tag(UIColor.blue)
                    Text("黄色").tag(UIColor.yellow)
                }
            }
        }
    }
}
```
https://shuhey-hashimoto.com/swiftui/swiftui%E3%81%AEpicker%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%81%A8%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%A8%E4%BE%BF%E5%88%A9%E3%81%AApicker%E3%81%AE%E7%A8%AE%E9%A1%9E/

https://capibara1969.com/1684/