常連

注目の的

質問力

自己紹介

### 前提・実現したいこと
HTML & CSS 道場コース 中級編 中級編を復習しよう 3.レッスン一覧部分を作ろうに取り組んでいます。仕様書に従って、下記の図の「さぁ、あなたもProgateでプログラミングを学んでみませんか?」の要素を80px分下げようとしたのですが、この高さを指定するのにmarginではなくpaddingを用いるのが分かりません。なぜそうするのかを教えていただけませんか。



### 該当のソースコード
```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.<br>LEARN TO BE CREATIVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
      <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 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="text-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="text-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="text-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="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
        </div>
      </div>
    </div>
  </div>
  <div class="message-wrapper">
    <div class="container">
      <div class="heading">
        <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
        <h3>Let's learn to code, learn to be creative!</h3>
      </div>
      <span class="btn message">さっそく開発する</span>
    </div>
  </div>
</body>
</html>
```
```CSS
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* ここからcssを書いていきましょう */
.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;
  margin: 0 auto;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
  margin-bottom: 15px;
}

.signup {
  background-color: #239b76;
  margin-top: 15px;
  margin-bottom: 15px;
}

.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);
  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 a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
}

.lesson-wrapper {
  height: 580px;
  background-color: #f7f7f7;
  text-align: center;
}

.heading {
  padding-top: 80px;
  padding-bottom: 50px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.lesson{
  float: left;
  width: 25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 44%;
  width: 100%;
  color: white;
}

.text-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
  color: #b3aeb5;
}

.message-wrapper {
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}

.message:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}
```

### 試したこと

![イメージ説明](f084fad9abeb10220677e569b26fbcff.png)
上のCSSコードの下にある
.message-wrapper{
padding-bottom: 80px;
・・・・・
}
の80pxの部分をmarginではなくpaddingにしているのがわかりません。
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

なぜpaddingになるかがわかりません。

### 前提・実現したいこと

ブラウザ上でhtmlファイルを表示する処理をしていますが、cssファイルに記載されている部分が反映されません。

### 発生している問題・エラーメッセージ
デベロッパーツールのコンソール上に表示されています。
```
ERR_ABORTED 404 (Not Found)
```

### 該当のソースコード
htmlファイル
```
<!doctype html>
<html lang="ja">
  <head>
    <title>Hello, world!</title>
    
    <meta charset="utf-8">
    
    <link rel="stylesheet" type="text/css" href="css/base.css">
  </head>
  <body>
  	<div class="header">
      <div class="header-list">
        <ul>
          <li>グループ一覧</li>
          <li>グループ作成</li>
          <li>ユーザーログイン</li>
        </ul>
      </div>
    </div>
	</header>
	{% block content %}
    {% endblock %}
  </body>
</html>
```
base.css
```
li {
float: left;
}
```

### 確認したこと・試したこと

・ディレクトリ構成とcssファイルのコードが正しいこと、ファイル名が正しいことを確認しました。
・文字コードが「utf-8」であることを確認しました。
・デベロッパーツールでSourcesを確認し、cssファイルが読み込めていることを確認しましたが、ツール上ではcssファイルに記載がありませんでした。
・デベロッパーツールのSourcesにbase.cssの内容を記載したところ、反映されました。
・htmlファイルをダブルクリックしたところ、base.cssが反映された表示となりました。

### 補足情報（FW/ツールのバージョンなど）

Djangoを利用しています。

cssファイルが反映されません

