常連

### こんにちは。
１ヶ月ちょっとくらいだけ暇になるので、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





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

### 前提・実現したいこと
子要素の高さに応じて、親要素の高さを変更したいです。

###状況
メルカリのようなサイトを模写しているんですけど、サイドバー(左側)をクリックするとメイン(右側)部分の高さが子要素に応じて変更されるようにしたいです。

・現在の状況
![イメージ説明](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
親要素の高さを子要素にする

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

### 前提・実現したいこと
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で複数クラスはどう書くのか？

タイトル通りなのですが、SassやLESSを使う理由がいまいちわかりません。

変数、関数、四則演算、ファイル分割、mixinなどが使えて便利なのはわかりますが、それ以上にデメリットが多いように感じます。

例えば、他人(連絡が取れない人)がSassで作ったサイトのcss(見た目)を一行変更する場合を、自分のまっさらなpcで開発環境を作るためにnode.js、gulpなどインポートして、開発環境を一から作る作業が面倒です。

cssだけならftpでもsshでも一発で変更完了なのにです。

cssファイルに直接編集したら目的は達成されますが、それだと未編集のSassファイルと差分が出てしまい何か違う気がします。.mapで出力してる場合尚更違う気がします。

さらに、cssは変数が使えるのでさらに導入するメリットがあまり感じません


大規模サイトの場合、SassやLESSを使うメリットはわかりますが中、小規模サイトでSassを使うメリットと、デメリットを教えてください。

さらに、皆様が良く使ってるSassのコンパイル方法を教えてください。


すごく勘違いした質問かもしれませんが、初心者の疑問です。

他の人が作ったSassファイルを簡単にコンパイルする方法、そもそもなぜSassを使うのですか？

タイトルのままです。
インストールはエラーなく成功したのですが、node-sass -vを入力すると-bash: node-sass: command not foundと帰ってきます。