今さら聞けないHTML　2021年12月05日

「教科書では教えてくれないHTML&CSS」読書録

HTMLやCSSを学んで理解は出来たが、どう書けば良いかが分からなかったので参考になりました。
忘れないように気になった部分の要約を残しておきます。

##デザインを分割し、小さなパーツに分解する
デザイン画像を元に大まかに次の2点で分割する。

+ 横幅が変わるところ
+ 背景の塗りつぶし方法が変わるところ

その際、分割したパーツごとのHTML構造は二重構造にする。

“`

“`
###二重構造となったパーツに対して適用するスタイル
`

`に適用するスタイル

+ パーツの幅
+ パーツをビューポートの中央に配置するスタイル
+ 上下左右の空きスペースを調整するスタイル

`

`に適用するスタイル

+ 背景色や背景画像

###分割されたパーツを内容やレイアウトに合わせて更に分割する
更に単純なパーツごとに分けて、HTML

【Themeleaf初心者向け】formにおけるth:fieldの挙動まとめ

##はじめに

Spring+Thymeleafで開発を行っていて、
formの作成の際、
``
のように、複数Thymeleafタグを使っています。
これって全部書く意味があるのか？必要ないものはないのか？
と思ったので、自分で検証してみた結果を以下にまとめます。
## 概要
inputのtypeによって、th:fieldの挙動が違うので、記載すべきものが違います。

– text,number,range
th:fieldは、「id」「name」「value」の役割を果たします。
th:fieldとth:valueが重複している時、th:objectで指定したformの値がある場合は、th:fieldが優先されます。

– textarea
th:fieldは、「id」「name」「text」の役割を果たします。
th:fieldとth:textが重複している時、th:objectで指定したformの値がある場合は、th:fieldが優先されます。
– radio,c

EJS de Storybook入門

おはようございます、こんにちは、こんばんわ。

