justify-contentが効かない

下記サイトで模写コーディング中、`justify-content`が効かなかったので色々調べて解決するまでの備忘録です。

https://code-step.com/profile-menu/

https://zero-plus.io/media/css-justify-content/
justify-contentが効かない原因についてこちらのサイトにまとめられていたので引用します。
“`
以下は justify-content が効かないおもな原因です。

①　display: flex; の指定を忘れている
②　子要素に margin: auto; を指定している
③　before・after を使用している
④ 子要素のテキストを中央寄せにしようとしている
“`
上記の原因に当てはまっていないか自分が書いたコードとにらめっこしてしても原因がわからない…

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

ディベロッパーツ

HTML×Djangoの字下げ（インデント）、改行について

# 1. HTMLやDjangoの字下げ、改行について

単一の言語（ここではHTML、CSSを言語と定義）だけでサイトを作ることはほとんどない。個人的には3つ、ないしは4つは使うと考えている。（もっと壮大なものを作るとなると更に。。。？）
それが集結するHTMLファイルはきちんと表示できるのはもちろん、書き方にも気を使いたい。私の中で字下げ、改行のモットーがあるのでそれを共有したい。

## HTML:タグはtabキーで入れ子の形に。
“`html:bad.html

いろいろな内容A

いろいろな内容B

“`

複数同じタグを使われた場合、関係性が見えにくい。字下げを行い見やすくしよう。

“`html:good.html

いろいろな内容A

いろいろな内容B

“`

## HTML:style属性は極力使わ

【完走賞ゲットだぜ！】CSSでダイブボールを作る！

## はじめに
みなさん初めまして。??

Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。

今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 **全員** に完走賞がおくられる企画を開催しています。? ?

Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。

この記事は、そのカレンダーの16記事目です。

16記事目は、 「**【完走賞ゲットだぜ！】CSSでダイブボールを作る！**」です。

ダイブボールは、釣りや波乗りなので出現したポケモンが捕まえやすくなるボールです。
そのため、タイプ等は関係なく、釣りで出現したミニリュウや波乗り中のズバットなどにも使えるボールです。

この記事では、CSSで作るダイブボールを紹介しようと思います。

## 完成形
完成形は**↓こちら**です。
影やアニメーションを用いて、球体を表現していま

WebexのAppを自作してみる！

この記事はシスコの有志による Cisco Systems Japan Advent Calendar 2022 （2枚目） の 16日目として投稿しています。

2017年版: https://qiita.com/advent-calendar/2017/cisco
2018年版: https://qiita.com/advent-calendar/2018/cisco
2019年版: https://qiita.com/advent-calendar/2019/cisco
2020年版: https://qiita.com/advent-calendar/2020/cisco
2020年版(2枚目): https://qiita.com/advent-calendar/2020/cisco2
2021年版: https://qiita.com/advent-calendar/2021/cisco
2021年版(2枚目): https://qiita.com/advent-calendar/2021/cisco2
2022年版(1,2枚目): https://qiita.com/a

[CSS Grid Layout] 左から順に要素を並べ、行落ちした要素も左から順に並べるリストの作り方

# つくるもの

* 同じ幅・高さを持った要素を左から順に横並びに配置する
* 配置するコンテナの横幅は可変（ウインドウ幅に応じて可変する）
* 横幅いっぱいまで配置したら、行落ちしてまた左から順に横並びに配置する
* リスト全体はその親要素の中央に配置する
* 要素の数は可変である


~~（クリスマスっぽくて綺麗ですね）~~

一覧画面などで、情報をカードUIに集約して並べていくものを想像していただくとわかりやすいかなと思います。

こういった場合、 `flex` を使うか `grid`　を使うかで悩むかもしれません。

## flexで作ってみる
私は `flex` に慣れているので、 `flex` で作ろうとしました。
しかし、幅や要素数が可変であるということに、 `flex` だと中央配置や

Webアプリを開発したくて勉強したけど次にやるべきことがわからない

#### Webアプリを開発したくて・・・
Webアプリを開発したいと思い、progateに登録した。
HTMLとCSSに始まり、JavaScriptは初心者向けのおすすめ本を1冊買った。
最初は全くわからないし、エラーが全然解消できなくて辛かった。
勉強している中でCodePenを知り、写経しながらであれば簡単なToDoアプリを作ることができた。

勉強してしばらくすると、なんとなく自分自身で作りたいアプリみたいなイメージができてきた。
それは日記アプリだ。
過去に使った日記アプリはいろんな人が使いやすいアプリではあるが、私自身が使いやすいアプリではなかった。

