常連

テラテイラー

回答者

ベストアンサー

拍手喝采

プロフェッサー

スピードスナイプ

先生

情報収集家

支持者

鑑定士

有名人

### 実現したいこと

目次等の、内容とページ数の間を埋める点線について、
レスポンシブ対応させたいのですが、
可変するとブラウザ幅によっては点が半分に切れたりしてしまうので、それを解消したいです。
・点の位置は縦が揃っているようにしたい（ページ数の方にスタートを寄せる）
・点の個数が、1個単位で変わるようにしたい（０.５個（ちょっとだけ見切れている等）は無し）

### 該当のソースコード

```html
<dl>
　<div class="item">
　　<dt>内容1について</dt><dd>1ページ</dd>
　</div>
　<div class="item">
　　<dt>内容の文章が長いバージョン</dt><dd>100ページ</dd>
　</div>
</dl>
```
```css
.item {
　display: flex;
  justify-content: space-between;
  align-items: center;
　position: relative;
}
.item::after {
　position: absolute;
　top: 50%;
　transform: translateY(-50%);
　display: block;
　width: 100%;
　background-image : linear-gradient(to right, #000 2px, transparent 2px);
　background-size: 10px 2px;
}
dt {
　position: relative;
　background-color: #fff;
　z-index: 1;
}
dd {
　position: relative;
　background-color: #fff;
　z-index: 1;
}
```

### 試したこと
調べて、上記のように疑似要素を背景にし、文字は重ねる方法で実装しました。
重ねず、dtとddの間にspan などを入れて、
疑似要素にcontent:"・";
を入れる方法も試しましたが、レスポンシブに対応できなかったのでとりやめました。




目次やレシピで使用する文字の間の点線について

MDN の [Math.random()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) の説明を読んでいると、以下の記述がありました。

> 例

> JavaScript における数値は、IEEE 754 浮動小数点での round-to-nearest-even を行うため、以下の関数の値域が ( Math.random() 自体の値域が正しくても) 厳密ではないことに注意してください。非常に大きい境界値 (2 の 53 乗以上) のうち極めて稀な数値で、通常なら返されないはずの上限値が出力されてしまうことがあり得ます。

このコメントを素直に読むと
・`Math.random() * num` で `num = 2 ** 53 以上`の範囲で上限値 num が出力される
と読めるのですが、
・`Math.random() * num` で `num = 2 ** 53 以上の特定の数`で上限値 num が出力される
とも読めます。

正しくはどういった内容なのでしょうか？
ご教授いただければ幸いです。

Math.random() の境界上限値の出力に関して

現在、FlutterやVue等の勉強中なのですが、サーバーサイドアプリの必要性がわかりません。
SPA等で制作する場合サーバーサイドアプリはDBデータの取得・更新程度の役割しか無いと思います。
そこで直接フロントサイドアプリからDB操作を試みようと調べてみましたが、「セキュリティ観点からよくない」という記事を見かけます。
間にサーバーサイドアプリを挟んだとしても間接的ではありますが外からDBを操作していることに違いはないと思います。
サーバーサイドで認証機能を設けてアクセスに制限をかけてセキュリティを高める目的も有るのでしょうがDB接続用のパスワードをより強固なものにすれば解決するのでは？と思ってしまいます。

なぜフロントサイドから直接DBを触ってはいけないのでしょうか？

フロントサイドから直接DBを触ってはいけない？

WEBアプリで認証にはユーザーIDとパスワードをクライアントからサーバーに送信しますが、これは平分で送信すると漏洩する可能性があります。そういう場合どのような仕組みで漏洩を防いでいますか？

### 質問前に調べてわかったこと
 - HTTPでは暗号化されないので平分のまま通信を行うと危険。

### これまでの回答でわかったこと
 - HTTPSであれば平分の送信でもOK。ただし、サーバーにパスワードそのもののログが残る可能性があるのでクライアントとサーバーの両方でハッシュ関数を通す。

### まだわからないこと
 - HTTPの場合は、暗号化は通常されません。そのためパスワードを平分で送信すると簡単に漏洩すると思います。これはもはやHTTPのサーバーをそもそも使用しないという選択が最善な気がしますが、これに関してHTTPSにのみ対応することで生じるデメリットはあるでしょうか？

WEBアプリでパスワードの漏洩防止の仕組みとは

安全なパスワードの保存を行う為に暗号化はどこで行うべきですか？（旧タイトル）
---

