常連

注目の的

社会貢献

質問力

とても難しく厳しいし生意気だとも思いますが、未経験からフリーランスのエンジニアになりたいです。

そこでとても抽象的な質問になってしまいますが、一体どのくらいのことが出来たら、未経験でもフリーランスとしてやっていけるのでしょうか？

今は何を作りたい何をしたいというよりもフリーランスということに大きな目標を持っています。

そのための目指すべき指針が欲しいです。

何の言語でこれが出来たらやこうしたらフリーランスになりやすい等々、アドバイスから厳しい言葉まで何でもお願いいたします。

この質問を見た率直な感想何でも聞きたいです。

追記

KojiDoiさんからの助言を参考に追記します。
正直なところ未経験からフリーランスになりたいと生意気なことを言ってる割に私自身はプログラミングのことはcとjavaの基本的な部分、javascript,PHPは本当に触ったくらいの知識しかありません。
今の自分にはまだ絶対にこれがしたい！と思える分野がありません。多分そう思えるほどプログラミングのことを知らないのだと思います。
これからより勉強し知っていくにつれ、自分はどうしてもこれがしたい！というものが見つかると思うのですが、今私が一番興味があるのが言語やサービスでなくフリーランスという形態なんです。
そこでフリーランスで働くということに焦点を絞ってそれに最適な勉強をしていくうちに本当に自分のやりたい分野が見つかればと思ってこの質問をさせていただきました。

未経験からフリーランスになるには

現在、専門学校に通っている者です。
近い将来Web制作(まずはLP制作などから)の分野でクラウドソーシングを主にフリーランスになろうと考えております。

そこでランサーズの発注のページを眺めていたのですが、納品ファイルの形式、用意してある素材がフォトショップ形式(.psd)であったり、希望CMSがWordPressというものが大半でした。
この場合僕はフォトショップを購入し、ドメインを取得、サーバを借りWordPressを導入しなければならないのでしょうか？

HTML,CSS,jQueryの3つは勉強済みなので、簡単なLP制作などの案件で、納品や用意してある.psd,.aiなどの扱いが分かれば自分でも早速フリーランスへの初めの一歩を踏み出せるような気がします。

自分で調べて見たのですが、なかなか自分の欲している解答に辿り着くことが出来ませんでした。
稚拙な質問で申し訳ありませんが、どうか知恵をお貸しいただけると幸いです。

フリーランスになるために

批判は承知の上で質問です。

swift中心に開発をしていまして、先日友人に何故adobeXDを使用しないのかと聞かれました。
存在は知っていましたが、画面（遷移含む）を作るのはswiftでも出来るかなと思い特に使用していませんでした。

友人からは納得できる答えがなかったので、こちらで質問します。
技術以外で申し訳ないですが、どちらも使用している方がいらっしゃったら違いやメリットをお伺いしたいです

よろしくお願いします。

【追記】
新しくアプリを作る際にいつも付箋でUIを作ってからswiftに書いていますが、
さらにその間にadobeXDを挟むメリットがあるかなと考えています。
ちなみに開発は１人で行なっているので、チームへ共有は基本ありません。

swiftとadobeXDの違いについて

現在育休中で、ここ2週間ほどスキマ時間でteratailの回答をしています。
やるからにはちゃんとやってみようということで、rubyやrails、AWSをメインに回答し、一瞬週間ランキングTOP10に入ったりもしました。

ただ、見ているタグの性質なのか分かりませんが、初心者が入り口で躓いている系の質問(しかし情報が不十分だったりして回答しにくい)が多く、張り合いを見失いかけているのが正直なところです。
誰でも最初は初心者なのでそのような質問を責めているわけではなく、あくまで自分のモチベーションの問題です。
もちろん、ちゃんと勉強して質の高い質問をしている方々もたくさんいらっしゃるんですけどね。

しかし、世の中すごい人はいっぱいいて、
teratailが始まったぐらいの頃からあらゆる質問にバシバシ回答してスコアやバッジがスゴいことになってる方もいます。
そんなにホイホイ答えられる質問ばかりではないので、かなりの労力を割いているのではないかと思います。

そこで、teratailで回答されている方に質問してみたいです。

1. teratailで回答するにあたってのモチベーションは何ですが？
2. teratailで回答するときに心がけていることがあれば教えてください。