#### 問題はその次・・・
ここで手が止まってしまった。
HTML、CSS、JavaScriptを勉強したが、次に何をすればいいのかわからない。
progateの画面で作成したようにHTMLやCSSを作成してコードを書いていけばいいんだろうけど
それはどこでやるんだろうか？
PCのCドライブにフォルダ作成したとして、HTMLやCSS、JavaScriptのファイルはどう置けばいいのかさっぱりである

#### プログラ

Rails 一覧画面でコメント機能

Railsを使って、●イッターみたく一覧画面でコメントしてみたいなーと
思ったので作りました！！

# 前提
:::note warn
以下の項目を既に実施している前提として話を進めます！
:::
1. 投稿機能の実装
1. deviseを用いたユーザー機能の実装

# Viewの編集
HTML・Rails側で主に実施することは以下の通りです。
1. 投稿毎にコメントを表示する
1. コメントの表示・非表示用のボタンを作る
1. 各投稿を見分けるために、投稿のIDをつけておく
1. コメントのフォームを作る
1. 投稿毎にコメントできるように、各フォームでインスタンスを生成

“`diff_erb:index.html.erb

Posts

<% @posts.each do |post| %>

<%= image_tag post.image_url, class: '

Reactでhtml

# Qiita 記事投稿練習

“`diff_javascript
this.name={Lessonn}
“`

`puts ‘Qiita’` と書くことでインライン表示することも可能です。

“ `バッククオート` “ や “` “2連続バッククオート“ “` も記述できます。

`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`
# これはH1タグです
## これはH2タグです
###### これはH6タグです

_ か * で囲むとHTMLのemタグになります。Qiitaでは *italic type* になります。
__ か ** で囲むとHTMLのstrongタグになります。Qiitaでは **太字** になります。

打ち消し線を使うには ~~ で囲みます。 ~~打ち消し~~

:::note info
インフォメーション
infoは省略可能です。
:::

:::note warn
警告
○○に注意してください。
:::

【Laravel】ユーザーが選択した値を保持するoptionタグ生成（編集画面）

## ユーザーが選択した値を保持するoptionタグの生成
今回は都道府県をユーザーが登録し、
編集画面では登録画面で選択してDBに登録した値を保持した状態で編集画面を出したい。

事前に`config`配下にファイルを作っておいたので
これを使ってプルダウンを作っていきます。

“`config/pulldown.php
[
‘選択してください’ => ‘選択してください’,
‘1’ => ‘北海道’,
‘2’ => ‘青森県’,
‘3’ => ‘岩手県’,
‘4’ => ‘宮城県’,
‘5’ => ‘秋田県’,
‘6’ => ‘山形県’,
‘7’ => ‘福島県’,
‘8’ => ‘茨城県’,
‘9’ => ‘栃木県’,
’10’ => ‘群馬県’,
’11’ => ‘埼玉県’,
’12’ => ‘千葉県’,

Video.js完全マニュアル part1 〜Video.jsを使う理由〜

# はじめに
私は普段動画プレイヤー関連の実装することが多く、その中でもVideo.jsはよく利用しています。
しかしVideo.jsの公式ドキュメントの言語は英語のみです。更にVideo.jsに関する日本語の情報は非常に少なく、情報を収集するのが困難です。
なので今一度Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら読み解き、日本語化しながら使い方を学んでいこうと思います。

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人

# この記事の解説する内容
[Video.jsトップページ](https://videojs.com/)

この記事ではVideo.js Guidesを読む前に、Video.jsとは何かをまとめていきます。Video.js Guidesを読み始めるのは次章からなので、Video.jsについて理解のある方は飛ばしてください。

# Video.jsとは
## 何故Video.j

JavaScriptで気象庁から1週間の天気予報を取得してwebサイトに表示する

# はじめに
[気象庁の天気予報](https://www.jma.go.jp/bosai/forecast/)からjsonを取得して天気予報を表示します
外部モジュールやログイン必須のAPIは使いません。

今回は2パターン用意したのでどちらも紹介します。
– タイプ1(横長、テキスト有り) `840x120px`

See the Pen Webを支える技術のまとめ(3部8章)

# はじめに
Webを支える技術のまとめ(3部)の続きとなります．
今回のWebを支える技術のまとめ(3部8章)を初めて読む方は，
前回のWebを支える技術のまとめ(3部)から読むことをお勧めします．

https://qiita.com/tsubotsub/items/cabcaacfa2147a072414

(「Webを支える技術」のリンクは最後の参考文献に記載しています．)

# ステータスコード
レスポンスの状態を表すコード．
HTTPはリクエスト/レスポンス型のプロトコルであり，全てのリクエストにはレスポンスが返るため，ステータスコードはクライアントの挙動を左右する重大な役割がある．

## ステータスコードの分類と意味
HTTP1.1のステータスコードはRFC2616の6.1.1節で定義．
ステータスコードは3桁の数字であり，先頭の数字によって次の5つに分類されている．

– 1xx : 処理中
– 処理が継続していることを表す．
– クライアントはそのままリクエストを継続するか，サーバの指示に従ってプロトコルをアップデートして再送信する．
– 2xx :

Swiperアクセシビリティ改善のススメ

**『un-T factory! XA Advent Calendar 2022』 15日目**です。
どうぞよろしくお願いします。

## はじめに
カルーセルを実装する際、アクセシビリティの設定はしていますか？
Swiperでは、デフォルトでaria属性・role属性がスライドやprev・nextボタン、ページネーションに付与されます。
ですが、それらは全て英語で設定されています。
日本人向けのサイトを制作するのであれば日本語で設定してあげるほうが親切ですよね。
意外と簡単に実装できますので、まだやったことがないという方はぜひ取り組んでみてください。

Swiperはv8.4.5を使用します。

## アクセシビリティに関するオプション
Swiperにはアクセシビリティに関する[オプション](https://swiperjs.com/swiper-api#accessibility-a11y)が用意されています。
### a11y
| オプション名 | 初期値 | 説明 |
|:———- |:———–: |:———— |
|containe

【完走賞ゲットだぜ！】CSSでネットボールを作る！

## はじめに
みなさん初めまして。??

Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。

今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 **全員** に完走賞がおくられる企画を開催しています。? ?

Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。

この記事は、そのカレンダーの15記事目です。

15記事目は、 「**【完走賞ゲットだぜ！】CSSでネットボールを作る！**」です。

ネットボールは、水タイプと虫タイプのポケモンが捕まえやすくなるボールです。
そのため、コイキングを釣り上げた時や、タイプのポケモンに出会った時に使えるボールです。

この記事では、CSSで作るネットボールを紹介しようと思います。

## 完成形
完成形は**↓こちら**です。
影やアニメーションを用いて、球体を表現しています。

〇✕ゲーム

# はじめに

今回は**HTML**、**JS**、**CSS**だけで〇✕ゲームが作れるので簡単に紹介したいと思います。

# 〇✕ゲームって？
ほとんどの人が一度はやったことがあるとは思いますが一応説明すると、

「３×３のマス目」があって〇と✕を交互に置いていって縦、横、斜めのどれかで先に３つ揃った方の勝ちというルールです。

簡単ですね。　

# 完成形
「**〇の番！**」と表示されていて、クリックしたマス目の場所が〇になります。

# HTMLコード

# cssコード
![css

【技術書まとめ】HTML&CSS コーディング・プラクティスブック 4 実践シリーズ

引き続き現在のCSSを整理するために本書を手に取った。

## 作成したデモサイト
https://extraordinary-croquembouche-992086.netlify.app/index.html

## PCサイズのときだけ改行する

“`css
h1 br {
display: none;
}

@media (min-width: 768px) {
h1 br {
display: inline;
}
}
“`

## 画像の基本設定と高さ固定のレスポンシブ対応

“`css
figure {
margin: 0;
}

img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
“`

## aタグをinline-blockにした基本のボタン

“`css
.btn {
display: inline-block;
margin-top: 40px;
padding: 10px 40px;
border-radius: 4px;

Canvas2D ４点グラデーショングリッドの実装実験

この記事は [Web グラフィックス Advent Calendar 2022](https://qiita.com/advent-calendar/2022/webgraphics) の14日目の記事です。

# 自作お絵かきツールで線をはみ出さないでブラシ塗りがしたい

個人的に今年のアドベントカレンダーでは自作ツールでブラシ塗りがしたいということで色々やっていて、[前回](https://qiita.com/warotarock/items/29169ac125c95ee0783f)は４点グラデーションを実装してみました。

今回はそれをグリッド状に並べ、ブラシ塗りをしてみたいと思います。

# 描画処理の概要

色情報を持った点をグリッド状に並べ、点４つごとに４点グラデーションを描画します。
上の図はグリッドのセルを極端に大きくしています。

[Java Script] ボタンをクリックするとdivを追加・削除する

# Code
“`html

method

condition

value

小道具：合成用の濁点(U+3099)と半濁点(U+309A)を排除する

macOS の標準アプリで日本語テキストを弄っていると何故か合成用の濁点(U+3099)や半濁点(U+309A)が入り込んできます。合成用の濁点や半濁点で文字化けする相手向けに変換が必要になったので作ってみました。

# HTML+JavaScript版

濁点(U+3099)と半濁点(U+309A)は解析部分（出力と同じ文字列）で色を付けています。


動作確認は Google Chrome バージョン: 108.0.5359.98 (macOS版)で行っています。

“`html:dakuten.html