常連

注目の的

社会貢献

回答者

ベストアンサー

拍手喝采

自己紹介

有名人

### 前提・実現したいこと

Html・CSSでグリッドレイアウトを用いてレスポンシブなタイルレイアウトを作りたいです。

### 発生している問題・エラーメッセージ

ウィンドウ幅が十分にある時は良いのですが、ウィンドウ幅を狭めたときに、タイル要素が中央揃えされず左寄せになってしまいます。

### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>COFFEE SHOP</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
  <div class="container">
    <div class="grid menu_card">
      <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー">
        <p class="button">テキストテキスト</p>
        </a> </div>
      <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー">
        <p class="button">テキストテキスト</p>
        </a> </div>
      <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー">
        <p class="button">テキストテキスト</p>
        </a> </div>
      <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー">
        <p class="button">テキストテキスト</p>
        </a> </div>
      <div class="menu"> <a href="#"> <img src="https://placehold.jp/300x220.png" alt="メニュー">
        <p class="button">テキストテキスト</p>
        </a> </div>
    </div>
  </div>
</body>
</html>
```

```css
@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
}
img {
  vertical-align: bottom;
}
.container {
  max-width: 940px;
  margin: 0 auto;
}
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
}
/* menu */
.menu {
  width: 300px;
  margin-top: 20px;
}
.menu p {
  width: 300px;
  height: 80px;
  background: #874e4c;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu a {
  font-weight: bold;
  color: white;
}
```

### 試したこと

cssコードの`.grid`にあるように`justify-content: center;`で中央寄せにしてみたのですが、うまくいきません。

アドバイス等頂けると大変助かります。
よろしくお願いいたします。

CSSグリッドで中央揃えができません。

閲覧ありがとうございます。
javaで困っていることがあり、良ければご教示ください。
初心者ですがよろしくお願いします。

■やりたいこと
・javaで暗号・復号を実施したい(Cipherクラス)
・共通鍵暗号方式を利用
・暗号・復号時に使用する鍵はDBに保持したい


下の参考ソースのように、byteKeyとbyteIvに対して、
DBから取得してそのままの形で暗号化キーと初期化ベクトルのオブジェクト生成したいです。
自分で生成した鍵をそのまま表示やデバッグさせてみると

<例>
「[B@1c29ab2」
「[1, 2, 3, …]」※byte配列
このように表示されます。

■質問１
これをDB(SQLServer)に事前に登録しておいて、java側でselectして
byte配列として使う場合に、どのような値をDBに登録すればいいのでしょうか？
格納させるカラムの型もどうすればいいのかよくわからず困っています。

■質問２
さらに気にしているのが、
・DBに登録する時(初回のみ)
・DBからjavaで取得する時
これらのタイミングで値が変わらず、同じ値を利用できるか？
という点です・・・

■質問３
byte配列とバイナリは同じ意味ですか？
同じだった場合、カラムはバイナリ型にすればよいですか？
java側の変数定義はbyte[]で大丈夫ですか？


■参考　ソース一部
```java
byte[] byteKey = <DBから取得してセットしたい>;
byte[] byteIv = <DBから取得してセットしたい>;

// 暗号化キーと初期化ベクトルのオブジェクト生成
SecretKeySpec key = new SecretKeySpec(byteKey, "AES");
IvParameterSpec iv = new IvParameterSpec(byteIv);