---
ちなみに自分の回答

1:
- 育休手当は国から出るので、個人的に公共事業をして少し還元してみよう
- 回答することで、質問者の成長になればうれしい
- 回答することで、自分の知識の整理や新たな知識の獲得につながればうれしい
- バッジ集めやスコア上げが楽しい(そろそろ楽しいと思える時期の終わりに差し掛かっている気がする)

2:
- 単に答えを示すのではなく、どうしてそういう考えに至ったのかできるだけ分かるように答える（回答を通して自分で問題解決できる力を持ってくれたらうれしい）
- できる限り公式の情報を示す
- 一度回答したものは(自分の力が及ぶ限りは)最後まで付き合う
- もし間違っていたら素直にゴメンナサイする（という心づもり

なんだかポエミィな質問になってしまいましたが、回答いただけると嬉しいです(笑

※プログラミングとは関係ない質問が推奨されないのは承知の上ですが、teratailでしか聞けないと思ったのでここで質問させてもらいました。
※ランキング上位の方でなくても、お気軽に回答いただければ！

---
たくさんのご回答ありがとうございました！
どれも素敵な回答で、優劣を付けることはできないものだとは思いますが、
ベストアンサーは選ばねばならないので、個人的に一番深みを感じたmts10806さんを選ばせていただきました。

teratailで回答する際のモチベーションやポリシーについて聞かせてください！

```コーディング約半年の者です。
独学で勉強しながら、仕事をしており、JavaScriptやjQueryなども
既存のコードであれば、ネット上に使用方法があるので扱えるようになってきたのですが、
壁にぶち当たりそうになってきているので、どのような思考をすればランキング上位の方達
のようにどんな質問でも答えられるようになるのでしょうか？・・・と疑問が湧いています。

そこで、以下の質問に答えていただけますと幸いです。
```

###Q1.JavaScriptで既存のコードを使わずに自分で開発するまでにどれくらいの制作期間を要するのでしょうか？
※プロジェクトによって全然変わると思うのですが、例えば、最近WEBサイトでよく見る
トップページで独自の画面ロードアニメーションの後に、サイトが表示されるもの
参考：https://www.m-hand.co.jp/


###Q2.ランキング上位者の方達はコードの引き出しが非常に多いように感じるのですが、全て暗記しているのですか？
※私はコードを覚えきれないので、自分の雑記ブログにメモ用に保存して、忘れた都度開いて使用しています。
※パソコンのテキストの暗記機能も使っているのですが、どのように登録したのか忘れてしまうときもあるので不便に感じています。


###Q3.暗記以外で効率よくコードを引き出す方法などがあれば教えてください。


###Q4.JavaScriptやjQueryをマスターする上で参考になる書籍や学習コンテンツがあれば教えてください。
※ドットインストールとプロゲートで基礎学習は一通り学習したため、時間はかかりますが既存のコードを読むことはできます。
必要箇所のみの編集はできますが、応用して編集することができません。

###Q5.上位者の方達は複数言語をマスターしているように見受けられるのですが、初学者の私でも広く浅く理解しておくべきでしょうか？それともJavaScriptやjQueryをまずマスターすべきでしょうか？

お忙しいところ恐れ入りますがご回答いただけましたら幸いです。
よろしくお願いいたします。

teratailランキング上位の方の思考が知りたいです。

**PHPの基礎を勉強しております。

HTMLの基礎は、理解しているのですが、
テキストのシングルクォーテーションとダブルクォーテーションの区切りが理解できません。


for ($i=0; $i<10; $i++) {
	echo '<option value="', $i, '">', $i, '</option>';
}
,$i,は変数の区切りのようなこと。
'</option>'はHTMLの記述というのはなんとなく理解できました。

'<option value="', $i, '">'

この記述のシングルクォーテーション、とダブルクォーテーションの境目が解説がなく、
理解できないでおります。

どなたかお時間をある方教えていただけますでしょうか。
**

PHPとHTMLの組み合わせた、シングルクォーテーション、ダブルクォーテーションについて質問

ご回答者様

お世話になっております。

質問タイトルが分かりにくくて恐縮ですが、「子要素のmargin指定で親要素にも影響を与えてしまう理由」について教えていただけますと幸いです。

例えば以下のコードを例にご質問させていただきます。
```HTML
<div class="midashi_bg10">
　<div class="container2" align="center">
　　<div class="row row-div_width">
　　　<div class="div_width">
　　　　<img class="img-responsive" src="img/img1.png"><br>買取希望商品をダンボール箱に同梱します
　　　</div>
　　　<div class="div_width">
　　　　<img class="img-responsive" src="img/img2.png"><br>隙間のないよう箱に詰めていただき緩衝材（古新聞）などで隙間をうめていただきます。
　　　</div>
　　　<div class="div_width">
　　　　<img class="img-responsive" src="img/img3.png"><br>身分証、買取依頼書を同封してガムテープで閉め、外側に発送伝票を貼って発送してください。
　　　</div>
　</div>
　　<p class="text_red padding20 text-left">注意 : 査定額にご同意いただけない場合は返却は可能ですが、その際は送料はお客様側の負担でお願いいたします。また一部のみの返却はトラブルを避けるためお受けできません。
　　</p>
　</div>
</div>
```
```css
.midashi_bg10{
	height: 1000px;
	background-repeat: no-repeat;
	background-position:top;
	background-color: antiquewhite;
}
.row{
	display: flex;
	justify-content:center;
}
.row-div_width{
	width: 1200px;
}
.div_width{
	width: 315px;
}
.img-responsive{
	display: block;
}
```
ーーーーーブラウザ上ーーーーーーーーーーー
![イメージ説明](19be811950430a9d4344cac3b5876e50.png)
ーーーーーーーーーーーーーーーー
1つ目の質問は、
<div class="midashi_bg10">の子要素「<div class="container2 align="center">」にmargin-top:100px;をかけると、子要素だけではなく、親要素（div class="midashi_bg10">）もmargin-top:100px;分の余白ができるのはなぜでしょうか？
```css
.container2{
	background-color:aqua;
	margin-top: 100px;
}
```
ーーーーーブラウザ上ーーーーーーーーーーー
![イメージ説明](fd763e2cd99d826464a8b44ae39d36ce.png)
ーーーーーーーーーーーーーーーー
子要素だけがmargin-top:100px;となり、親要素の上端は一番上の赤ラインに揃うものだと思いました。
親要素にmarginは指定していませんが、これはいわゆるmarginの相殺と呼ばれるものでしょうか？
ーーーーーーーーーーーーーーーー
2つ目の質問は、
<div class="div_width">にmargin-top:100px;をかけると、
親要素<div class="midashi_bg10">や<div class="container2 align="center">、
<div class="row row-div_width">は余白ができず、
<div class="div_width">だけmargin-top:100px;が効くのはなぜでしょうか？
```css
.div_width{
	width: 315px;
	margin-top: 100px;
}
```
ーーーーーブラウザ上ーーーーーーーーーーー
![イメージ説明](63f780eb889cbdd5fe3f91f2339b5ba3.png)
ーーーーーーーーーーーーーーーー
以上、marginについてご質問させていただきました。

長くなり恐縮ですが、ご回答くださいますと幸いです。

cssで子要素のmargin指定で親要素にも影響を与えてしまう理由について

### 前提・実現したいこと

六角形のマークの上に、言語名を載せたい。

### 発生している問題・エラーメッセージ

```
cssファイルの一番した辺りの　.lesson icon p{ ・・・ }の近くに質問を書きましたのでそちらをご覧ください。

cssファイルの、一番した辺りの .lesson-wrapper において text-align: centerをすることで
子要素の pの中身 とか img が lesson-icon 内で中央に配置(センタリング)と思います。

で、言語名をマークに載せるために position を使うところ、position: relativeを書いたところ、までは
センタリングは維持されているのですが、position: abusolute を書くとなぜか言語名が左に寄ります。
基準点(lesson-iconの左上)の近く、例えば画像の左上近くに移動するならまだしも、なんで左に寄るのかわかりません。

また、width: 100%もわかりません。もともとpはブロック要素なので、lesson-icon内いっぱいに広がっているのでは
ないですか？
```

### 該当のソースコード

```html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <div class="header-right">
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or sign up with</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
        </div>
      </div>
    </div>
    <div class="lesson-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p>HTML & CSS</p>
            </div>
            <p class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p>jQuery</p>
            </div>
            <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p>Ruby</p>
            </div>
            <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p>PHP</p>
            </div>
            <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
          </div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
    </div>
    <footer>
    </footer>
  </body>
</html>

```

```css
/* ファイル名: stylesheet.css */
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

a {
  text-decoration: none;
}

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;
  text-align: center;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
}

.btn-wrapper {
  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.5s;
}

.header-right:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
}


.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
  /* text-alignをcenterに指定してください */
  text-align: center;
}

.lesson {
  float: left;
  width: 25%;
}

/* lesson-iconクラスのCSSを指定してください */
.lesson-icon{
  position: relative;
}

/*ここより上は変更しません。で、/* */の箇所を表示させた時の動きの違いを理解できません。
position: absoluteだけ表示させた時にHTML & CSSという文字が左に行く理由がわからない。
text-alignで、p内で中央に移動していたはずでは？

追加でtop: 90pxを表示させた時、上（というか、基準点であるlesson-iconの左上から90pxの箇所)に移動はわかる。

さらに追加でwidth: 100%を表示させたときにHTML & CSSという文字が右に移動する理由がわからない。
そもそもpは指定しない場合widthは元から100%なので、lesson-iconの中で横いっぱいに広がっていたはずでは？

color: whiteを//によって消しているのは黒文字の方が変化がわかりやすいため。*/

/* lesson-iconの中の<p>のCSSを指定してください */
.lesson-icon p{
  /*position: absolute;*/
  /*top: 90px;*/
  /*width: 100%;*/
  /*color: white;*/
}


/* txt-contentsクラスのCSSを指定してください */
/*.txt-contents{
  width: 80%;
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: #b3aeb5;
}*/
```

positionを使うとtext-align: centerが効かなくなる気がする

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
ドットインストールでWebサイトを作成していたのですが、そこでわからないところがあります。
ドットインストールの動画内で「floatを解除してあげるために親要素に[overflow: hidden]をつける。」らしいのですが、なぜそれでfloatが解除されるのかわかりません。

### 補足情報（FW/ツールのバージョンなど）
ドットインストールの動画のURL
https://dotinstall.com/lessons/website_html_v3/45511

floatが解除される仕組みがわかりません…

今、cssでサンプルページをコーディングしている所なのですが
floatを使用した時に最後に回り込ませたブロックの横幅を画面いっぱいに指定しますと
その、ブロックがすでにあるブロックの下に回り込んだ状態で、画面いっぱいに表示されます。

具体的に言うと

まず、became gamersのブロックを上揃いの左側めいっぱいによせます。
次に、became gamersのブロックの右側にhomeブロックを回り込ませます。
今度は、homeブロックの右側に、menuブロックを回り込ませます。
そして、最後にmenuブロックの右側に、お問い合わせブロックを回り込ませて
お問い合わせブロックの横幅を画面いっぱいに表示させようとして


width:100%;を指定しました。

ですが、お問い合わせブロックが、became gamers、home、menu、ブロックの下に回り込んできて
その状態で横幅が画面いっぱいに表示されてしまいました。

ではなく、menuブロックの右横に回り込ませてその状態で、お問い合わせブロックを画面いっぱいに
表示させたいと思っています。



コーディングは次のように行いました。

```HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf8">
    <title>sample</title>
    </head>
  <body>
    <header>
   <h1 class="nume1">BECAME GAMERS</h1>
       <p class="nume1">HoMe</p>
        <p class="nume1">MeNu</p>
        <p class="nume1 nume2">お問い合わせ</p>
   </header>
     <section>
      <h1 class="nume3">話題の超人気ゲームのマニアックな最新情報をいち早くお届け！</h1>
       <h2>カテゴリ</h2>
     </seciton>
     <section>
      <h1>ACTION</h1>
     <p>ナルティメットストーム 4</p>
    <h1>RPG</h1>
     <p>DARK SOULS III</p>
      <h1>FPS</h1>
        <p>FAR CRY PRIMLE</p>
       <h1>RACE</h1>
        <p>NEED FOR SPEED UNDER COVER 2</p>
      </section>
  </body>
</html>
```






```CSS
 <style>
    body{
      margin:0;
      text-align:center;
    }
    header{
      text-align:left;
    }
    .nume1{
      background-color:black;
      color:white;
      border-left-style:solid;
      border-left-color:gold;
      width:16.5%;
      height:200px;
      margin-top:-25px;
      display:flex;
      align-items:center;
      float:left;
    }
    .nume2{
      width:100%;
    }
    .nume3{
      clear:both;
    }
    </style>
```







どなたか、解決策をご教示お願い出来ないでしょうか？？


宜しくお願い致します。

CSS floatによレイアウト崩れ

### 実現したいこと
CSSで以下の3つの要素を横並びに配置したいと考えています。
要素1: アイコン＋1行の文字
要素2: 改行された2行の文字列
要素3: 1行の文字

### わからないこと
要素を横並びにするには、floatやdisplay（block、inline、inline-block、table-cell）があるというのはわかりましたが、floatとdisplayどちらを使うべきなのかがわからず困っています。

調べてみたところ、書き方次第でどちらも同じように作れるのはわかるのですが、それぞれどのような場面で使用すべきものなのか、またそれぞれの特徴を教えてもらいたいです。

CSSのfloatとdisplayの違い

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <title>Progate</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
  <header>
  </header>
  <div class="top-wrapper">
    <div class="container">
      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
      <p>progateは無料のプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
      <a href="#" class="btn signup">新規登録はこちら</a>
      <p>or sign up with</p>
      <a href="#" class="btn facebook">Facebookで登録</a>
      <a href="#" class="btn twitter">Twitterで登録</a>
    </div>
  </div>
  <div class="lesson-wrapper">
  </div>
  <div class="message-wrapper">
  </div>
  <footer>
  </footer>
</body>
</html>
```


```css
body{
  margin: 0;
}

a{
  text-decoration: none;
}

.top-wrapper{
  padding: 180px 0 100px 0;
  background-image: url(http://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;
  text-align:center;
}

.container{
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper h1{
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}

.top-wrapper p{
  opacity: 0.7;
  font-size: 14px;
  margin-bottom: 35px;
}

.signup{
  background-color: #239b76;
}

.facebook{
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter{
  background-color: #55acee;
}

.btn{
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius:4px;
  
  /*border-radiusを4pxに指定してください*/
  
}
.btn:hover{
  opacity:1;
}


/*btnクラスのhoverした時のopacityを1に指定してください*/


/*top-wrapperクラスのtext-alignをcenterに指定してください*/


```

上記なのですが、top-wrapperのtext-alignをcenterにしていますが、top-wrapperはブロック要素のためインライン要素に使うtext-alignは適用出来ないようにおもっておりました。
しかし、これで適用できています。
なぜでしょうか？

ブロック要素なのにtext-alignが使えてしまいます。

spanタグにtext-align:rightを指定しても効かず、え？と思ってdisplay:blockでブロック化したら効きました。。
インライン要素をブロック要素に変えたら逆にtext-align:rightが効くってどういうことなのでしょうか。

divにtext-alignは効かないとよく言いますが・・

ProgateでHTML & CSSを学習しており、text-alignプロパティの適用範囲(?)についての質問です。

<div class="top-wrapper">
  <div class="container">
    <h1>LEARN TO CODE.</h1>
    <h1>LEARN TO BE CREATIVE.</h1>
    <p>Progateはオンラインプログラミング学習サービスです。</p>
    <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
    <div class="btn-wrapper">
      <a href="#" class="btn signup">新規登録はこちら</a>
      <p>or</p>
      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
    </div>
  </div>
</div>

上のようなコードで.top-wrapperに対してtext-align: left;を用いると<p>or</p>の部分は左寄せにならないのですが、.top-wrapper pに対してtext-align: left;を用いると<p>or</p>の部分まで左寄せになるのはなぜでしょうか。

text-alignプロパティについて

Atomを使用しているのですが、一度Atomを終了すると、以前開いていた左側のフォルダツリー（？）も消えてしまいます。
そのため、再度編集したい場合は、「Add Project Folder」からフォルダを開き直さなければなりません。
この作業が非常に面倒くさいのですが、良い方法はありますでしょうか？
ご回答をいただけると助かります(_ _)

Atom起動時、前回開いていたフォルダを残しておく方法

PHP初心者なのですが、「"」と「'」で躓いております。
例えば
 echo "<option value='".$i."'>".$i."</option>";
とあった場合
「"」と「'」はどことついになっていてなぜそのようになるのか知りたいです。
と「.$i.」の「.」の意味が良くわかっておりません。
ドットシンクタックスで連結している？

区切りとしては
echo "<option〜</option>"
value='".$i."'　".$i."をシングルで囲っている
〜>".$i."<〜　　　".$i."をダブルで囲っている
と思っているのですが、、理屈が理解できておりません。
どうぞ、ご助力をお願いします。

PHPにて「"」「 ' 」がどこと対になっていてるのかご教示ください　PHP初心者です

```jQuery 
  $('.index-btn').click(function() {
    $('.active').removeClass('active');
    var clickedIndex = $('.index-btn').index(this);
    $('.slide').eq(clickedIndex).addClass('active');
    
    // 1. 変数slideIndexに「.active」要素のインデックス番号を代入してください
     var slideIndex =  $('.slide').index($('.active'));
    // 3. change-btn要素を表示してください
    $(".change-btn").show();

　　　　　⬇️に＄がない理由
     if (slideIndex == 0) {
      $('.prev-btn').hide();
    } else if (slideIndex == 3) {
      $('.next-btn').hide();
    }
  });
  
```

上記のslideIndexに＄がいらない理由を知りたいです。
それと、比較演算子は＝＝＝だったような気がするのですが、＝＝だけでいいのですか？

ifの条件式に＄がないのはなぜ？

```ここに言語を入力
class At{
	public static void main(String[] args){
		
		//1～20までループ
		for(int i = 1; i <= 20; i++){
		
			//!と?を入れるために初期化
			String mark = "";

			//2の倍数の時！を入れる
			if(i % 2 == 0){
				mark += "!";

			//4倍のとき？を入れる
			}else if(i % 4 == 0){
				mark += "?";
			
			}else{
				
			}

			System.out.println(i + mark);
		}
	}
}
```

if文の最後の文はelseで終わらなければならないのは承知なのですか、中身に何も入らない場合は、この書き方でいいのでしょうか？

if分の最後のelseの中身

###前提・実現したいこと
jQueryを使用して、アコーディオン機能を作成しています。

###発生している問題・エラーメッセージ
しかし、$answerに対してhasClassメソッドを使用してくださいというエラーメッセージが表示されます。


###該当のソースコード
```jQuery ファイル名:script.js
$(function() {

  $("#login-show").click(function() {
    $("#login-modal").fadeIn();
  });

  $(".signup-show").click(function() {
    $("#signup-modal").fadeIn();
  });

  $('.close-modal').click(function() {
    $('#login-modal').fadeOut();
    $('#signup-modal').fadeOut();
  });
  
  $(".lesson-hover").hover(
    function() {
      $(this).find(".text-contents").addClass("text-active");
    },
    function() {
      $(this).find(".text-contents").removeClass("text-active");
    }
  );
  
  $(".faq-list-item").click(function() {
    var $answer=$(this).find(".answer");
    if($('$answer').hasClass('open')){
      $(this).find("$answer").removeClass("open");
    }else{
      $(this).find("$answer").addClass("open");
    }
  });
  
  
});

CSS
body {
  margin: 0;
}

a {
  text-decoration: none;
}

.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;
  text-align: center;
}

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
  font-size: 14px;
  margin-bottom: 35px;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34,49,52,0.9);
  position :fixed;
  top: 0;
  z-index: 10;
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  background-color: rgba(255,255,255,0.3);
  transition: all 0.5s;
}

.header-right:hover {
  background-color: rgba(255,255,255,0.5);
}

.header-right .login {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  cursor: pointer;
  display: block;
}

/*モーダル*/
.login-modal-wrapper, .signup-modal-wrapper {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

.modal {
  position: absolute;
  top: 20%;
  left: 34%;
  background-color: #e6ecf0;
  padding: 20px 0 40px;
  border-radius: 10px;
  width: 450px;
  height: auto;
  text-align: center;
}

.fa-times {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(128, 128, 128, 0.46);
  cursor: pointer;
}

#signup-form, #login-form {
  width: 100%;
}

#signup-form h2, #login-form h2 {
  color: #5f5d60;
  letter-spacing: 1px;
  margin-bottom: 40px;
}

