常連

注目の的

自己紹介

### 前提・実現したいこと
HTML, CSSを使い、

□1 テキスト1
□2 テキスト2
...

のように表示される画面を作ろうと考えています。


### 問題：□と数字が横並びにならない
実装するにあたり、`div`を用いて作成した□に擬似要素afterで数字を並べるように作成しようとしました。しかしながら、□と数字が横並びにならず困っています。

### 該当のソースコード

```HTML
<li class="outerTaskBox">
    <div class="arrowButton">
        <div class="arrowMark"></div>
    </div>
    <div class="todo-tasks"><p>テストメッセージ</p>
    </div>
</li>
```

```CSS
.list {
    font-size: 150%;
    margin: 10% auto;
    width: 50%;
}



.todo-tasks {
    width: 80%;
    display: inline-block;
    margin: 0;
}


ol {
    counter-reset: number; 
    list-style: none; 
    margin: 0;
    padding: 0;
}


.arrowMark:after {
    counter-increment: number; 
    content: counter(number); 
    font-size: 18px;
    display: inline;
}

.allTodoText {
    display: inline-block;
    width: 100%;
    outline: none;
    margin: 0;
}

.arrowMark {
    width: 12px;
    height: 12px;
    border: 2px solid;
    display: inline-block;
    margin: 12px 12px;
}

.arrowButton {
    display: inline-block;
    width: 100px;
    height: 36px;
    margin: 0 0 0 auto;
}

.outerTaskBox {
    margin: 0 0;
    display: flex;
}

```

### 試したこと

`arrowMark`をインラインにしてみましたが、ダメでした。


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

擬似要素::afterで追加した文字が横並びにならない

APIキーを勝手に使われることで、BANされたり、このAPIが再び有料化された場合にひどい請求が来たりする危険性について教えてください。

## Google Maps Embed APIについて
GoogleMapsの地図を埋め込める機能です。

以下のような iframe にてウェブサイトに埋め込み、使用するものです。  
この例では検索機能を使い東京駅の周辺地図を表示します。
```
<iframe src="https://www.google.com/maps/embed/v1/place?key=<APIキー>&zoom=17&maptype=satellite&q=東京駅"></iframe>
```

ウェブサイトのソースコードを見れば、ウェブサイトを訪れるユーザはAPIキーを知ることができます。