Webサービスで安全なパスワードの保存を行いたいとします。

パスワードをSHA256などによって暗号化することはよくある話だと思います。しかし、このSHA256を利用して暗号化する場合、暗号化はサーバサイドで行うべきか、クライアントサイドで行うべきか悩んでいます。

サーバサイドで暗号化を行う場合、入力されたパスワードが暗号化されないままサーバに届くことになります。（SSLの話ではありません）

その後、アプリケーションサーバの手によってデータベースにパスワードを保存する際にはSHA256によるパスワード暗号化を行った上で保存することになるわけですが、アプリケーションサーバにはパスワードがそのままの形で届いてしまっていることに変わりありません。

我々が利用しているアプリケーションサーバはセキュリティ的に問題無いから大丈夫だ！とサービス運営者が主張したところで、サーバの権限を奪われる可能性はゼロではありませんし、それ以前にアプリケーションサーバの運営者はパスワードが直接届くような環境でアプリケーションを日々保守していたりするわけです。

また、アプリケーションサーバがGETやPOSTに対するログを取るように設定されていた場合、送信されたパスワードは暗号化されることなくログファイルに記載されることになります。

つまり、サーバサイドでSHA256によるパスワード暗号化を行う仕様の場合、暗号化されないままアプリケーションサーバに届くパスワードを運営は安全に管理してくれるだろうと信用する形でサービスを利用することになります。

これはなんかダメなんじゃないかなっていう気がするんです。

これを回避するためJavascriptなどを利用してクライアントサイドでパスワードを暗号化してからアプリケーションサーバに暗号化されたパスワードを送る方法をとれば、このような心配事は無くなります。

しかしその場合、SHA256で使用するSaltキーなどはどのように設定すれば良いのでしょうか？そのままjavascriptのソースファイルに暗号化キーであるSaltキーを記述してしまって良いのでしょうか？

なんとなくSaltキーの情報が漏れていることはあまり良くないことのような気がしています。しかし、SHA256は復号化が不可能な暗号化なので、一度暗号化されてしまったものを復号化することは不可能だと思います（そうですよね？）

だから安全だと言い切れるのでしょうか？
何か嫌な感じがします。

どうにかSaltキーの情報を隠蔽したいと思っていますが、クライアントサイドで暗号化を行う以上、隠蔽することは不可能なのではないかと思っています。本当にこのSalt隠蔽問題は気にしなくても良いことなのでしょうか？

何か考え方がおかしいのかもしれませんが、こんな私に何かアドバイスいただけたらと思います。

追記（2016/09/26 18:30）
---
質問がダラダラとした文章になり、分かりにくいようですので質問を変えさせていただきます。

SSLによる暗号化通信を前提としたWebサービスで入力フォームなどによってユーザが入力するパスワード文字列をサーバサイドで暗号化する場合、そのパスワードの安全性が保障されません。

なぜなら運営がパスワードを安全な形で管理しているかわからないし、暗号化していたとしても暗号化する前のパスワードをアクセスログに残している可能性なども考えられるためどこからパスワード文字列が漏れるかわからないからです。

しかし、クライアントサイドでパスワードを暗号化した場合は、アプリケーションサーバにパスワードが届いた地点ですでに暗号化されているため、パスワードの文字列が漏洩する心配は無くなります。

漏れたとしても暗号化後のハッシュ文字列だから元のパスワードが漏れるより安心できると考えられます。

そのため、クライアントサイドでSHA256によるパスワード暗号化を行った上でサーバサイドにパスワードを送る方法をとったほうがユーザにパスワードの安全性を保証することができるのではないですか？

この考え方は正しいですか？

またクライアントサイドでSHA256によるパスワード暗号化を行った場合、ハッシュを生成するために必要なSaltキーが必要になりますが、Saltキー隠蔽することは可能ですか？不可能な場合、Saltキーが漏洩していることでどのような問題が起こりますか？

追記（2016/10/01 18:06）
---
ここまでの流れとして、質問者（私）が認識したことをまとめてみます。

- SSL/TLSを利用したhttpsプロトコルの利用は必須
- SHA256は暗号化ではなく、ハッシュ生成のアルゴリズム（関数）である。
- Saltはキーではない
- 常識的にシステムを構築していればSaltは漏洩は気にしなくて良い
- サーバサイドでのパスワードのハッシュ化は必須である
- クライアントサイドで生成したパスワードハッシュをそのままDBに保存してはならない
- パスワードのハッシュが漏洩した場合、元のパスワードを総当たりで突き止めることができる（オフラインの場合？）