#signup-form input, #login-form input {
  width: 320px;
  margin-bottom: 20px;
  font-size: 12px;
  padding: 12px 12px;
  border: 1px solid #d0d5d8;
  border-radius: 5px;
}

#submit-btn {
  display: inline-block;
  padding: 14px 140px;
  background-color: #5dca88;
  border: none;
  border-radius: 3px;
  color: white;
  margin: 10px auto;
  cursor: pointer;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
  text-align: center;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.lesson {
  float: left;
  width: 25%;
}

.lesson-icon {
  position: relative;
  width: 70%;
  margin: 0 auto;
}

.lesson-icon p {
  position: absolute;
  top: 75px;
  width: 100%;
  color: white;
}

.text-contents {
  margin: 3% auto;
  width: 80%;
  font-size: 12px;
  color: #b3aeb5;
  display: none;
}

.text-active {
  display: block;
}

/*faq wrapper*/
.faq-wrapper {
  background-color: #e6ecf0;
  text-align: center;
  padding-bottom: 80px;
  color: #5f5d60;
}

#faq-list {
  width: 500px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.faq-list-item {
  margin:10px;
  border-bottom:1px solid #ccc;
  position:relative;
  cursor:pointer;
  text-align: left;
}

.faq-list-item h3 {
  font-size: 14px;
}