###実現したいこと
svgで双曲線を書きたいです。しかし、双曲線はそもそも関数ではないので無理かなと思い始めています。わらにすがるような思いで質問します。
##やってみたこと
放物線は2次関数なのでベジェ曲線で定義可能です。両端の接線を導関数で導き、その交点を制御点として設定すれば、簡単に作成可能です。
しかし双曲線となると円の方程式に近いようなもので関数ではないので、今までのやり方だとどうしても放物線のような曲線になってしまいます。
今までのやりかたで作ったsvgがこちらです。webで表示してみてください。
```svg
<svg height="200" viewBox="0 0 100 100" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <marker viewBox="-10 -5 10 10" markerWidth="5" markerHeight="5" id="mk" refX="0" refY="0" orient="auto">
                <polyline points="-10,3 0,0 -10,-3" stroke="gray" fill="none" stroke-width="2"></polyline>
            </marker>
            <line x1="2" y1="50" x2="98" y2="50" stroke="gray" marker-end="url(#mk)"></line>
            <line x1="50" y1="98" x2="50" y2="2" stroke="gray" marker-end="url(#mk)"></line>
            <line x1="5" y1="15" x2="95" y2="85" stroke="gray"></line>
            <line x1="5" y1="85" x2="95" y2="15" stroke="gray"></line>
            <path d="M 95,22 Q 66,50 95,78" stroke="steelblue" fill="none"></path>
            <path d="M 5,22 Q 34,50 5,78" stroke="steelblue" fill="none"></path>
            <circle cx="84" cy="50" r="2" fill="gray"></circle>
            <circle cx="16" cy="50" r="2" fill="gray"></circle>
            <polygon points="77,29 77,71 23,71 23,29" stroke="gray" fill="none" stroke-dasharray="4 1"></polygon>
            <text font-size="10" x="93" y="58" fill="gray" font-style="italic">x</text>
            <text font-size="10" x="43" y="8" fill="gray" font-style="italic">y</text>
            <text font-size="10" x="42" y="61" fill="gray">O</text>
        </svg>
```
四角い枠に接するはずなのですが、やはり関数ではないので接しません。
ちなみに制御点を変更して、接するようにしたのがこちらです。
```svg
<svg height="200" viewBox="0 0 100 100" width="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <marker viewBox="-10 -5 10 10" markerWidth="5" markerHeight="5" id="mk" refX="0" refY="0" orient="auto">
                <polyline points="-10,3 0,0 -10,-3" stroke="gray" fill="none" stroke-width="2"></polyline>
            </marker>
            <line x1="2" y1="50" x2="98" y2="50" stroke="gray" marker-end="url(#mk)"></line>
            <line x1="50" y1="98" x2="50" y2="2" stroke="gray" marker-end="url(#mk)"></line>
            <line x1="5" y1="15" x2="95" y2="85" stroke="gray"></line>
            <line x1="5" y1="85" x2="95" y2="15" stroke="gray"></line>
            <path d="M 95,22 Q 59,50 95,78" stroke="steelblue" fill="none"></path>
            <path d="M 5,22 Q 41,50 5,78" stroke="steelblue" fill="none"></path>
            <circle cx="84" cy="50" r="2" fill="gray"></circle>
            <circle cx="16" cy="50" r="2" fill="gray"></circle>
            <polygon points="77,29 77,71 23,71 23,29" stroke="gray" fill="none" stroke-dasharray="4 1"></polygon>
            <text font-size="10" x="93" y="58" fill="gray" font-style="italic">x</text>
            <text font-size="10" x="43" y="8" fill="gray" font-style="italic">y</text>
            <text font-size="10" x="42" y="61" fill="gray">O</text>
        </svg>
```
厳密な曲線じゃないけど、方法がなかったらこっちでいいかなと思っています。
もし方法があれば教えてください。できればSVGで解決したいと思っています。
しかし、JSでもできるのであれば、それも教えていただけると助かります。
サインカーブもできれば実現したいです。

SVGで双曲線を書きたい

javaScriptのreplaceメソッドでスペースと空白行の削除を行い以下の様な状態にしたいと思いました。
//実行前-------------
　ああああああああああ

　いいいいいいいいいい

　うううううううううう

//実行後（理想の完成形）-------------
ああああああああああ
いいいいいいいいいい
うううううううううう

以下を実行したところ
replace(/\s+/g, "");

//実行後-------------
ああああああああああいいいいいいいいいいうううううううううう

空白改行とスペースを削除したいと思ったのですが、自分では正解が分からず、質問させて頂きました。よろしくお願いいたします。