SSLを利用したWebサービスでログインパスワードを安全に保存するには？

`audio`タグによるJavaScriptでの音源の重複再生では、
[このページ](http://wordpress.ideacompo.com/?p=13989)より`audio`タグを**追記してその個数分重複させる**必要があります。
ブラウザゲーム、特にFPSでの銃の発砲音(ダダダダダダダダ...)ではどのような処理で重複再生をしているのでしょうか？
`audio`タグを作って削除、作って削除...ではページに非常に負荷がかかると思います。
ブラウザゲームを作る予定なので、負荷がかからない重複再生方法がに非常に気になります。

audioタグでの負荷がかからない重複再生方法とは？

将来プログラマー志望の高校生です。（理由は単純にプログラミングが好きだからです）

以下、本題です。
最近、よくyoutubeや広告などで「未経験からエンジニアに〜」という類のタイトルを目にするのですが、なぜ、最近になってプログラマーの人気が上がってきたのでしょうか？
最短一ヶ月で未経験からプログラマーになれると豪語する学習サービスまで見たことがあるのですが、これは逆に言えば、一ヶ月という短期間の学習だけでもすぐさまプログラマーになりたいという方が、多くいるということですよね？
古い小説や漫画ではプログラマー=ブラックという書き方さえも見たことがあるのですが、今はなぜブラックどころかホワイトのイメージが世の中に定着しているのか、社会経験のない普通の高校生である自分には理解ができません。
今のITの世界のリアルを知っていると思われる現役エンジニアの方から意見をお聞きしたく、このような質問をさせていただきました。どこまでがプログラミングに関係のない質問になるのか正直なところよくわからないのですが、もしそのような判断をされる方が多数いらっしゃるようであれば申し訳ありません。

回答よろしくお願いします。

なぜ最近になってプログラマーの人気が上がっているのか？

### すでに関数が宣言されているとエラーが出てしまう

Reactを学習し始めたばかりです。Todoリストのデモも作成しています。★で囲んであるコードを書かなければ正常に画面にcssが反映されるのですが、★で囲まれた部分（Formタグの中のformタグに反映させたいcss）を記載した途端

Failed to compile
./src/App.js
  Line 22:7:  Parsing error: Identifier 'Form' has already been declared
  20 |   font-size: 3rem;
  21 | `
> 22 | const Form = styled.form`
     |       ^
  23 | text-align: center;
  24 | `
  25 | 

というエラー出てしまいます。

記載する部分が違うのか、そもそも記載の仕方が違うのでしょうか。(Form.jsのコンポーネントに書くのか)
コードの書き間違いはないと思うのですが...初歩的な質問ですいません。
お時間のある方、宜しくお願いします。

index.js
```import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
コード
```

App.js
```import React from 'react'
import Form from './Form'
import List from './List'

import styled from 'styled-components'

const App = () => {
  return (
    <>
      <Title>Todo App</Title>
      <Form></Form>
      <List></List>
    </>
  )
}

const Title = styled.h1`
  text-align: center;
  color: #ff7a84;
  font-size: 3rem;
`
★
const Form = styled.form`
text-align: center;
`
★

export default App
コード
```
Form.js
```import React from 'react'

const Form = () => {
  return (
    <form>
      <input type="text" />
    </form>
  )
}

export default Form
コード
```

Reactでstyled-componentsが上手くいかない

### 前提・実現したいこと
bootstrap4をwebpackerで導入したが、ハンバーガーメニューが効かない。

（環境）
・ruby 2.6.5
・Rails 6.0.2.2
・Windows　10

### 発生している問題・エラーメッセージ

```
Uncaught TypeError: Cannot convert object to primitive value
    at RegExp.test (<anonymous>)
    at HTMLDivElement.<anonymous> (bootstrap.js:1498)
    at Function.each (jquery.js:325)
    at jQuery.fn.init.each (jquery.js:165)
    at jQuery.fn.init._jQueryInterface [as collapse] (bootstrap.js:1492)
    at HTMLDivElement.<anonymous> (bootstrap.js:1552)
    at Function.each (jquery.js:325)
    at jQuery.fn.init.each (jquery.js:165)
    at HTMLButtonElement.<anonymous> (bootstrap.js:1547)
    at HTMLDocument.dispatch (jquery.js:4670)
```

### 該当のソースコード

```
#config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment

```

```
#package.json
{
  "license": "UNLICENSED",
  "name": "winekeeping",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.9.4",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "popper.js": "^1.16.1",
    "prop-types": "^15.7.2",
    "rails-erb-loader": "^5.5.2",
    "raty-js": "^2.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}
```

```
#javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery');
require('raty-js');

const images = require.context('../images', true)

import 'bootstrap';
import '../stylesheets/application';
import '../stylesheets/custom';
import '../stylesheets/jquery.raty';
```

### 試したこと

Navbarやレスポンシブは効いています。

bootstrap4をwebpackerで導入したが、ハンバーガーメニューが効かない。

### 前提・実現したいこと

forとsetTimeoutを合わせてsleep入れる形を考えているのですが、
sleepになっておらず、またxの数値も加算されていきません
このコードの問題点をご指摘いただけないでしょうか

また、9999回のループ中に処理中断ボタンを押したらループを抜け、
処理を止めれる形にしたいです

### 該当のソースコード

```JavaScript
<script>
var timerID;
var f=0;
function timer(){
clearTimeout(timerID);
text.innerHTML+=x+"<br>";
}
window.onload=function(){
for(i=0;i<9999;i++){
x=i;
if(f==1){
break;
alert("中断");
clearTimeout(timerID);
}
timerID=setTimeout("timer()",1000);
}
}
</script>
```
### 該当のソースコード
```HTML
<input type="button" value="処理中断" onclick="f=1">
<font id="text"></font>
```

forとsetTimeoutを合わせてsleepさせたい

clipboard.jsや他の方法は、HTMLの値を渡しそれを受け取っていますが、HTMLを一切介せず、
純粋にJavascript内の処理でのみクリップボードに値をコピーする処理を完結させることは出来ないでしょうか？

変数の値をクリップボードにコピー

CSSでは　overflow:scrollを適用することで右下にはみ出た部分を見ることができますが、左上の部分もスクロールして見れるようにする方法はあるのでしょうか？


```html
<div id="hoge">
  <img id="fuga"></img>
</div>
```

```css
#hoge{
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
overflow:scroll;
}

#fuga{
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
scale:2;
}
```

overflowで上へはみ出た部分も見れるようにする

うまく言葉に表せないのですが，画像のようなデザインのWebページを実現するためにはどのような方法が適しているでしょうか．

![イメージ画像](4d64a323628613b5857a262dc8a06d93.png)


追記

```html
（省略）
<body>
  <main>
    <div class="margin-box left"></div>
    <div class="flex">
      <section class="content">
        <h2>test</h2>
        <p>testtesttest</p>
      </section>
      <div class="diagonal"></div>
    </div>
  </main>