.faq-list-item span {
  position:absolute;
  top:0;
  right:5px;
  color:#ccc;
  font-size:13px;
}

.answer {
  font-size: 12px;
  padding: 5px 0px;
  margin-bottom: 15px;
  display: none;
}


.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message-wrapper .heading h3 {
  font-weight: normal;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0px 7px #1a7940;
}

.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}

footer img {
  width: 125px;
}

footer p {
  color: #b3aeb5;
  font-size: 12px;
}

footer {
  padding-top: 30px;
}
```

###試したこと
以下を試しましたが、エラーは解消されませんでした。
①if文で使用しているhasClassの見直し。
②$answerにhasClassメソッドの代入。(ex.$answer=('$answer').hasClass('open'))

###補足情報(言語/FW/ツール等のバージョンなど)
hasClassメソッドの理解不足等で起きていると思われますが、解決が困難なためアドバイスを宜しくお願いいたします。
また、このようなエラーメッセージを自力で取り除くことができるためにはどのようなスキルが必要なのかもご教授をお願いいたします。
他のファイル情報が必要であれば、連絡をください。

jQueryのアコーディオン機能にて$answerに対してhasClassメソッドを使用してくださいというエラーメッセージが表示される。

progateで、jQueryを勉強している者です。
現在、jQuery中級編、アコーディオン機能を実装するレッスンをしているのですが、
理解できない部分がいくつかあり、先に進めないので、こちらで質問をさせて頂きます。

```ここに言語を入力
【HTML】
 <ul id="faq-list">
     <li class="faq-list-item">
        <h3 class="question">質問文</h3>
        <span>+</span>
        <div class="answer">
           <p>質問の答え</p>
        </div>
     </li>