【JavaScript】replaceでスペースと空白行の削除について

### 前提・実現したいこと

現在、javascriptの学習一環としてじゃんけんアプリを作っています。
その中でグー・チョキ・パーの３つの画像を横並びに表示したいと思っております。
### 発生している問題・エラーメッセージ
画像を探して、html・cssで画像を表示することまでは出来たのですが、
画像のサイズが大きいのか、横並びになってくれず、画像の大きさもバラバラです。
```
### 該当のソースコード
<html>

<main>
        <div class="btn">
            <div class="gu">
                <button id="gu_btn"><img src="9344.jpg"></button>
            </div>
            <div class="choki">
                <button id="cho_btn"><img src="9356.jpg" alt=""></button>
            </div>
            <div class="pa">
                <button id="par_btn"><img src="9357.jpg"></button>
            </div>
        </div>
        <div id="computer">コンピュータの出した手は？</div>
        <div id="judgment">結果は？</div>
    </main>

ソースコード
<CSS>

.btn{
    display: flex;
    justify-content:center;
    align-items:center; 
    width:100%
}

.gu{
    width: 30%;
}

.choki{
    width: 30%;
}

.pa{
    width: 30%;
}

画像の幅なども指定してますが、なかなかうまくいきません。。。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

CSSで画像を横並びに表示がしたい

### 前提・実現したいこと

Discord.pyで作ったBOTで　メッセージを送信したユーザーの権限を削除したい

・async def on_message(message):　　などは出来ている

・権限を付与する事は出来た

・権限を剥奪する方法が分からない

### 発生している問題・エラーメッセージ

```
権限を付与する事はできたので、付与した時の物を流用し、少し書き換えたができなかった
```

### 該当のソースコード

```python
role = discord.utils.get(message.guild.roles, name='権限名')
await message.author.remove(role)
```

### 試したこと

二行目にある　await message...を色々な物に変えてみた

例
message.author.get_role(role)
message.author.remobe(role)
　　　　　　　　　など

Discord BOTで権限剥奪

### 前提・実現したいこと
はじめてする操作なのですが、
<a href="#"target="blank" class="btn">詳細をみる<i class="fas fa-external-link-alt"></i></a>
このように打ち込んで動画ではこれで反映されているのに、
同じように打ち込んでもなにもおこらない。

### 発生している問題・エラーメッセージ
同じように入力しても反映されない

エラーメッセージ
特になし

### 該当のソースコード

```HTML
ソースコード
```<a href="#"target="blank" class="btn">詳細をみる<i class="fas fa-external-link-alt"></i></a>

### 試したこと

打ち直しで反映されたことがあったため何度か打ち直した
### 補足情報（FW/ツールのバージョンなど）

Windowsを使っています。
エディターはatomを使っています。

アイコンの反映がされない。

いつもお世話になってます。
javascript初心者です。

下記の２次元配列があリます。
dataArray変数の中には6/1~7/31までの日付データが格納されてます。
現在のやり方だと配列の中に１個ずつ手入力で書いていかないといけないので非常に面倒です。

```javascript
 var dataArray=[
["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05","2019/06/06","2019/06/07","2019/06/08","2019/06/09","2019/06/10","2019/06/11","2019/06/12","2019/06/13","2019/06/14","2019/06/15","2019/06/16","2019/06/17","2019/06/18","2019/06/19","2019/06/20","2019/06/21","2019/06/22","2019/06/23","2019/06/24","2019/06/25","2019/06/26","2019/06/27","2019/06/28","2019/06/29","2019/06/30"],
["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05","2019/07/06","2019/07/07","2019/07/08","2019/07/09","2019/07/10","2019/07/11","2019/07/12","2019/07/13","2019/07/14","2019/07/15","2019/07/16","2019/07/17","2019/07/18","2019/07/19","2019/07/20","2019/07/21","2019/07/22","2019/07/23","2019/07/24","2019/07/25","2019/07/26","2019/07/27","2019/07/28","2019/07/29","2019/07/30","2019/07/31"]  
];
```
今回、やりたいことはdataArray変数の中にある日付データを自動的に生成していきたいです。
ただ、検索してみても詳しい方法が書かれてなかったのでこの場を借りて質問させて頂きました。
ご教示の程、よろしくお願いします。

※追記
まず、「現在日付」を取得するコードを作成してみました。そのあと、6/1~7/31を表示させる処理を模索中です。
```javascript
        //本日の日付を取得している
        var date = new Date("2019/06/01");

        //2019/06/01~2019/06/30までの日付を繰り返し表示させる処理
        for(var i=1; i < 30; i++){
        //年を取得
        var year = date.getFullYear();
        //月を取得
        var month = date.getMonth()+1;
        //もし、左辺が右辺より小さい場合、文字列の０をたす
        if(month < 10){
            month = "0" + month;
        }
        //日を取得
        var day = date.getDate();
        //もし、左辺が右辺より小さい場合、文字列の０をたす
        if(day < 10){
            day = "0" + day;
        }
        console.log(year + "年"　+ month + "月"　+ day + "日"); 
    }