</body>
</html>

```

```css
*{
  margin: 0;
  padding: 0;
}

.flex{
  display: flex;
  align-items: flex-start;
}

body{
  background-color: black;
  color: white;
}

main{
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 10%;
}

.margin-box{
  height: 300px;
  margin-bottom: -20px;
}

.left{
  border-left: 3px solid #FFF;
}

.content{
  width: 60%;
  overflow: hidden;
}

h2 {
  position: relative;
  display: inline-block;
  padding: 0 50%;
}

h2:before,h2:after{
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 40%;
  height: 3px;
  background-color: white;
}


h2:before {
  left:0;
}

h2:after {
  right: 0;
}

.diagonal {
  content: '';
  display: inline-block;
  height: 3px;
  width: 40%;
  background-color: white;
  transform: skewY(45deg);
  margin-top: 19.7vw;
}

.diagonal > * {
  transform: skewY(-45deg);
}

```

全く実現できていませんが現時点でのコードはこんな感じです．
課題としては，横幅の変化によって斜め線の位置がずれてしまうことです．

cssで斜め線と直線を併用し，sectionの区切り線を実装したい

### 前提・実現したいこと

node.js、EXpressで構築したWEBページ上にCSSを読み込ませること

Web開発者ツールで、以下のエラーメッセージが発生しています。

### 発生している問題・エラーメッセージ

```