</ul>
```
```ここに言語を入力
【jQuery】
$('.faq-list-item').click(function() {

    var $answer = $(this).find('.answer');

    if($answer.hasClass('open')) {
      $answer.removeClass('open');
      $answer.slideUp();
      $(this).find('span').text('+');
      
    } else {
      $answer.addClass('open'); 
      $answer.slideDown();
      $(this).find('span').text('-');
    }
  });
```
.faq-list-item(li要素)にクリックイベントを設定して、
その.faq-list-itemの中にある.answerを探し出して、その.answerにopenクラスがあるかないかを判断、
openクラスの有無によって処理が変わる、というところまではわかるのですが、

① 
"$(this).find('.answer');" を変数answerに代入しているのは、この構文をこの後何度も使うことになるから変数を使うことによって省略させているということでしょうか？
②
 "$answer.hasClass('open')" の仕組みが把握できていません。
ここにあるopenクラス、HTMLにもCSSにもその記述が見当たらないので、どこからこのopenクラスが出てきているのかという点と、
openクラスはどのタイミングでついたり外れたりしているのかなと疑問に思っています。
（.answerには最初からopenクラスがついていないのに、クリックした箇所だけ急にopenクラスがつくのは何故だろう？と疑問に思っています。）

上手く説明できず申し訳ありませんが、ご教授頂けますと幸いです。