```

日付データを自動的に生成して配列の中に格納したい

```
reg add "HKEY_CURRENT_USER\Control Panel\Desktop" /v "Wallpaper" /t REG_SZ /d "C:\Pass\to\img.jpg" /f
```
で、Windowsの壁紙(レジストリ)を変更し、
```
rundll32.exe user32.dll,UpdatePerUserSystemParameters 1, True0
```
で変更を反映させる、
自動で壁紙を入れ替えるバッチファイルを作ったのですが、
この「変更を反映させる」コマンドがなんか不安定で、
一度でしっかり反映されるときもあれば十回ぐらいやらないときちんとできないときもあります。
何故でしょうか？解決法はありますか？

環境はWin10です。

レジストリの変更を反映するコマンドが不安定

MNISTをCNNではなく通常のニューラルネットで分類させようとしていますが、acc: 0.1044、つまり、正答率10％ほどで学習が進まないです。Kerasを用いています。試しにirisデータセットを用いたところ、90％ほどになったのですが、MNISTで学習が進まない原因はどこにあるでしょうか？「正答率が思ったほど高くならない」ならわかるのですが、10％はひどすぎて、プログラムのどこかに欠陥があるのではないかと思っていますが、、、、

```Python
import sys, os
sys.path.append(os.pardir)
from dataset.mnist import load_mnist
from keras import utils as np_utils
from keras.models import Sequential
from keras.layers.core import Dense
from keras.utils import to_categorical
from keras.optimizers import Adam
from keras.callbacks import CSVLogger

(x_train, t_train), (x_test, t_test) = load_mnist(flatten=True, normalize=False)

t_train_ = np_utils.to_categorical(t_train)
t_test_ = np_utils.to_categorical(t_test)
model = Sequential()
model.add(Dense(input_dim=784, output_dim=600, bias=True, activation='relu'))
model.add(Dense(input_dim=600, output_dim=500, bias=True, activation='relu'))
model.add(Dense(input_dim=500, output_dim=10, bias=True, activation='softmax'))
model.compile(loss='categorical_crossentropy', optimizer=Adam(), metrics=['accuracy'])
csv_logger = CSVLogger('log.csv', separator=',', append=False)
history = model.fit(x_train, t_train_,
                    batch_size=32, epochs=100,
                    validation_data=(x_test, t_test_),
                    callbacks=[csv_logger])
```

MNISTのニューラルネット（CNNではない）

```HTML
<button id="clickButton" class="buttonStyle" onclick = "doSomething();">click me</button>

<div class="wrapper">
	<div class="box" style = "background: #ccc"></div>
	<div class="box" style = "background: yellow" id ="none" ></div>
	<div class="box" style = "background: #000"></div>
	<div class="box" style = "background: #f00"></div>
	<div class="box" style = "background: #0f0"></div>
	<div class="box" style = "background: #00f"></div>