GET 
http://127.0.0.1:3000/ [HTTP/1.1 200 OK 1ms]
HTML ドキュメントの文字エンコーディングが宣言されていません。ドキュメントに US ASCII 外の文字が含まれている場合、ブラウザーの設定によっては文字化けすることがあります。ページの文字エンコーディングはドキュメント中または転送プロトコルで宣言されなければなりません。  127.0.0.1:3000
GET 
http://127.0.0.1:3000/main.css [HTTP/1.1 200 OK 1ms]
MIME タイプが “text/css” ではなく “text/html” となっているため、スタイルシート http://127.0.0.1:3000/main.css は読み込まれていません。  127.0.0.1:3000
```

### 該当のソースコード

```index.js

var http = require('http');
var express = require('express');
var fs = require('fs');
var url = require('url');
var path =require('path');
var css = require('css');
var app = express();

var mime = require('mime');
mime.getExtension('text/html; charset=utf8');
mime.getExtension('text/css; charset=utf8');

var cache = {};

app.use(express.static(__dirname+'public'));

var server = http.createServer();

server.on('request',(function(req,res){

fs.readFile(__dirname + '/index.html', 'utf-8', function (err, data) {
 if (err) {
            res.writeHead(404, {'Content-Type' : 'text/plain'});
            res.write('page not found');
            return res.end();
        }
res.writeHead(200, {'Content-Type' : 'text/html'});
        res.write(data);
        res.end();
    });
})

).listen(3000)

```
```index.html
<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<link rel="stylesheet" type="text/css" href="main.css"/>
</head>

<body>
<div class="header">
  <h2>Blog Name</h2>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>
</body>
</html>

```
```main.css
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}
```

上記3つのファイルはすべて同じディレクトリにあります。

### 試したこと

MIMEアドオンをインストールし、text/cssを指定してはいますが
res.writeHead(200, {'Content-Type' : 'text/html'});の部分しか読まないためか効果がありません…


### 補足情報（FW/ツールのバージョンなど）

node v0.10.48
npm v1.3.6
express v4.17.1

node.js、EXpressで構築したWEBページ上にCSSを読み込ませることができない

以下HTMLですが、svgの範囲がpathに比べてやたらでかくなってしまいます。これはどうしたらぴったりにできますか？

[表示サンプル](https://jsfiddle.net/1n2dm5g0/)
```html
<div class="icon icon-hito"><svg><path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" /></svg></div>
```

![イメージ説明](4d4a500059d76b79e2d350b81b9f2739.png)

試したことというか解決できたのはuseを使う方法です。
しかしそうしたら今度はpathに親要素からのCSS指定できなくなったので、やはりuseは使わない方向で進めていきたいと思っています。

svgの範囲をpathに合わせる方法を、できればノーマルなCSSで知りたいです。夜分すみませんがどなたか宜しくお願いします！

svgの範囲がpathに比べてやたらでかい

TypeScript + React（JSX）のコードを書いていたのですが、うっかり拡張子が`.ts`のままJSXを書いてしまってトラブルとなることがありました。もちろん拡張子を`.tsx`とすれば解決はするのですが、JSXの有無に関わらず、最初から全ファイルを`.tsx`としてしまって不都合なことはありますでしょうか。

全ファイルを`.tsx`で作った場合、「`.ts`はMPEG-2 TSと拡張子が衝突するけど`.tsx`はそうならない」「あとからJSXが必要になってもそのまま書け、ファイル名変更が不要」などのメリットが見込めます。

下に書いたように「`<type>`形式でのキャストができない」ということは承知ですが、それ以外に「`.tsx`ファイルだとこんな不都合がある」ということがありましたら教えていただければと思います。

### 調べたこと

* [Allow JSX without using `.tsx` extension](https://github.com/microsoft/TypeScript/issues/30503) - 逆に、`.ts`でもJSXを書けるようにしてはどうかという提案（クローズされています）
* キャストの記法として`value as type`と`<type>value`の2通りがあって、後者は`.tsx`ファイルには書けないこと

### 補足情報（FW/ツールのバージョンなど）

* TypeScript 3.7.5
* React 16.12
* Webpack 4.41.6
* Webpackへの読み込みには`ts-loader`を使用（型チェックは`fork-ts-checker-webpack-plugin`に投げている）
* エディタはVisual Studio Codeを使用

Reactを使うプロジェクト内のTypeScriptをすべて.tsxで作るデメリットについて

### 前提・実現したいこと
現在、WPのニュースサイトのようなものを作成しており、
各記事へ遷移するパネルのコーディングをしております。

【PC】
大パネル：3
小パネル：3

【SP】
大パネル：2
小パネル：4

レスポンシブで上記のような表示の出し分けがしたいです。

![イメージ説明](8685eace79e962631c25b904974c0a59.jpeg)

流し込みの関係上、大パネルも小パネルも同じ``ul``としております。

そのため、``li``ひとつひとつに連番を振っており、
``articleListStyle01,articleListStyle02,articleListStyle03``はwidthがどうこう...
SPの時は``articleListStyle01,articleListStyle02``だけwidthが...
というように、番号に対してstyleをつけています。


### 発生している問題
表示の実現はできそうではあるのですが、
cssの記述が長くなってしまい、もっとすっきりした書き方できないかな？と思っています。

下記のように書くしかないでしょうか？

```css
#content .articleList06 > li.articleListStyle01,
#content .articleList06 > li.articleListStyle02,
#content .articleList06 > li.articleListStyle03 {
  width: 33%;
}
#content .articleList06 > li.articleListStyle01 > a,
#content .articleList06 > li.articleListStyle02 > a,
#content .articleList06 > li.articleListStyle03 > a {
  display: initial;
}

