Font Awesome 6をCDNで利用する

# はじめに
HTML/CSSでアイコンを使用したかったのでFont Awesomeを初めて使用しました。
バージョン違いで戸惑ったので、CDNを利用する方法を備忘録として残しておきます。

# Font AwesomeのCDN
以下のコードをHTMLファイルの``内に記載する。(Ver.6.2.0)
“`html: “`

Font Awesomeの現在のバージョンは、公式サイト内(下記画像参照)で確認できる。

# 基本的なアイコンの利用方法
公式サイトから使いたいアイコンのコードをコピーする。
https://font

模写学習 殴り書き日誌③（Codestep/英会話スクール）

コーディング学習サイト[Codestep](https://code-step.com/)を使用した模写学習での気づきを解説仕様でまとめた記事です。

完全に自分の振り返り用なので悪しからず、、、

# 【HTML/CSS コーディング練習】中級編：ランディングページ／CSSアニメーション

※元サイトは[こちら](https://code-step.com/lp-menu/)

## 学び①：スライドショー

**＜完成見本＞**
スライドショーで画像が切り替わる。

**＜実装方法＞**
まずは仕組みから整理しておきます。

・スライドショー用の画像３枚を重ねて配置
・画像３枚を透明（非表示）にしておく
・以下を実行するアニメーションを組む
　(1)１枚目の画像の表示
　(2)１枚目の画像を非表示にし、２枚目を表示
　(3)２枚目の

divとspanの違いとは？

# “`“`とは
「SPAN」とは、単体では特に意味を持たないタグですが、“`～“`で囲った部分をインライン要素としてグループ化することができるタグです。
グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。

同じ意味を持つタグとして

がありますが、“`

はブロックレベル要素としてグループ化を行います“`ので、“`見出しや段落、リストなどとしてみなされ前後に改行“`が入ります。
“`はインライン要素で文章の一部として利用されます“`ので前後に改行は入りません。

## 出典
https://html-coding.co.jp/annex/dictionary/html/span/

キャッシュ対策：クエリパラメータ

取得するパスやURLにクエリを追加することで、Webサイトの更新時にキャッシュがかからないようにできる。

# 記述
### 例）通常の記述
“`

“`
### 例）クエリパラメータ追加後の記述
“`

“`
“yymmdd“形式のクエリパラメータを追加することで、その指定した日以降のファイルが自動的に取得される。
他にもクエリの種類はあるっぽいが、基本的には“yymmdd“形式で十分そう。
※日付を記載することで、

ブラウザ内にPDFを並べて表示

リモートで画面共有しながら説明する際に複数のPDFを並べる必要がありました。

ブラウザ内に表示させたかったので HTML を書いてみました。

# スプリッター

サイズ調整したかったので既存のライブラリを使用しました。

* https://split.js.org/

今回は CDN 経由で利用します。

* https://cdnjs.com/libraries/split.js

# HTML

必要最低限の内容を示します。

“`html

サイトのコーディング中にはまったところ

## ハマリスト
### 1. タイトルにマーカーを引こうとした

上記のようなタイトルの下半分にtext-decoration: underline;でマーカーを引こうとして詰まった。

“`
.title–underline {
text-decoration: underline;
text-decoration-color: yellow;
text-decoration-thickness: 15px;
text-underline-offset: -5px;
}
“`

safariのpcで確認すると、マーカーがテキストの前に出てきてしまっていた。
text-underline-offsetにマイナスの値を指定しているため、前後関係が怪しくなってしまったのではないかという仮説。

![image.

FLOCSSで初めてコーディングした際の流れ等

## 始めに
FLOCSSの形式でサイトの製作を行なった。
書き方で悩んだところや、導入するまでに行なったことを記載する

## FLOCSSの学習参考
– [【Dart Sass対応】LPをつくって学ぶSass×FLOCSS](https://zenn.dev/yurukei20/books/10e7322a762178)
– [CSS設計手法「FLOCSS」を適用して出てきた疑問を自分なりに考えて進めた結果と得た知見と失敗と](https://qiita.com/SYM_simu/items/bda9a2a527d0b1dcfb01#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
– [[CSS設計] 私のためのFLOCSSまとめ](https://qiita.com/super-mana-chan/items/644c6827be954c8db2c0)
– [FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話](https://webnaut.jp/technology/20170407-2421/)
– [Sassファイルの管理方法。

Chart.js3.9.1におけるパラメータの設定[JavaScript]

こんにちは、[Kuni](https://qiita.com/kuniengineer)です。先日[ポートフォリオサイト](https://kuniportfolio.web.app/)でChart.jsを利用した際に詰まり、公式ドキュメントと戦う羽目になったので記録します。(詰まったのは、ver3.9.1に対する記事が少ないand以前のバージョンから書き方が大きく変わったためと思われます。。)

# グラフのラベル表示を消す
ver3.9.1ではグラフ上部に出るラベル表示のオンオフは下記のパラメータを変更することで出来るようです。

サンプルコード

“`rb
options: {
plugins: {
legend: {
display: false,
labels: {
color: ‘rgb(255, 99, 132)’,
},
},
}
“`

display:trueで表示、

Webページにツールチップを出すには？

# Webページにツールチップを出すには？
1. ツールチップ要素に、以下のスタイルをあてておく。
“`
position: absolute;
box-shadow: 3px 3px gray;
z-index: 適当な大きな数;
“`
1. 一旦、適当な位置指定で配置
1. getBoundingClientRectで配置位置を得る
1. 本当に配置したい位置との差分を計算して、位置指定して配置

# コード例

javascript1・2終了

大学でC言語を習っているため、文法は違うものの考え方は一緒なのでサクサク進むことができる。
progateは非常によくできているサービスなので普通に進めていればエラーになることはなく、正直つまらないので早く自分で構想したものをコーディングしたい。

pythonの自動化も興味があるし、kaggleに出場してスコアを競い合いたい欲もある。機械学習や深層学習も勉強したい。やりたいことを絞って取り組んでいきたい。

人事のおじさんプログラミングを学ぶ Day15「小数点第〇位で切り捨てる」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
小数点を任意の位取りで切り捨ててみた。
細かな記述内容はさておき、考え方を大事に学習を進めます。

displayプロパティの違い(初心者向け）

# はじめに
コードを書いている中で、width/height/margin/paddingが効いてくれなかったり、思うように配置できなくて苦戦しているので、一度整理しておきたいと思います。

# そもそもdisplyaプロパティって？
* プロパティ・・・
セレクター(スタイルを適用する要素)で指定した要素に適用するスタイルの種類のこと
* display・・・
要素ボックスの種類を指定

“`CSS:例
p{　/*セレクター*/
color:”red”　/*プロパティ:値*/
}
“`

# ①並び方
“`HTML:例

• block
• block
• block

• inline-block
• inline-block
• inline-block

テーブルの動的フィルタ機能を雑に実装しよう extablefilter (jQueryプラグイン)

# はじめに

https://www.cyokodog.net/blog/extablefilter/

https://github.com/cyokodog/jquery.ex-table-filter

extablefilterは、テーブルのフィルタリングを画面実装したいときに便利なjqueryプラグインです。
「input入力すると、テーブルが動的に絞り込みされる」実装を実現します。
あまりにもよくお世話になるので備忘録を兼ねて紹介させてください。
MITライセンスです。

# 使い方

## シンプルな例

1. jquery読み込み
1. extablefilterを読み込み
1. inputやtableを含むHTMLを書く
1. input formとtableに対してexTableFilterを実行

という順番になります。以下が例です。

“`HTML


“`

# 改行　br要素
改行したいところに`
`をつけることで改行できる
“`html

html

css

“`
[br要素：MDNリンク]https://developer.mozilla.org/ja/docs/Web/HTML/Element/br

# 区切り　hr要素
区切り線をつけたい部分に`

---

`で区切りをつけることができる
“`html

html

---

css

“`
![スクリーンショット 2022-10-13 3.42.52.png](htt

【再現度高】初学者がはまりがちなfirebaseの罠を簡単なTODOアプリで攻略

Firebaseの罠多すぎ問題

学習のため簡単なメモアプリをfirebase/firestoreを使って作成したものの、罠にはまり数日費やしたので初学者（僕）がはまりやすいところについて解説します。

罠一覧

• そもそもver違いの情報が入り乱れており、他者の情報をもとにスクラッチでコードを書くと動かない
• 最小構成（JS+html）の情報が少なく、Vueやreact等が必要になり、フロントで躓きがち
• 意味も分からず、npm initしがち。jsonファイルをつい作ってしまう
• 公式が初学者には理解しづらく、SDKの案内でnpm i firebase しがち
• 上記とともに、export、require、importしようとしがち
• publicフォルダがよくわからず、アプリがデプロイできない
• htmlの名前をindex.htmlにしていない
• 公式の情報は今回はfirebaseのconfig設定くらいしか使いません。下

Chromeデベロッパツールがないブラウザでconsole.logを確認する方法

ブラウザのJavascriptでconsole.logでデバッグ出力しているけれども、Chromeデベロッパツールを使えない場合があります。たとえば、

* AndroidやiPhoneのブラウザ上で動作させている場合
* 埋め込みブラウザ(WebViewを使ったCordovaやLIFFなど)上で動作させている場合
* 別の人や別の場所のブラウザで動作させている場合

など

その場合に、なんとかconsole.logのデバッグ出力を確認する方法をいくつか挙げておきます。

* まずは普通にChromeデベロッパツールが使える場合(【方法①】)
　　F12キーを押して表示されるChromeデベロッパツールでデバッグします。
　　これができれば何も問題ないですが、スマホ上では無理。
* VConsoleを使う場合(【方法②】)
　　ブラウザのWebページ内で、コンソール出力をダイアログ表示します。(お手軽)
* AndroidのUSB/ワイヤレス デバッグを使う場合(【方法③】)
　　Androidスマホであれば、USB/ワイヤレス デバッグを使うことで、リモートデバッグできます。(一度

Progate HTML&CSS中級編終わり

2h未満程度で終わった

初級編の続きをしている感じであった。

btn img の概念等よく作られているサイトだとしみじみ感じた。

しかし実際に１からプログラムを書けって言われると、これ終わらせただけでは未だうまくコーディング出来ないんだろうなってのが正直なところ。

次はjavascript！早くアニメーションで動的サイトを作りたい。（簡単なボタンは中級編で作ったが）

コードを変更したのにブラウザに反映されない場合の対処法【Chrome】

# キャッシュが問題かも
## 方法１
Ctrl + Shift + R　を押してハードリロードしてみてください。
キャッシュがクリアされます。
## 方法２
F12またはCtrl Shift Iでデペロッパーツールを開き、アドレスバー横の再読み込みのボタンを右クリック、キャッシュの消去とハード再読み込みを実行してください。
# 直らない場合
設定→プライバシーとセキュリティ→閲覧履歴データの削除
「キャッシュされた画像とファイル」だけを選択し、全期間で削除してみてください。

Visual Studio Codeにてhtml雛形を一瞬で作成する方法

# コピペせずにHTMLの雛形を作成する
htmlを書き始める際、雛形ファイルを一々開いてコピペしないといけないのか？と思っていました。
しかし、Visual Studio Codeであれば、文頭に”！”を入力してenterを押せば一瞬で雛形が作成されます。
これから
こうなる。便利。

# 補足
他のテキストエディタ、Atomでは同様の方法で作成できませんでした。
しかし、”html”と記述しenter