以下略
```

質問が多くすみません。
非常に困っているので分かる内容のものだけでも何卒お願いします。

追記

書き忘れました。
最初、string変換してDB格納。DBから取得した際はbyte配列に変換する
ことを考えてましたが、無駄な処理を省きたかったので今回の質問とさせて頂きます。
よろしくお願いします。

【JAVA】byte配列の扱いについて

jQueryでフォームのselectからchangeで動作させたものをブラウザバックしても保持したい

以下の様なフォームで
質問1でセレクトから選ぶと、質問2に自動的に選択肢が入るようになっております。

質問1で
野球が選ばれた場合は変数A1から
サッカーが選ばれた場合は変数A2から
質問2のセレクトにセットされます。

ここまでは正常に動作するのですが、
次のページに遷移して、ブラウザバックしてくると
質問1の選択肢が解除されてしまう仕様になっています。

これはそのようにコードが書かれているので当然なのですが、
ブラウザバックしてきた場合に、changeは発動しないので、
仕方なく質問1を初期化しております。

これをブラウザバックしてきても、
質問1と質問2で選んだものが選択されているようにするには、どうしたら良いでしょうか？

どなたかご教授お願い致します。

#HTML
<form method="post" action="○○" name="form1">

<h1>1.好きなスポーツを指定してください。</h1>
<select name="sports" id="parent">
<option value="">選択して下さい</option>
<option value="A1">野球</option>
<option value="A2">サッカー</option>
</select>

<h1>2.好きなチームを指定してください。</h1>
※先に質問1を指定してください<br>
<select name="team" id="child">
<option value="">選択して下さい</option>
</select>

<input type="submit" value="送信">
</form>

#JS
<script>
jQuery(function($){
  var team = {
    A1:[
      '巨人',
      'ヤクルト',
      '広島',
      '横浜',
      '中日',
      '阪神',
    ],
    A2:[
      'ヴェルディ',
      'マリノス',
      'サンフレッチェ',
      'レッズ',
      'ベルマーレ',
    ],
  };

  var noValue = $('#child').html();

  //フォーム選択による動作
  $('#parent').on('change', function(){
    $('#child').html(noValue);
    var cat = $(this).val();

    if(cat){
      var item = team[cat];
      for(var i = 0; i < item.length; i++){
      option = '<option value="' + item[i] + '">' + item[i] + '</option>';
      $('#child').append(option);
      }
    }
  });

});


function init() {
  if ($('#parent option[selected=selected]').attr('selected')) {
    $('#parent').val($('#parent option[selected=selected]').val());
  }
  else {
    $('#parent option:first').prop('selected', 'selected');
  }
}

jQuery(function () {
    init();
    $(window).on('pageshow', init);
});
</script>

jQueryでフォームのselectからchangeで動作させたものをブラウザバックしても保持したい

OpenID Connectについて質問です。

現在、認証と認可について勉強中なのですが調べてもどうしてもわからないことがあります。
認可(OAuth)についてはわかったつもりですが、認証(OIDC)がよくわかりません。

以下2点についてご回答いただきたいです。


1.大雑把に言うとOAuthはアクセストークンを、OpenID ConnectはIDトークンを発行する仕様だと思うのですが、このIDトークンを発行すると何ができるようになるのでしょうか？
ID連携という言葉が出てきますが複数のクライアントにおいて同じIDを使えるという認識で良いのでしょうか？

2.OpenID Connectの認可サーバーはユーザーのリソース側(FaceBookなど)のクレデンシャル情報を持っているのでしょうか？

よろしくおねがいします。

OpenID Connect について

![イメージ説明](26bc19eb6a2ddc8f414a3e77811cc591.png)
上記画像のような見出しを作りたいです。

画像を使う以外で、交差するボーダーの枠をcssでどのように書いたらいいのかわかりません。

おわかりの方がいらっしゃいましたら、教えていただけないでしょうか。

よろしくお願いいたします。

見出しの枠のcssをどうかけばいいのか教えてください

### 前提・実現したいこと

eclipseのダークテーマについてです。
ウィンドウの幅？で文字が隠れた項目上にマウスを置いたときに、文字が見えるようにしたいです。
設定画面の画像を添付しましたが、メイン画面のアウトラインや、プロジェクト・エクスプローラーでも同様の現象が起きてます。

### 発生している問題・エラーメッセージ

添付した画像のように、白の背景に白文字で表示されて見えません。
使用している環境はEclipse 4.8（Photon）です

### 試したこと

ウィンドウ→設定→一般→外観をいろいろいじってみました。
※分かりませんでした

### 画像

発生時の様子![イメージ説明](bc2df5ae2146d6240724c8ab0fa0eaae.png)

eclipseのダークテーマについて

お世話になります。

facebookメッセンジャーのweb版やslackのweb版を見ていると、
画面遷移せずに、URLが変わります。

query(?data=hoge&foo=bar)やハッシュ（＃）等のURLを変更するのであれば、
画面の遷移は、おこなわれませんが、スラッシュを含むURLに変更すると、
サーバーサイド側に通信してしまうと思うのですが、これを回避する方法って
どうやってやるのでしょうか

SPAで、URL遷移してないように見える実装はどうやってやるのか？

DBに格納されたGMTの時刻文字列をJSTの時刻文字列に変換したいのですが、スマートなやり方を教えてほしいです。


```
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
Date jstDate = (Date)dbMap.get("sDateTime")
String sDate = df.format(jstDate) + "+0000";

DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssZ");
df2.setTimeZone(TimeZone.getDefault());

String time = df.format(df2.parse(sDate));
```
ちなみにDBは、MySQLです。