#content .articleList06 > li.articleListStyle01 .imgArea img,
#content .articleList06 > li.articleListStyle02 .imgArea img,
#content .articleList06 > li.articleListStyle03 .imgArea img {
  width: initial;
}

.
.
.

```

レスポンシブデザインでのcssの書き方のすっきりさせたいです

### 前提・実現したいこと

パソコン用のデザインカンプと750pxで作成されたデザインカンプがあります。
この750pxのカンプはレティーナのために2倍のピクセルで作成されています。
この場合のレスポンシブ込みのコーディングの考え方を教えていただきたいです。

####疑問1
ブレイクポイントは750pxでいいか

####疑問2
文字サイズは単純にカンプの1/2でいいか

####疑問3
スマホ時はretina用の画像を設定したいが、画像のretina対応がよくわからない

・srcsetのwは、写真データそのものの横幅を指しているのか、それとも、、、？？
・sizes属性の書き方はどうするべきか(スマホ時にretina対応にしたい)


### 試したこと

####疑問1について
ブレイクポイントは750pxでいいか

現在はmax-width:750pxを設定

####疑問2について
文字サイズは単純にカンプの1/2でいいか
現在は画面幅750pxを基準にvwでフォントサイズを決めている
(750pxのとき30px、375pxのとき15pxになる)

####疑問3について
画像のretina対応がよくわからない

以下のコードを書いてみたが、適切に動きません。
<img
srcset="画像1 262w, 画像1_sp@2X.png 557w” 
sizes="(max-width: 750px) 100%, 100%”  (親要素に幅指定済みのため100%)
src="画像1” 
alt="説明”>

##作業環境
MacBook Air2014

デザインカンプからのスマホ時retina対応コーディングの考え方・方法を教えてください

### 前提・実現したいこと

お世話になります。

親要素からはみ出した子要素をドラッグで横移動をし、はみ出ている部分を任意で見れるようにしたいです。
また、上下の移動は出来ないとし、横移動は左右とも親要素からはみ出した分だけ可能でそれ以上は横移動できないように制御したいと思います。

・親要素は画面幅いっぱいになっています。
・レスポンシブサイトです。

### 該当のソースコード

```HTML
<div class="main-area">
	<div>
		<img src="../cmn_resort/img/top_main_pc.jpg" alt=""/>
	</div>
</div>
```

```CSS
.main-area {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 49.5% 0 0 0;
}

.main-area div {
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    width: 147%;
}

