常連

### こんにちは。
１ヶ月ちょっとくらいだけ暇になるので、Webアプリ作ってみようかなとか思ってます。
今年１年間で何か継続して取り組みたいな、と思ってます。
よければ相談させてください。アドバイスがいただけたら嬉しいです。

### あなたは誰？
僕自身は、
1. あまり今までアウトプットとかは無いし、
2. 特別何かできる訳でも無ければ、
3. Web、クラウドネイティブでもないです。
4. オンプレに慣れた（？）一般業務アプリC#エンジニアくらいなのですが、

とりあえず試してみたいというか作って遊んでみたいと思ってます。
そこで私が考えた最強の構成を考えてみました。

### 何を作りたいの？
何を作るのかは考え中です。
今後、Webアプリを作った後にモバイル環境にも適用させたいなとか安易に思ってます。
ハードルとかは度外視して今後１年合間で進めてそれ以上かかれば継続してやってみようかな、
というつもりです。
環境：Mac + JetBrains Rider

### 私が考えた最強はコレ

※何の為にやりたいのか理由は現在考え中です
|カテゴリ|技術|選んだ理由|理由２|
|:--:|:--:|:--:|:--:|
|フロントエンド|Flutter|試してみたい|モダンなUI？ウィジェット利用とやらをしてみたさ|
|バックエンド|C#(ASP.NET Core)|C#を使いながらがいいから||
|データベース|AWS RDS (PostgreSQL/MySQL)|使ってみたいから|tbd|
|バックエンドの実行環境|AWS Lamda|使ってみたいから|tbd|
|フロントエンドのデプロイ|AWS Amplify|使ってみたいから|tbd|

どうでしょうか、ちょっと欲張りすぎですか？
なんで最強なのでしょうか？私もわかりません。
ただ、マルチプラットフォームなアプリを作りたいのは確かです。
多分、無茶苦茶なこと書いててツッコミどころ満載なのかもしれませんね笑

### 今後の進め方
段階を経てまずは　AWSは利用せずに Webアプリやそれらに関わる色々なお勉強
次に クラウド知識のインプット と並行して 実践でWebアプリと連携
でやってみようかな、と考え中です。

### ご意見お待ちしてます。
全部やったことないので、お勉強含めてやるつもりです。
継続するための工夫とか、効率的な取り組みとかあれば、ご教示お願いします。
あとはこれも必要とか、あった方がいいとかあればなんでもお願いします。
よろしくお願いします。m(_ _)m





【マルチプラットフォームなアプリ作りたい！】色々なご意見お願いします。【相談です！】

## テーマ、知りたいこと
next (react), nuxt (vue) など用いているとそこまでclassの命名に気を使わなくなったなと思い、class名でみなさんが気をつけていることや、皆さんのチームでの決まり頃があれば勉強のために知りたいなと思いました！

## 背景、状況
以前はBEMを用いており、久々に社内でBEMというワードを聞いて、社外のclassの命名規則事情を知りたくなりました！
BEMのような大きな概念でなくても大丈夫です！
例えば、よく使う英単語（container, wrapper, etc）などでも嬉しいです！
ご気軽に意見いただけると嬉しいです！



classの命名規則について

### 前提・実現したいこと
子要素の高さに応じて、親要素の高さを変更したいです。

###状況
メルカリのようなサイトを模写しているんですけど、サイドバー(左側)をクリックするとメイン(右側)部分の高さが子要素に応じて変更されるようにしたいです。

・現在の状況
![イメージ説明](7837d8cb8ecbd3833c24cb1ef5e97639.png)

・実現したい状況
![イメージ説明](a96bc61fc471ef8b414f4baceb9f6433.png)

### 該当のソースコード
・左カラムと右カラム
```
// マイページ全体
.user-showPage {
  background-color: #f5f5f5;
  &__main {
    padding: 50px 120px;
    display: flex;
  }
}
// サイドバー上部
.sideBar-Top {
  width: 400px;
  background-color: #ffffff;
}
.sideBar-contents li {
  position: relative;
  height: 50px;
  border-bottom: groove 1px;
  background-color: #ffffff;
  a {
  text-decoration: none;
  font-size: 18px;
  color: black;
  line-height: 50px;
  padding-left: 15px;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  }
  a:hover {
    opacity: 0.6;
    background: #333;
    color: #fff;
  }
}

// サイドバー下部
.sideBar-Low {
  h2 {
  font-size: 24px;
  font-weight: bold;
  padding-top: 30px;
  }
}
```
親要素
```
.main-information
  - if current_page?(logout_index_path)
    .logout-btn
      = link_to "ログアウト", "/"
```

