DAY20-24 Youtubeで学ぶHTML

# DAY20
230715
HTML初心者向けyoutube動画を見ました:tv:
今回学習に使わせていただいたyoutube動画は
堀口セイトさん（https://twitter.com/seito_horiguchi）
の　世界一わかりやすいHTML講座↓

すでに入門書を読んでコーディングしたことがあったので、すっと頭に入りました。

入門書はこちら↓　Kindle Unlimitedで見られます
ブラウザゲーム制作：赤と青のブロックを選べ！

## 目次

– [記事の内容](#記事の内容)
– [なぜ記事を書こうと思ったのか](#なぜ記事を書こうと思ったのか)
– [開発環境について](#開発環境について)
– [本編](#本編)
– [スタート画面の見た目](#スタート画面の見た目)
– [ゲーム画面の見た目](#ゲーム画面の見た目)
– [動くブロックの作り方](#動くブロックの作り方)
– [複数の動くブロックの作り方](#複数の動くブロックの作り方)
– [選択機能と時間表示を追加](#選択機能と時間表示を追加)
– [開始画面やクリア表示などを追加](#開始画面やクリア表示などを追加)
– [レベルを追加](#レベルを追加)
– [おまけ機能](#おまけ機能)
– [効果音を追加](#効果音を追加)
– [途中から始められる機能を追加](#途中から始められる機能を追加)
– [終わりに](#終わりに)

## 記事の内容
HTML、CSS、JavaScript（以降JS）を用いたゲームを作成しながら、JavaScriptを学んでいくための記事です。以下のgifがゲーム画面のイメ

新しいSkyWayを使って文化祭やイベントで使えそうなWebトランシーバーを作ってみた

# はじめに
2023年1月31日から提供されている新しいバージョンのSkyWayを使って、Webアプリ上で動作するトランシーバー(以下Webトランシーバーと記載)を作ってみました。

この記事は「[新しくなったSkyWayを使ってみよう！](https://qiita.com/official-events/93564ad363199fa7999c)」のキャンペーンに誘われて作成したものです。

## 注意
::: note warn
この記事は私が個人として作成したものであり、私が所属する学校や委員会などの団体は一切関係ありません。
また、この記事のソースコードを利用される際は自己責任でお願いします。被った損害などについて筆者は一切責任を負いません。
:::

## とりあえず成果物

クリックさせないCSS

## pointer-events: none;
指定したHTML要素のクリックやタッチを無効化することができる。

【CSS】【position】height100%,width100%の親要素の高さを子要素が検知しない時の魔法

## 条件
１. position:relativeで親要素にwidth:100%,height:100%を設定している。
2.left,right,top,bottomなどで子要素がうまく配置できない。

## 解決策
親要素にoverflow:hiddenを追加する。
（なぜか高さを検知するようになる）

JavaScriptで簡単な開閉メニュー

・はじめに

　JavaScriptとCSSを利用して簡単なアコーディオンメニューを作ったのでそれを記録する記事です。もっとこうすればいいよなどのアドバイスがあればよろしくお願いいたします。

・コードと解説

　今回作ったアコーディングメニューはcheckboxを利用したもので、１つ開くと他が閉じる仕様ではなく、開こうと思えばすべて開くことができるようになっています。

・処理の流れ

　CSSでクラス名を指定してメニューの内容を非表示にする⇒JavaScriptでチェックボックスをクリックしたとき、チェックボックスがtrue状態に変われば、CSSの非表示のクラス名を削除して表示状態に、反対にfalse状態に変わればCSSの非表示クラス名を追加させて非表示状態にする

という流れで行います。

“`HTML:HTML

メニュー１

AR名刺を作ろう！

名刺からARが飛び出してきたらカッコいい！
そう思って、AR名刺を作ってみました！


名刺から猫ちゃんが飛び出してきて、とっても可愛い。

https://ar-js-org.github.io/AR.js-Docs/

ARの実装にあたっては、AR.jsというJavaScriptのライブラリを使用しています。
scriptタグで埋め込めば、HTMLだけで完結するので github.io にお手軽公開することもできます。

書いたコードはたったこれだけです（3dモデルは別に必要）

“`HTML

フロントエンドのDebug方法

# ロジックの確認

## console.log を使います

“`js
console.log(“Hogehoge”)
“`
– 一番簡単Debugger方法、consoleにデータを表示するコード



—

## console.traceを使います
“`js
console.trace(‘ここまでの処理’);
“`

– logまでの実行した経路が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazo

あなたのモニターに窓をつけよう！

# 「モニターに窓をつける」とは
この記事を読む方は、普段業務中にオフィスにいて、PCと向き合っている方が多いでしょう。
そして作業に追われて出る一言。
*「うわぁ、もうこんな時間だ！」*

そんな少し悲しい瞬間を無くすために、
**「時間に対応して（空の）画像が切り替わるページ」**
を作っておきました。
名付けて **「窓」** です。

## 使い方
1.フォルダを用意します。
2.お好みの朝、昼、夜の空の写真を用意します。
3.それぞれ`morning.jpg`、`afternoon.jpg`、`night.jpg`とでもしておきましょう。
4.用意したフォルダに画像を入れます
5.後述の`index.html`、`script.js`、`styles.js`を同じフォルダに作りましょう
6.`index.html`をブラウザで開けば、モニターに窓が出ます

:::note info
画像の名称について、コードが書き換えられる人は`index.html`を書き換えてもOK
:::

## コード一覧

“`html:index.html

【CSS】CSSだけでTooltipを自動で画面内に表示できるようになるらしい

## はじめに

みなさんは、[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)をご存知ですか？

[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)は、まだ実験中の機能ですが、CSS Anchor Positioningを使うと、
特定の要素をAnchor（アンカー）として、tooltipなどの要素の位置を決めることができます。

この記事では、そんな[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)を紹介しようと思います。

## CSS Anchor Pos

モダンWEBサイトにおける画像最適化について

# はじめに
この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。

https://stackoverflow.blog/2022/12/27/picture-perfect-images-with-the-modern-element/

画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは`95.9%`、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは`99.9%`であるという調査もあります。

**さらには、LCP要素の`約70%`が画像であるという調査が出ています。**

Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。

つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。

プログラミング入門コース［web制作課題について］

プログラミング未経験者でもたった8週間でWeb開発可能！
おっさんでもこうなれるのか:bangbang:
という思いで5／29日（月）からスパルタコーディングクラブの
プログラミング入門コースにて学習を開始しました！
2期目となりますが頑張っていきます！

:arrow_forward: [スパルタコーディングクラブ](https://www.japan.spartacodingclub.com/)

授業においついていない！課題もまだ提出できていない！
プログラミングノートも提出できていない！
というような状況ですが、5週目以降に行う
自主web制作課題について企画を考えました。

## web制作課題
■ webサイトテーマ
必要な情報を入れると、最適な提案を

2023年：HTMLの仕様の変遷に思うこと（ポエム）

# １．HTML Living Standard という標準仕様

こちらの記事を読んで、改めてHTMLの標準仕様についてキャッチアップしました。
ある程度Webアプリが作れると、このあたりの動きに直接影響はしないけど、知っておくべき仕様については、おざなりにすることが多いです。

こちらの記事を読んで、なるほどと思いました。

https://qiita.com/tanimoto-hikari/items/ef1c3bdca2ab570c96b3

現在は、W3Cの策定した仕様ではなく、「WHATWG（Web Hypertext Application Technology Working Group）」という、Apple、Mozilla、Opera、、Microsoftも加わっている団体が作っていると考えて良さそうですね。

https://launchcart.jp/blog/html5%E3%81%8Cw3c%E3%81%8B%E3%82%89whatwg%E3%81%8C%E7%AD%96%E5%AE%9A%E3%81%99%E3%82%8Bliving-standard%

Seleniumでpictureタグの現在の画像を取得する方法

# はじめに
HTMLのpictureタグでは、レスポンシブ対応のために画面幅に応じた画像を設定できます。

しかし、単純にSeleniumでpictureタグ直下のsourceタグのsrcset属性の値を取得しても、レスポンシブ対応のために複数の画像URLが取得されてしまいます。

今回は、pictureタグで画面幅に応じて入れ替えられる画像の現在の画像URLを取得する方法を説明します。

# 環境
Python 3.9.13
selenium==4.10.0

# pictureタグとは？
HTMLでレスポンシブに画像を切り替えることができるタグです。
JavaScriptを使用せず、HTMLだけでレスポンシブ対応できる点が特徴ですね。

詳しい解説は以下の記事がわかりやすいです。

https://zero-plus.io/media/html-picture/

簡単に説明しておくと、以下のようにpictureタグ以下にsourceタグを複数書いて、sourceタグを順次評価して現在の画面幅に合う画像のURL（sourceタグのsrcset属性の値）をimgタグのsrc属性の

HTML

について（表の作成

最近、HTML で`table`を使ったので、備忘録として書いておきます。

## element

`table` … テーブル
`theader` … テーブルヘッダー（無くても、成立する）
`tbody` … テーブルボディ（無くても、成立する）
`tr` … 行ごとの括り
`td` … セル

## 例

以下が、コードと生成されるテーブルです。

See the Pen HTMLの雛形

# HTMLとは
* Webページとかに書かれている文字

# HTMLの雛形
“`HTML









“`
* 「!DOCTYPE」・・・HTMLのバージョンを宣言する
* 「html」・・・HTMLの文書を書くところ(この中に色々なタグを指定するbodyとか)
* 「head」・・・ユーザーから見えないWebサイトの情報を埋め込む領域のこと
* 「meta」・・・文書の文字コードや文書の概要に関する情報を表す
* 「title」・・・文書にタイトルをつける
* 「body」・・・ブラウザに表示させる画像、文書を指定する

# おわり
* 基本これを使う
* あとは「header」、「main」、「footer」も使うときもある

元記事を表示

HTMLとCSS 〜Flexboxの使い方を学ぼう〜

1:横並びの方法
これからブロックレベル要素を横並び配置にする方法について学びます。ブロックレベル要素を横並びにするためには、displayプロパティにflexという値を指定します。

①display
displayプロパティは、要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティです。値には、変更したい要素の種類を設定します。

値との組み合わせdisplay: block; 説明：指定された要素はブロックレベル要素として表示されます
値との組み合わせdisplay: inline; 説明：指定された要素はインライン要素として表示されます
値との組み合わせdisplay: inline-block;　説明：指定された要素はインライン要素とブロックレベル要素の特性を併せ持ちます
値との組み合わせdisplay

元記事を表示

Reactの開発環境を作る手順を残しました

# まずは設定(していない人)
### node.jsをインストール
https://nodejs.org/ja/download

### Yarnをインストール
~~~
brew install yarn
~~~

### バージョンが確認できたら成功
~~~
node -v
yarn -v
~~~

## アプリ作成

開発するディレクトリで以下のコマンドを実行
~~~
npx create-react-app react-test
~~~

## コンポーネントを作成
以下のディレクトリにコンポーネントを作成
~~~
– src
– Header.js
– About.js
– Services.js
~~~
~~~md:Header.js
import React from ‘react’;

const Header = () => {
return (

My

);
};

export default Header;
~~~
~~~md:About.js
import Rea

元記事を表示

【SkyWay】PC⇄スマホでビデオ通話を作成してみた（初心者向け）

# はじめに

Qiitaが[面白そうなイベント](https://qiita.com/official-events/93564ad363199fa7999c)やってたので、参加してみました?‍♂️

# 概要

PCとスマホでビデオ通話を作成しました！
SkyWayというものを使えば、簡単に実装できるみたい。
>SkyWay はアプリケーションに音声・ビデオ通話をはじめとしたリアルタイム・コミュニーケーション機能を容易に組み込むことを可能とするプラットフォームです。

詳しくは[こちら](https://skyway.ntt.com/ja/docs/user-guide/introduction/)。

https://skyway.ntt.com/ja/docs/user-guide/introduction/

開発ドキュメントも充実しているので、比較的簡単に実装できました。ただ、サーバ構築部分だったり、スマホの接続方法だったりが少し手間取ったので、そこら辺を補足しながら説明していければと思います。

# 出来上がったもの

padding-topが効かない

# aタグにpadding-topが効かない
display: blockすれば良い

## 追記
インライン要素とかについてもまとめようかな

元記事を表示

OTHERカテゴリの最新記事

• 
  • 2024.09.19

  JavaScript関連のことを調べてみた

• 
  • 2024.09.19

  JAVA関連のことを調べてみた

• 
  • 2024.09.19

  iOS関連のことを調べてみた

• 
  • 2024.09.19

  Rails関連のことを調べてみた

• 
  • 2024.09.19

  Lambda関連のことを調べてみた

• 
  • 2024.09.19

  Python関連のことを調べてみた