.main-area div img {
    width: 100%;
    height: auto;
}
```

```jQery
$(window).on('load', function() {

	var drag_flg = false;

	var pos1;
	var pos2;

	var posX1;
	var posY1;

	$('.main-area div').mousedown(function(evt1) {

		if(drag_flg == false) {

			pos1 = $('.main-area div').position();

			posX1 = evt1.clientX - pos1.left;
			posY1 = evt1.clientY - pos1.top;

			drag_flg = true;

		} else if(drag_flg == true) {

			drag_flg = false;
		}
	});

	$('.main-area div').mouseup(function() {

		drag_flg = false;
	});

	$(document).mousemove(function(evt2) {

		if(drag_flg == true) {

			$('.main-area div').css("left",(evt2.clientX - posX1));
			$('.main-area div').css("top",(evt2.clientY - posY1));
		}
	});


});
```

### 試したこと

あるサイトを参考に上記のjQeryを使用してみました。
子要素の移動は出来たのですが、上下左右どの方向にも移動が出来さらに親要素からはみ出した部分がすべて表示された後お同じ方向に移動が出来てしまいました。
また、ドラッグでの移動ではなくクリック後マウスカーソル移動で子要素の移動再度クリックで移動解除の動きでした。

### 想定される解決方法

ページ読み込み時やリサイズ時、子要素移動後に画面の幅とはみ出している子要素の幅を取得し、
子要素幅数値から画面幅数値を引いた残りの数値分のみ移動できるよう指定できれば良いのかなと考えていましたが具体的な方法が思いつきませんでしたので、ぜひ教示頂けまでしょうか。
また、上記方法がまったくの検討違いでしたらご指摘頂けますと幸いです。

ドラッグで要素を横移動したい

### 行いたいこと
CentOS7.3 にて任意のポートを開放させたいです。

### 環境
実機での環境構築を行う前に、
動作確認としてWindows10 Pro 上にVirtualBox を用いてCentOS7.3の環境を構築しました。

通信確認としてnmapを使用したい為、
Windows10 Pro 上にVirtualBox に、同じCentOS7.3の環境を構築しました。
ping にて双方の通信確認は取れています。

VirualBoxにて、それぞれ起動させた状態で確認を行っています。

### 行った事
以下のサイトを参考にし任意のポート（1955）の開放させようと試みました。
[リンク内容](https://eng-entrance.com/linux-centos-port)


```ここに言語を入力
受信側
[root@xxx ~]# firewall-cmd --zone=public --add-port=1955/tcp --permanent
[root@xxx ~]# firewall-cmd --reload
[root@xxx ~]# firewall-cmd --list-all
public (active)
  target: default
  icmp-block-inversion: no
  interfaces: enp0s3
  sources: 
  services: dhcpv6-client ssh
  ports: 1955/tcp
  protocols: 
  masquerade: no
  forward-ports: 
  sourceports: 
  icmp-blocks: 
  rich rules: 
```



```ここに言語を入力
namp送信側
[root@zzz ~]# nmap <xxxのIPアドレス>

Starting Nmap 6.40 ( http://nmap.org ) at 2019-07-02 20:13 JST
Nmap scan report for <xxxのIPアドレス>
Host is up (0.00061s latency).
Not shown: 999 filtered ports
PORT   STATE SERVICE
22/tcp open  ssh
MAC Address: 08:00:27:CD:86:CF (Cadmus Computer Systems)

Nmap done: 1 IP address (1 host up) scanned in 18.23 seconds

```
### 現状
送信側から受信側に送ったnmapの結果より、
sshのポートしか開放されいないようで、設定したポート（1955）が開放されていないようです。

本サイトの過去の質問および他のサイトを調べましたが、
初心者の為、どのような手順を行えば良いか分かりません。

申し訳ありませんが、アドバイスを頂けないでしょうか？

### 追記
1955にて、使用したいサービスは自作スクリプトです。
以下のコマンドよりサービスの起動を試みた状態での結果です。
```ここに言語を入力
サービスの有効化で行ったコマンド
[root@xxx ~]# vi /etc/systemd/system/myscript.service
	[Unit]
	Description = myscript daemon

	[Service]
	ExecStart = /home/user/myscript/myscript
	Restart = always
	Type = simple

	[Install]
	WantedBy = multi-user.target

[root@xxx ~]# systemctl enable myscript.service 
Created symlink from /etc/systemd/system/multi-user.target.wants/myscript.service to /etc/systemd/system/myscript.service.
[root@xxx ~]# systemctl start myscript.service 
[root@xxx ~]# systemctl list-unit-files --type=service | grep myscript
myscript.service                            enabled 
[root@xxx ~]# systemctl status myscript.service 
● myscript.service - myscript daemon
   Loaded: loaded (/etc/systemd/system/myscript.service; enabled; vendor preset: disabled)
   Active: active (running) since 火 2019-07-02 22:02:40 JST; 4s ago
 Main PID: 26277 (myscript)
   CGroup: /system.slice/myscript.service
           └─26277 /home/user/myscript/myscript

 7月 02 22:02:40 xxx systemd[1]: myscript.service holdoff time over, scheduli...t.
 7月 02 22:02:40 xxx systemd[1]: Started myscript daemon.
 7月 02 22:02:40 xxx systemd[1]: Starting myscript daemon...
Hint: Some lines were ellipsized, use -l to show in full.

```