f@ctor

今さら聞けないHTML　

今さら聞けないHTML　
目次

課題（008）　進捗ー2

お疲れ様です。

昨日の課題の続きから最後まで、コードを書き終えたため進捗報告です:computer:

![024-06-10 222449.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/b234a6ea-39e1-dd35-b134-2d2656c8f7e5.png)

アンケートフォームの続きからでしたので、昨日と同様に、チェックボックスと送信・リセットボタンの実装についてメモをとりつつ、40分ほどで最後まで書き終えました:fist:

動画はあらかじめ指定されてあるものを「共有」→「埋め込む」よりコードをコピーし、ページ上で動画を再生できるようにしたものです。
ネット上にある動画は、上記のやり方で、別ファイルとして取り込んだ場合の動画は、昨日勉強した videoタグを用いる感じなんだなーとふわっと理解しました。

しかしここで footer を普段どこに置いていたか悩み始めます…
article の外だとは思うけど main も越えたっけ…？:thinking

元記事を表示

学校の大型モニターを常時フル活用しよう！

こんにちは。今日はモニターを常時フル活用するツールを作った話をしようと思います。

:::note alert
記事の投稿を6か月くらい忘れてました
:::

:::note warn
この記事は「[学校に自作のポータルサイト的なものを導入したかった話]()」を見てからだとより楽しめるのでぜひ見てくださいね！
:::

# 教室のモニターのスペック
各教室に一台おいてあってテレビにAirPlay投影用のApple TVとかが繋いであります。

# 現状の課題
– 動画を映すときやなんかするとき以外は基本的に利用していない
– せっかくの大画面がもったいない
– 有効活用するアプリ作ろう！

# アプリの構成
– HTML
– Bulma(CSS Framework)
– Vanila JS

# デモ
完成したものがこちら！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/72a4dfc8-5e8f-9c2f-78c5-47dc9e96f020.png)

時計、日付、時間

元記事を表示

HTMLを素早く書く方法 (Emmet)

## はじめに
はじめまして！sato (@ameRese) と申します。
プログラミングは過去に少し仕事で関わっていた程度ですが、
最近本気で勉強し直そうと考え、現在はHTMLやCSSの勉強からやり直しているところです。

今回はHTMLを素早く書くことができるEmmetについて記事を書きたいと思います。

## Emmet (エメット) とは？
Emmetとは、入力補完機能によりHTMLやCSS等を素早く編集できる、
テキストエディタ用プラグインです。
VSCodeやCursorには最初から搭載されています。
↓こんなことができます↓
![Emmet Sample](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362317/66c81958-1811-772c-1b41-c4284e2de0a6.gif “Emmet Sample”)

たくさんの記法があるようですが、今回は私がよく使うものに絞って紹介します。
詳しく知りたい方は以下のチートシートを参照してください。

https://docs.em

元記事を表示

HTML5でマイナーなタグをcopilotに聞いてみた

個人的「質はともかく継続する」２日目です。

# HTML5でマイナーなタグをcopilotに聞いてみた

最近、新人さんにHTMLを教える機会がありました。
Github copilotも使ってもらいながら作ってもらったのですが、
なるほど新人さんと経験者ではcopilotの使い方ひとつとっても違うなぁと感じる機会があったのですが、
それはまた別の機会に。

今日はその時にふと、HTML5であまり知られてないマイナーなタグって何があるのだろう、
ベテランほど知らないタグがあるんじゃないだろうか、
そう思ってcopilotに聞いてみたところ、なるほどーというのがあったので、いくつかをご紹介。

## \

まずは実例

課題（008）進捗

お疲れ様です。

昨日取り組んでいた課題は、まだ解決できておりませんが、浮かばないのにずっと考えても仕方ないので、前回の分は置いといて次の課題に取り組んでいきます:raised_hand:
しかしJavascriptの勉強もしたいので、時間を1時間に区切ってやっていきます:computer:

![2024-06-09 221252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/9ba35e45-abe9-acf1-3328-2c328cef0e22.png)
次の課題の見本が貼れなかったため、いきなりコード画面ですが、今回はHTMLのみで簡単なページを作成するという内容です。
その中には音声を埋め込む audioタグや、formタグを使ってのアンケートフォームを入れるという指定も含まれています。
画面のコードは30分くらい経ったものです:stopwatch:

しかし、完全に form、textareaタグのことを忘れていたために、その辺の復習をしつつ、ノートにまとめることも並行して課

元記事を表示

[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする

2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。

# View Transitions APIとは

View Transitions APIは、画面遷移をなめらかに行うことができる機能です。

https://developer.chrome.com/docs/web-platform/view-transitions?hl=ja

https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API

この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。