今回はEJSでの`Storybook`導入と`Storybook`の簡単な使い方を書きます。
`Storybook`はUIコンポーネントとページを分離して構築するためのオープンソースツールです。
[Storybook公式サイト](https://storybook.js.org/)

##前置き
「Storybook 入門」とかで調べると`React`やら`Nuxt`やらへの導入を前提とした記事が溢れています。
コンポーネント化を行うならばもちろんそれらのフレームワークを使うのが1番ですが、`HTML`のテンプレートエンジンもフレームワークほどではないとはいえ、できない事もないです。
また、同時に2つのことを学ぶより1つのことを学ぶ方が楽だろうと思い、弊社で使われている「`EJS`」への導入を試みました。
`Storybook`はアドオンが強力なので、ぜひ最後まで読んで実践してみてください。

##ファイル構成
“`html:ファイル構成
root/
　 ├ dest/
　 ├ src/

RTAイベント向け簡易背景システムをつくったよ

#今回のレギュレーション
– この記事で得られる知識
– そもそもRTAとは？
– 作ったものは？
– なぜ今回の形になったのか？
– 当日の運営について
– 完走した感想

#この記事で得られる知識
– サーバがない中で構築する動的背景の作成
– NodeCGでやろう！と思える心
– レガシーできたないソースは読みづらいという見本。

#そもそもRTAとは？
RTAとはReal Time Attackの略なのですが、
簡単に言うとゲームの早解きのことです。
どんな手を使ってもいいから何人かの人たちが自分の得意なゲームをいかに早くクリアするかを突き詰めるといったもので
世界では[Games Done Quick](https://gamesdonequick.com/)というアメリカで行われるイベントが一番有名だったりします。
日本でも[RTA in Japan](https://rtain.jp/)というイベントが年に２回開かれており、
今年も12月26日から6日間、24時間開催される予定となっています。
https://nlab.itmedia.co.jp/nl/articles/

要素の内容をPicture in Pictureで表示する。

この記事は、[ニフティグループ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nifty) 5日目の記事です。

昨日は @hajimete さんの「[Slackに追加されたカスタム絵文字を通知するBOTを作った](https://qiita.com/hajimete/items/226759d0abd5350fabde)」でした。
毎日のように絵文字が追加されているとこういうBOTもありがたいですね！

# はじめに
Picture in Picture(PiP)は、[<video>要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video)を常に最前面に表示されるウィンドウ上に表示できる機能です。
本記事では、[<canvas>要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas)に描画された内容をPicture in Pictureで表

【CSS3】CSSカウンター(counter関数)

# 概要
「セクション1..2..3..」などの連番を実装したい場合に有効的である、カウンターをCSSで実現する方法を記載する。

# この記事で理解できること
* CSSでのカウンター作成方法
* CSSのcounter関数の使用方法
* counter関数の関連プロパティ、関連要素

# 必要なCSSプロパティ
| プロパティ名 | 内容 | 書式 |
|:———–|:————|:————|
| counter-reset | カウンター(値を管理する変数)の初期値を設定する
※このプロパティを指定したタグやclassが出てくるたびに値が初期化される | counter-reset: {値を管理したい変数名} {初期値}; |
| counter-increment | 値の増加値を設定 | counter-increment: {変数名} {増加数} |
| content| 表示形式を指定(counter関数はこのプロパティで使用) | {付加値(前)} content: counter({変数名}) {付加値(後)} |
>

Canvas APIで「ポケモン」を描いてみる

### Canvas API
HTMLのCanvasタグを用いて、Javascriptでお絵かきができます。
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API

canvasのDOM要素に対して、色を足したり、線を足すことで、絵として表現できます。

“`html

“`
単純な四角形を描画するだけであれば、mozillaの公式に紹介があるのですが、
もう少し込み入った、やや複雑な絵を描きたいと思ったときに、サンプルがまだまだ少ない感じました。
この記事がその一つになれれば幸いです。

### Canvas で絵を描く
実際にポケモンのコダックをCanvas APIを使って描いてみました。
今回はReact上で表現しています。
![スクリーンショット 2021-12-04 18.26.52.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435918/70f36d15-221

iPhoneからでもクロネコヤマトの配達状況をAPIで取得したいんじゃ！~SwiftでHTMLを解析~

# 初めに
M1 ProのMacBook Proを買いました。性能には120%の満足なのですが、デザインだけはどうも受け入れ難いです、どうもこんにちはTOSHです。
でもなんやかんやPS5とは違って、MacBookは抽選販売にならなかったので、よかったです?

さて、近年はコロナの影響もあり、ネットで物を買うことが多くなってきているのではないでしょうか？
そうなってくると、いつ配達されるのかは気になりますよね？そこで、クロネコヤマトの配達状況のWebページなんかを利用すると思います。しかし、RestAPIのような形式で使えるものが欲しいですよね？

では、そういったAPIはないのでしょうか？
[業者用のAPI](https://business.kuronekoyamato.co.jp/service/lineup/business_members/api/ctoc/)は用意されているようですが、こちらに関しては法人としての登録が必要だったり使用が難しいです。
また、本家クロネコヤマトのアプリが使用してるAPIはどうでしょう？
クロネコヤマトのセキュリティに関することになってしまうので

[ネタ] divアートプログラミング

HTMLのdivだけで絵？を描くというネタプログラミングの記事です。
数行のHTMLとJSだけで出来るので、実際に試してみると面白いかも？

サンプル

大量のdivを用意して1個1個のdivの背景色を変えて表現しています。

一般的に、こういうのはWebGLであったり、シェーダーといわれる分野かとは思いますが
あえてdivを駆使ししてやってみるのもそれはそれで面白いかなと思った次第です。

## 概要


一見するとただの黒い四角ですが、1辺が10pxのdivを縦横に10個ずつ並べています。
divの

「おすすめ記事一覧を表示する」を実現する実装方法をあれこれ考えてみた

[WordPressアドベントカレンダー](https://qiita.com/advent-calendar/2021/wordpress)4日目の投稿です。

## これはなに？
「おすすめ記事一覧をTOPに表示する」という、よくある機能をいろんな方法で実装できないかと検討してみた記事になります。
最近WordPressサイトのカスタマイズでおすすめ記事を表示することがあったのですが、どう実装しようかとあれこれ考えたプロセスが楽しかったので、記事にまとめてみました。
これを読んでいる皆さんも自分ならどう実装するかな？と考えながら読んでいいただけたら幸いです。

## 実装するもの
このようなおすすめ記事一覧を実装することとしましょう。（デザインは適当に組んだものです。）
以下の条件を満たしていたら、どんな実装方法でもOKです。

– おすすめ記事が３つ
– TOPページに表示する
– 表示するコンテンツはサムネイル、カテゴリ、タイトル、公開日

![スクリーンショット 2021-12-03 22.11.21.png](https://qiita-image-store.s3.ap

A-Frameを使ってクリスマスっぽいことをする

##はじめに

今回、初めてのアドベントカレンダーに参加します。

ということで
今回は学び始めたA-Frameを使って
クリスマスっぽいことをしようと思います！

##方法

[MDSドキュメント](https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)を使おうと思いましたが、
HTMLがうまく実装できず

下記サイトを参考にしました！

https://aframe.io/

画面左「Hello WebVR」＞画面右上「VIEW SOURCE」＞(少し時間がかかります)画面が表示されたら「view source」を押すと、
ソースコードを取得できます。

■物体の形

https://qiita.com/matsukatsu/items/b1540dbf36da3d58dc80

■背景

https://qiita.com/matsukatsu/items/adec590eddad5510c196

■色の選択

ht

マークダウン=HTMLだと思っていた

##今まで#とかではなくて全部タグで書いていた
こちらの記事は今年のはじめに書いた記事なのですが、マークダウンというものを知らずに、「ああ、HTMLを書くのか」とか思いながら記事を書いていました。

https://qiita.com/Teba_eleven/items/a962cd21bce13aceee03

なので、Qiitaで記事書くのめんどくさいなぁなんて思っていたのですが、最近Zennでマークダウンのチュートリアルを見た時に、マークダウン記法便利やなぁとか思ってZennで書いていたのですが、これってQiitaでもできるのではと気づいたのがここ数日の話です。
connpassのページもHTMLタグで書いていたのですが、こちらもマークダウンでいけると気づいた時は発狂しかけました…。

##マークダウン、めっちゃ便利よね…
HTMLだと文字

ローカルで管理する自分だけのサイト管理アプリ『リンクリスト』作りました

## はじめに

インターネット通信を経由しない、ローカル環境で管理できるサイト管理アプリ『**リンクリスト**』を作りました。
インストール不要、Webブラウザで開くだけで利用できます。
Webサーバーも不要です。
サイトのリンクを管理するアプリやサービスはありますが、自分好みのものが欲しくなり作りました。

## つくったもの

サイト管理アプリ『**リンクリスト**』のデモ動画です。検索や絞り込みで表示するサイト情報を絞り込みしている動画になります。

## ソースコード

ソースコードを

UXデザイナーとして4ヶ月で学んだこと

初めまして、NSSOLにてUXデザイナーをしている1年目の濱岡と申します。
今回縁あってQiita Advent Calendarに投稿させて頂くことになりました。
本記事の要件は以下になります。

######目的
新卒配属からUXデザイナーとして、約4ヶ月で取り組んできたことと所感の共有
######想定している読者
Qiita Advent Calendarの参加メンバー、Qiitaの閲覧者。あわよくばUXデザイナー/NSSOL/サービスデザイン部に興味がある就活生も。
######読者の方々に伝えたいこと
UXデザイナーがどんなことをしているのかを理解し、面白い！と思ってもらう。また、自分がこれまでの取り組みから得た学びを実践してもらう。

#目次
[1.自己紹介](#1-自己紹介)
[2.11月までにやったこと](#2-11月までにやったこと)
[3.これまでに得た学び](#3-これまでに得た学び)
[4.おわりに](#4-おわりに)

それでは記事の内容に入ります。
#1. 自己紹介
まずお主誰じゃ、というツッコミが入るかと思うのでサラッと自己紹介します。自分は現在NSSO

HTML、CSS、JavaScriptで電卓をつくりました。

## 作ったアプリ
https://xenodochial-clarke-ebb79c.netlify.app/
四則演算だけできるシンプルな電卓です。できるだけWindows10の標準電卓と同じ動作になるように作りました。
今回は外部ライブラリとして、fittyとbig.jsを使いました。

https://github.com/rikschennink/fitty

https://github.com/MikeMcl/big.js/

## 今回学んだこと
### 数字が枠からはみ出る問題
電卓のディスプレイ部分ですが、入力する数字の桁が大きすぎると枠からはみ出てしまいます。
[1]を連打しまくる…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.co

！！初心者必見！！今だからわかるプログラミングをやり始めて知った専門用語集

#はじめに

初めまして！私は今年の春からプログラミングを始めた納豆と申します！！自分がプログラミングを始めた際と比べて自分の中のプログラミング用語集が増えてきたので今回はこれからプログラミングを始める方向けに、今後聞く機会が増えるであろう単語集を紹介したいと思います。この記事が少しでも読んでくださった方の役に立てば幸いです。

##1．github
githubを使うことによって、エンジニアが書いたコードをローカルではなく、WEB上で保存することができます。また、もし新しいコードを書いたけど、前に書いたコードに戻したいって思ったときに、githubを使えば、過去のコードをみれたり、また、チームで開発する際に使えたりします。
##2．デプロイ
デプロイとは、簡単に言うと、つくったWEBアプリやWEBサイトをネットに公開することです。
##3.ソースコード
コンピュータのプログラムやアプリケーションソフトウェアを動作させるための文字列のことです。この下のおまけに書かれているのがまさにソースコードです。
##4.コンパイル
簡単に言うと、人間が書いたソースコードを機械語に翻訳することです。

高さが違うコンテナをgridで綺麗に並べる

#【やりたいこと】
PC、タブレット表示でMasonryっぽい並びをgridレイアウトで実装する。ウィンドウ幅縮小で並び替えはしない。スマホサイズになると昇順で縦に並ぶ。

#【結果】

See the Pen
grid layout by yoshida (こたつ寝防止！

##こたつ寝防止！
寒い季節到来！こたつシーズンも到来ですね！
毎年、温かいこたつでそのまま寝てしまい怒られる、そんなシーン皆さんあるのでは、ないでしょうか？
私は、毎年そうです！笑 むしろ日課です！
ただ、そろそろこの習慣ともお別れしたいとも思ってます！(ほんとかよ！笑)
その習慣を改善できる仕組みはないかと思い、こんな仕組みを制作しました！

##IFTTT×WebSpeech APIを連携させた仕組み
IFTTT×WebSpeechAPIを活用し、長時間こたつで寝てたら、軍隊ラッパで起こされる仕組みを作りたいと思います。(ビックリさせたい！)

##作りたかった仕組み
イメージ動画

##課題となっているCodePen

##環境
・IFTTT(youtube、line)
・

ワイ「Tailwind CSSで選択したラジオボタンの背景色を変えたいんやけど」

:::note warn
この記事はワイ記法です。やめ太郎@Yametaro氏にリスペクトをこめて。
:::

# ある日の我が家

ワイ「[去年趣味でアプリ作っていた](https://battingordermaker.web.app/)んやが」
ワイ「この頃はあまり見た目に拘ってなかったなぁ」
ワイ「ヤクルトも日本一になったし、この際セルフリメイクしてみよか！」[^1]

[^1]: ちなヤクちなハム

# Tailwind CSSを使ってみた

ワイ「はぇーBootstrapだけじゃなくて」
ワイ「[Tailwind CSS](https://tailwindcss.com/)ってのもあるんか」
ワイ「前回はBootstrapやったし、Tailwind CSSを使ってみるか」

# ラジオボタンをどうにかしたい

ワイ「ラジオボタンそのまま表示するのもなんか味気ないな・・・」
ワイ「どれどれ・・・ラジオボタンをボタン風に表示させることもできるんか」[^2]
ワイ「これをTailwind CSSでいっちょやってみっか！」

[^2]: これ自体はCSSのみで可能です

# まず通

猿でも簡単に実装できるお手軽レスポンシブWebデザイン?　　

#はじめに
筆者は大学生限定プログラミングコミュニティ『GeekSalon』で活動しているものです！
興味があればぜひお話を聞きに来てくださいね！！！

#レスポンシブWebデザインとは？
そもそもレスポンシブWebデザインがどんなものなのかご存知でしょうか？
これは**Webサイトを閲覧しているユーザーが使用しているデバイス（パソコン、スマホ、ipadなど…）の画面サイズにそれぞれ表示を対応させるデザイン手法**のことを指します！

パソコンで見たときにはちゃんと表示されてるのにスマホに変えた途端レイアウトがグチャグチャになっちゃった経験ありませんか？？？

そんな悩みを解決できるのがこのレスポンシブWebデザインです！！！
この記事では「メディアクエリ」と