### 料金
[現在は全面的に無料](https://developers.google.com/maps/documentation/embed/usage-and-billing)です。

ただし、[2020年7月1日より前は、GoogleMapsEmbedAPI- Advanced という区分が有料](https://www.zenrin-datacom.net/business/gmapsapi/price/)でした。  
検索機能など高度な機能を使った埋め込みは Advanced に分類されます。

## 懸念している悪用方法
APIキーはサイトを訪れた誰にでも見られるというのは前述の通りです。
APIキーを勝手に使われることを心配しています。


一応、下の画像のようにHTTPリファラによる制限を加えています。
![イメージ説明](fc14776b4389a34fcca13c7870b1cc16.png)

しかしこの制限はリファラが何も送信されない場合、パスしてしまいます。

以下のようにすればリファラ制限を無視してAPIを使うことができます。
1.   `<meta name="referrer" content="no-referrer">`  としていてリファラが送信されないサイトに地図を埋め込んだ場合
2. スクリプトやChorome拡張機能等で意図的にrefererを送信しないリクエストを送る場合

### 聞きたいこと
自分がこのAPIキーを使って地図を埋め込んだのを忘れたころに、再びAPIが有料化され、勝手にAPIキーが使われて高額請求が来ないか心配です。

有料化する前にGoogleからお知らせが来たり、不正使用による有料APIへのアクセスの請求は免除されたりするのでしょうか？

あと、有料無料に関わらず不正使用されて大量のアクセスが発生した場合、GoogleにBANされたりしないのでしょうか。

何か過去の事例などありましたらお教えください。

Google Maps Embed APIのAPIキーを勝手に使われる危険性について教えてください

###前提・実現したいこと
localhostでgooglemapを表示させたい
（その際にAPIキーを用いてgooglemapを表示する）

###発生している問題・エラーメッセージ
ファイル（file:///C:/xampp/htdocs/googleMap/googleMap.html）から表示する方法だとマップは表示されるが
localhost（http://localhost/googlemap/googleMap.html）だとエラーが出て表示されない

```
js?key=AIzaSyDrNMHAvdx-QKNNia9yfaCr7JR9jumCeSk&callback=initMap:43 Google Maps API error: ApiNotActivatedMapError https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
```
---
**API無**
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <div id="map"></div>
    <link rel="stylesheet" tPype="googleMap/css" href="googleMap.css">
    <script src="googleMap.js"></script>
  </head>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
  <body>
  </body>
</html>

```

**APIあり**
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <div id="map"></div>
    <link rel="stylesheet" tPype="googleMap/css" href="googleMap.css">
    <script src="googleMap.js"></script>
  </head>
  <script src="https://maps.googleapis.com/maps/api/js?key=APIキー&callback=initMap"></script>
  <body>
  </body>
</html>

```
---
###試したこと
キーの制限「HTTPリファラー」の設定を（localhost/*）で試してみた

GoogleAPIでのAPIキー使用時のエラー　html

#答え合わせは必要ですか？
webサイトの模写についてですが、完成した模写がモデルのサイトと外見が酷似していた場合、モデルのサイトのソースコードを確認し答え合わせをするべきでしょうか？
##どのように答え合わせを進めますか？
また、すべきである場合、どのように答え合わせを進めるべきか具体的にご教授ください。

模写コーディングに「答え合わせ」は必要か

ランサーズというクラウドソーシングサイトのユーザーページのデザインが添付画像のようにPCとスマホで全然違うのですがこれはどうやって実装しているのでしょうか？

現在Web開発勉強中で、自分の知っているPCとスマホのデザインを変える方法は
・cssによるレスポンシブ
・デバイス毎に読み込むhtmlを変える
なのですが、cssのみでやるには無理があると思いますし、デバイス毎に読み込むhtmlを変えているわけでもなさそうです（モバイル表示時とPC表示時のソースが全く同じだったため）。

ご教授いただけると幸いです。![イメージ説明](5716204a0a1890052f55c95ebf2809c9.png)![![イメージ説明](005684645c3a53eebfa28d3f6235c025.png)](72bc82eb623fc0c5b5766045a64f4c8f.png)

スマホとPCで表示する内容をガラッと変える方法

### 前提・実現したいこと
レスポンシブデザインを実装していますが、
画面幅が狭くなった際、謎の空白ができてしまいます。
ディベロッパーツールで確認しても、marginやpaddingは見つかりませんでした。

![起きている問題](ba54fb6e929714ee4408221fd580736f.gif)

### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/front-page.css">
  <script src="https://kit.fontawesome.com/54c0367ea1.js" crossorigin="anonymous"></script>
  <title>Write-書くためのテーマ</title>
</head>
<body>
  
  <input type="checkbox" id="menu">
  <label for="menu" class="open" id="open">
    <div></div>
    <div></div>
    <div></div>
  </label>
  <label for="menu" class="back"></label>
  
  <div class="nav-sp">
    
    <ul>
      <li><a href="">ホーム</a></li>
      <li><a href="">ページ</a></li>
      <li><a href="">タイポグラフィー</a></li>
      <li><a href="">お問い合わせ</a></li>
      <li><i class="fas fa-search"></i></li>
    </ul>
  </div>
  <div class="container">
    <header>
      <div class="logo">
        <h1><a href="#">Write</a></h1>
        <p>書くためのテーマ</p>
      </div>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ページ</a></li>
          <li><a href="#">タイポグラフィー</a></li>
          <li><a href="#">お問い合わせ</a></li>
          <li><i class="fas fa-search"></i></li>
        </ul>
      </nav>
    </header>
    <div class="main-visual">
      <img src="image/cropped-nicole-honeywill-730102-unsplash.jpg" alt="メインビジュアル">
    </div>
    
    <div class="main-message">
      Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。
    </div>
    <article class="article">
      <div class="article-left">
        <a href="#">2018年9月1日</a>
      </div>
      <div class="article-right">
        <h2>
          <a href="#">書くためのテーマ</a>
        </h2>
        <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
      </div>
      <div class="article-left">
        <a href="#">2018年3月5日</a>
      </div>
      <div class="article-right">
        <h2>
          <a href="#">画像付きの投稿</a>
        </h2>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
      </div>
      <div class="article-left">
        <a href="#">2018年3月5日</a>
      </div>
      <div class="article-right">
        <h2>
          <a href="#">引用付きの投稿</a>
        </h2>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
      </div>
      <div class="article-left">
        <a href="#">2018年3月5日</a>
      </div>
      <div class="article-right">
        <h2>
          <a href="#">コメント付きの投稿</a>
        </h2>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
      </div>
      <div class="article-left">
        <a href="#">2018年3月3日</a>
      </div>
      <div class="article-right">
        <h2>
          <a href="#">吾輩は猫である</a>
        </h2>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
      </div>
      <div class="article-left article-last">
        <a href="#">2018年3月3日</a>
      </div>
      <div class="article-right article-last">
        <h2>
          <a href="#">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a>
        </h2>
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
        <div class="pagenation">
          <p>1</p>
          <a href="#">2</a>
          <a href="#">3</a>
          <a href="#">次へ</a>
        </div>
      </div>
    </article>
    
    <div class="about">
      <div class="about-left">
        <figure>
          <img src="image/profile-m.png" alt="男性の画像">
        </figure>
        <div class="about-left-items">
          <h3>John Doe</h3>
          <a href="#"><i class="fab fa-twitter fa-fw"></i></a>
          <a href="#"><i class="fab fa-facebook-f fa-fw"></i></a>
          <a href="#"><i class="fab fa-instagram fa-fw"></i></a>
        </div>
        <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
      </div>
      <div class="about-right">
        <div class="about-right-item">
          <div class="item1 item">
            <h3>フッター右</h3>
            <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
          </div>
        </div>
        <div class="about-right-item">
          <div class="item2 item">
            <h3>最近の投稿</h3>
            <span><a href="#">書くためのテーマ</a></span>
            <span><p>2018年9月1日</p></span>
            <span><a href="#">画像付きの投稿</a></span>
            <span><p>2018年3月5日</p></span>
            <span><a href="#">引用付きの投稿</a></span>
            <span><p>2018年3月5日</p></span>
          </div>
        </div>
        <div class="about-right-item">
          <div class="item3 item">
            <h3>カテゴリー</h3>
            <a href="#">サンプル投稿</a>
            <a href="#">投稿フォーマット</a>
            <span><a href="#">普通の投稿</a></span>
            <div class="wrap">
              <input type="text" placeholder="検索 …">
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <footer class="footer">
      <div class="footer-left">
        <a href="#"><i class="fab fa-twitter fa-fw"></i></a>
        <a href="#"><i class="fab fa-facebook-f fa-fw"></i></a>
        <a href="#"><i class="fab fa-instagram fa-fw"></i></a>
      </div>
      <div class="footer-right">
        <small>
          Powered by <a href="#">WordPress</a> | Theme: <a href="#">Write</a> by Themegraphy
        </small>
      </div>
    </footer>
    
  </div>
  
  <script src="script.js"></script>
</body>
</html>
```
![イメージ説明](614e1bb1381353874927cfa96ab45ffd.png)
![イメージ説明](8fea19561e68be26662711ac393290b8.png)
![イメージ説明](c09525960828651d3c3a2abba4becdfd.png)
![イメージ説明](4858c042a65ac77e975c4f81c9bef759.png)
![イメージ説明](ba03511af6a7e3f6bebfc6d2b88ab345.png)
![イメージ説明](cfbf76da9562c3d659bced0fa1d6f03c.png)
![イメージ説明](d30072a6756c9689c7a3b9145fabc50c.png)
![イメージ説明](0336d9f07c4f067662c7c2ef4df8fc5a.png)
![イメージ説明](96bc16d63d88637a35e59f7ba5391a3d.png)
### 試したこと
文字列検索で全角スペースを入れてみましたが、見つかりませんでした。
ハンバーガーメニューが原因かと思い、ハンバーガーメニューを
非表示にしてみても空白が生まれてしまいます。

本文が入りきらないので、CSSのコードを追記に記述させて頂きます。

ご回答頂けますと幸いです。
よろしくお願いいたします。

レスポンシブデザインを行った際、謎の空白が生まれる。

表題の通りです。
jQueryでそういったプラグインがありますが、下記のようなHTMLにCSSのみでそれを実現することはできますか？

```
<div class="graph">
	<div>
		<div class="graph-item">
			<h2 class="txt-h2">売上</h2>
			<div class="graph01"></div>
			<div class="graph02">
				<div>¥12,650</div>
				<div>前年</div>
			</div>
		</div>
	</div>
```