</div>
```
```JavaScript
function doSomething() {
	var none = document.getElementById('none');
	none.style.display = "none";
}
```

```CSS
.wrapper{
	 font-size:0;
	width: 960px;
	margin: 0 auto;
	
}
.box{
	display: inline-block;
	width: 310px;
	height: 320px;
	background-color: red;
	margin-right: 15px;
	margin-bottom: 15px;
}
.wrapper > .box:nth-child(3n){
	margin-right: 0px;
}
```
　　
上記のコードだと、ボタンを押すと、二番目が非表示になります。
（実際は絞り込み機能に使用したいので、どのボックスが消えるかわからないものとしたいです。）
　　
非表示後に、レイアウトが崩れてしまいます。:nth-child(3n)が非表示後の三番目に適応されないからです。
非表示後に適応する方法はございますでしょうか？アドバイスよろしくお願いいたします。

補足： display: inline-boxを使用しているのは、職場のサービスが使用しているので、同じ状況にしました。

### 追記
非表示後には、要素を詰めるようにしたいです。
今の状況だと、二番目が消え、要素が詰めるようになっていますが、
三番目にmargin-right: 0pxを適応しているため、四番目との間がなくなってしまいます。

二番目非表示後
![![イメージ説明](c75eb95a63314bf41448389db6673781.png)]

JavaScript 非表示による順番 nth-child()

作りたいもの
---
指定した時間に挨拶をするdiscordのbot
現状
---
pythonでdiscordのbotを作っていて、webサイトを参考にしているのですがbotを自ら発言させる方法がわからなくて困っています。

作ってみたコード
---
```
python
import discord # インストールした discord.py
import time
from time import sleep
import threading

client = discord.Client() # 接続に使用するオブジェクト

async def login_status_message():
    while True:
        if time.strftime('%H:%M:%S',time.localtime())=='21:00:00':
            channel = client.get_channel('チャンネルID')
            await client.send_message(channel, '勝手に喋るよ')
            sleep(5)

# 起動時に通知してくれる処理
@client.event
async def on_ready():
    print('ログインしました')

@client.event
async def on_message(message):
    if message.content.startswith('挨拶して'):
        reply = 'こんにちは'
        await client.send_message(message.channel, reply)

# botの接続と起動
# （tokenにはbotアカウントのアクセストークンを入れてください）
client.run('トークン')
```
下段で書いてる「挨拶して」という言葉に対して「こんにちは」と返すプログラムは機能しました。

上段では21時に任意のチャンネルに「勝手に喋るよ」とbotを発言させるつもりだったのですが上手くいきませんでした。

webサイトで出ていた部分を切り取って書いてたりしてので正直これで合っているかもわからないです。

似たようなbotを作ってるサイトなどがあったら是非教えてください。
参考webサイト
---
[リンク内容:Pythonで実用Discord bot(discord.py解説)](https://qiita.com/1ntegrale9/items/9d570ef8175cf178468f)

Pythonで指定した時間に挨拶をするdiscordのbotを作りたい

stylusで
*{
    background-color:#006400 !important;
  
}
と記述した場合にサイト（https://support.google.com/*）が正しく表示されないのですがcssを特定のurlに適用しないなどの対処方法を教えてください。

background-color:でサイト（https://support.google.com/*）が正しく表示されない場合の対処方法

パスワードをデータベースで保存します。

その際に、sha256でソルト値与えて、ハッシュ化してそのままDBに保存します。
パスワードを復元するつもりはございません。

これで安全でしょうか？

sha256でパスワードをハッシュ化するだけで安全か？

現在、jQueryを使用してリッチテキストエディタを作成しています。
リッチテキストエディタの内容としては、ある正規表現にマッチした文字列を自動的に```<span>```で囲うというものです。その際に、```<div contenteditable="true"></div>```という要素でマッチした文字列を```<span>```で囲っているのですが、```<span>```で囲った後に文字列を入力すると、キャレットの位置がおかしくなってしまいます。
どうすれば、キャレットの位置を元の位置に戻せるのでしょうか？

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="e.js"></script>
	<style type="text/css">
	a{
		color:red;
	}
	</style>
</head>
<body>
	<textarea id="textView"></textarea>
	<div contenteditable="true" id="ritchTextView" style="background-color: rgb(200,200,200); height: 200px;"></div>
</body>
</html>
```