```
.main-information {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  margin-left: 100px;
}
```
子要素
```
.user-showPage
  .user-showPage__main
    = render "users/side_bar"
    = render "users/main_information"
```
```
.logout-btn {
  position: relative;
  width: 300px;
  height: 50px;
  background-color: blue;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 10px;
  text-align: center;
  a {
    line-height: 50px;
    color: #ffffff;
    text-decoration: none;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
```

### 試したこと
親要素にheight: auto;をした
display: inline-blockを親要素に試したが実現できなかった

### 参考サイト
https://techacademy.jp/magazine/26588
親要素の高さを子要素にする

子要素の高さに合わせて親要素の高さを変更したい

CSSのサイズ指定では、
絶対サイズ：px
相対サイズ：em, rem, vh, vw, %
などが存在しますが、どのように使い分ければ良いのかがわかりません。

例えば、padding, marginの指定やフォントサイズなど、こういう場合は絶対サイズを使用した方が良い、
こういう場合は相対サイズのこのサイズ指定を使用した方がいいなどある程度決まっているのでしょうか。

今、デザインカンプの課題を解いていて、タグ間のpadding等がFigmaで与えられているのですが、ピクセル単位で全く同じ実装をしようとすると、相対サイズを使用するのは難しいのではと行き詰まっています。

ご回答よろしくお願いいたします。


CSS 絶対サイズ、相対サイズの使い分け方

### 前提・実現したいこと
progateでScss記法を学びました。
stylesheet.scssファイルでアウトプットしようとしたところ、内容がまったく反映されません。
（Scss記法を試す前段階で、すでに反映されません。）
.Scss記法は.scssファイルに記載すると認識していたのですが、違うのでしょうか？

### 発生している問題・エラーメッセージ

```HTML
 <link rel="stylesheet" href="stylesheet.css">
```
```scss
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

@font-face {
	font-family: 'Noto Sans JP';
	src: url("/noto-sans-jp/NotoSansJP-Regular.otf");
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

li {
  list-style: none;
}
```
### 該当のソースコード


### 試したこと

.cssファイルにcss記法で書けば反映される。


### 補足情報（FW/ツールのバージョンなど）

Windows10,vscode,Googlechrome

scssが反映されない

sassで記述すると
ファイル分けして、ヘッダー部分のコードは
例えば、_header.scssにコードを書きます。
そして、style.scssに@import"module/header";として記述するとstyle.cssにコンパイルされるかと存じます。
しかし、毎回自動読み込みならず、watching sassをクリックしてもstyle.cssに反映せず、
**@import"module/header";の部分を毎度書き直すと反映します。
そうゆうものでしょうか？**>< live server （ブラウザで変更を瞬時に見れる拡張機能）で変更を確認しつつコードを
書いているので、毎回@importの部分を書き直すのが手間で>< sassのメリットを感じれません。。

ちなみにlive sass compiler の拡張機能を使っています。

どなたかご存知でしたら教えていただきたいですm(_ _)m

sassでコンパイル（読み込み）が自動で反映されない。

### 前提・実現したいこと

input要素の中にアイコンを追加して右寄せにしたい。

### 発生している問題・エラーメッセージ

```
input要素の中にアイコンが追加できない
```

### 該当のソースコード

```html
 <form action="">
   <input type="text" role="search" method="get" placeholder="&#xf002; 検索する">
 </form>
```
```sass
 form{
                text-align: center;
                input{
                    background-color: $search;
                    border-radius: 5px;
                    border: 1px solid #EBEBEB;
                    padding: 5px;
                    margin:10px 0 ;
                    display: inline-block;
                    font-family: FontAwesome;
                    font-style: normal;
                    font-weight: normal;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
                
            }    
```

### 試したこと

 placeholderでアイコンを追加しようとしたが解決しなかった。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

input要素の中にアイコンを追加したい

```html
<ul>
    <li class="item">A</li>
    <li class="item blue">B</li>
</ul>
```
上記のclassにcssでプロパティーをつけると以下の様に　.item　を二回書かないといけないです。
```
.item {
    line-height : 150%;
    color       : #333;
}
 
.item.blue {
    color : blue;
}
```

sassでもっとスマートとに書く方法はありますか？

Sass