```javascript
var richTextFocus = false;
var PrevText = "";
var Timer = null;
$(function(){
	$("#ritchTextView").focus(function(event) {
		richTextFocus = true;
		Timer = setInterval(function(){ritchTextEdit()},10);
	}).blur(function(event) {
		richTextFocus = false;
		clearInterval(Timer);
	});

	function ritchTextEdit(){
		if(richTextFocus){
			var NewText = $("#ritchTextView").text();

			if(PrevText != NewText){
				PrevText = NewText;

				var range = document.createRange();
				var NowSelect = window.getSelection();
				var eRange = NowSelect.getRangeAt(0);

				$("#textView").val(NewText);

				var OutoutHtml = NewText.replace(/\n/g, "<br>\n").replace(/aa(.*?)aa/gm, function(){
					return "<a>*"+RegExp.$1+"</a>";
				});

				if(OutoutHtml != NewText) $("#ritchTextView").html(OutoutHtml);
				console.log(eRange.startContainer);
				range.setStart(eRange.startContainer, eRange.startOffset);
				range.setEnd(eRange.endContainer, eRange.endOffset);

				NowSelect.removeAllRanges();
				NowSelect.addRange(range);


			}
		}
	}

});
```

HTML+Javascript(jQuery)+CSSで作るリッチテキストエディタについて

現在ウェブ制作を行っています。

デザインとして以下のようなものをレスポンシブにコーディングしたいです。
（blue-backブロック要素の中で常に中央にありつつ、下部に位置するような）

```html
<div class="blue-back">
    <div class="white-back">
        ...
    </div>
</div>
<div class="gray-back">
    ...
</div>
...
```

![example](1c8ce10388a3a91f9a3ebb582c6c7a14.png)



色々試行錯誤してみたのですが、なかなかうまく実現できません。
こういった場合は、どういった方法で実現するのでしょうか？

JavaScriptを用いて幅を取得しつつ、マージンを計算し適用する、といった操作が必要になってくるのでしょうか？

ご教示いただければ嬉しいです。よろしくお願いします。

## 追記

質問ご覧いただきありがとうございます。
あいまいな説明で申し訳ありません。
@sk_3122さんの情報の追記依頼に回答します。

#### ■これは、灰色の部分は常に画面下部にある状態でしょうか？（ブラウザサイズを縮めても常に位置固定？メニューバー的な）また、灰色部分の高さは固定なのかとか、内容値によってサイズが変わる感じなのか等の情報も必要でしょうか。

灰色の部分はは特にフッター（常に画面下部にある）である、という意味ではありません。
blue-backの部分はページのトップに位置しヘッダーも含まれる部分ですので、ロゴやナビゲーションバーなどを配置する予定です。ヘッダーに関しては実装済みですので、特に問題ありません。

また、blue-backの高さは `height: 100vh`で高さを持たせることを検討しています。

#### ■ブラウザサイズを縮めた場合はどうなるのでしょうか。

white-backの要素の上にちょっとした文字が載る補助的なデザインを想定しています（文字の可読性を上げるためのデザイン）。ですので、モバイル・タブレットなどの幅の狭い端末ではwhite-back要素は背景色を適用せず（ないものとして）、幅が広いPC端末のみ、このデザインを適用したいと考えています。

よろしくお願いします。

ブロック要素を中央下揃えに配置したい

audioの読み込みが終了したことを知る方法はありますか？
【現状】
音の読み込みが終了する前に再生ボタンを押されると、長らくサイレントで何も起こらず、読み込まれたタイミングで突然その音が再生されます。
理想の状態は、読み込みの最中には「読み込み中」と表示され、読み込み終了後に「再生する」と表示されていることです。ちなみに音は１０個以上あり、全ての読み込みが終了した時点で処理を実行したいです。

```HTML
<audio src="sound.mp3" preload="auto" id="sound"></audio>
<span id="play_button">読み込み中</span>
```

```javascript
jquery
$("#play_button").click(function(){
  $("#sound").play();
})

```

試したこと（１）
以下では読み込み完了時点ではなく、開始時点で処理が実行されてしまいます。
```javascript
     $("audio").on("load",function(){
      $("span").text("再生する");
```

試したこと（２）
.when と done を使っても、全く読み込みすらされない、もしくは読み込み開始時点で処理が実行されてしまいます。
```javascript
 $.when(
    $("audio").load()
  ).done(function(){
    $("#yomikomi").text("音声の読み込みが終了しました。")
  })  
```

英語の記事も読み解決策を探していますがなかなか解決できません。
教えていただけると大変嬉しいです。
ちなみに、方法によっては画像の読み込みでは使えても、音声の読み込みだと使えない場合もあるようです。
よろしくお願いいたします。

audio 音 のロード終了時に「ロード完了」と表示させたい

audioタグで音楽を再生させ、その再生が終わった後、また別のaudioタグで別の音楽を自動的に読み込み再生させるにはどうしたら良いでしょうか？

audioタグ終了後に別のaudioを再生させるには？

### 発生している問題・エラーメッセージ
VirtualBoxが起動できない。
```
VirtualBoxが予期しない理由で終了しました。
アプリケーションを再度開く場合は、“再度開く”をクリックしてください。詳細を確認してAppleにレポートを送信する場合は、“レポート”をクリックしてください。
```
「再度開く」ボタン押す　→ 同様のウィザードがずっと繰り返される
「無視」ボタン押す　→ 再度アプリケーションを起動するも同様のウィザードが出現する

### 補足情報
GUIからは、VirtualBoxの起動ができませんが、
CUIからは、vagrantを通して起動が可能です。
```bash
vagrant up => 起動 可能
vagrant ssh => 接続 可能

```

### 環境
OS: Mac OS High Sierra 10.13.5


### 試したこと
1,最新のVirtualBoxのインストール
Version：Oracle VM VirtualBox Base Packages - 5.2.12

2,以前使用していたVirtsualBoxの再インストール
Version：5.1.28

VirtualBoxが予期しない理由で終了しました。

javascriptでの、ファイル一覧の所得について


以下のページから拝借させて頂いたhtmlファイル、
[https://ameblo.jp/dame-d/entry-11843110627.html](https://ameblo.jp/dame-d/entry-11843110627.html)
このhtmlファイルと同じフォルダのファイル一覧を所得したいと思います。
```html
<!DOCTYPE html>
<html>
<head>
  <title>テスト</title>
</head>
<body>
<script>
    function fileListDirectory(files) {
        var ファイル数 = files.length;
        var ファイル名 = new Array();
        var パス     = new Array();
        for (i=0; i<ファイル数; i++) {
            ファイル名[i] = files[i].name;
            パス[i]       = files[i].webkitRelativePath;    // 行Ａ
        }
        var 表示内容 = "";
            for (i=0; i<ファイル数; i++) {
            if (ファイル名[i] == ".") {                     // 行Ｂ
                表示内容 += "フォルダ：";
            }
            else {
                表示内容 += "file：";
            }
            表示内容 += パス[i] + "<br>";
        }
        document.getElementById('表示場所').innerHTML = 表示内容;
    }
</script>
<p><input  type="file"
    webkitdirectory directory                             
    onChange="fileListDirectory(this.files)"></p>
<div id="表示場所" class="red">結果がここに表示されます。</div>
</body>
</html>
```


このファイルの場合、フォルダを指定して一覧を表示していますが、
フォルダを指定するのではなくhtmlファイルがあるフォルダと同じ場所のファイル一覧を表示するには、どの様にして、フォルダを指定すれば良いのでしょうか？

なお、サーバ上ではなくローカルフォルダ上での事です。