今さら聞けないHTML　2022年12月08日

HTML, CSS, JavaScriptで掲示板システムを作ってみた【その4-imgとvideo】

# 初めに
前回の投稿から一年半程度空いてしまいました。主に院試や卒論といった学生の仕事のメインの方に時間を取られてしまい、なかなか記事の投稿に着手できていませんでした。
しかし、ここ数ヶ月で当掲示板やゲーム制作など、自分がプログラミングでもともと表現したかったものを作成するという目標が果たせそうなのでここにアウトプットしていきたいと思います。

# imgとvideo
まず初めに作成したウェブアプリをご覧ください。
書き込みテストのスレッドに適当なスクリーンショットの画像と動画がアップロードされていると思います。
これは現在ChromeブラウザとSafariで同じように表示されているはずですが、作成当初はSafariでは表示されるがChromeでは表示されないというバグを含んでいました。
キャッシュの削除等色々試してみた結果**

HTML5の要素タグの使い分け

# header要素
ページのヘッダー部分を表すタグです。
※セクショニング要素ではありません。

# footer要素
ページのフッタ部分を表すタグです。
※セクショニング要素ではありません。

# nav要素
メニュー、目次、索引等のサイト内全ページに一貫して表示されるグローバルナビゲーションなどに利用されます。

# aside要素
サイドバー、広告、新着記事、人気記事等の補足情報を表します。

# main要素の定義
ページ内の主要部分に使用します。
1ページ内に1つのみ使用可能で、article/aside/footer/header/nav要素の中には入れてはいけません。

# article要素の定義
そのページから切り取っても独立した記事として成立するセクションに使用します。
※例えば料理レシピのサイトで、材料や準備するものだけでは１つの記事として成立しないので、このタグは不適切です。
主に、ページのメインコンテンツ部分に使用します。

# section要素の定義
ページ内で文章のまとまりを表すタグです。子要素に見出し（h1〜h6）を持つのが基本です。
また、レイアウ

【連載企画4日目】ウェブ画面開発者の頭の中を見てみよう！〜伝言編 part3〜

この記事は[レコチョク Advent Calendar 2022](https://qiita.com/advent-calendar/2022/recochoku)の8日目の記事となります。

## 自己紹介

みなさんこんにちは。

連載企画4日目担当、株式会社レコチョク新卒1年目エンジニアの望月と申します。

k-popアイドルと旅行とNetflixが好きなインドア派です。

お仕事は今年の11月から弊社の[採用サイト](https://recruit.recochoku.jp/)の開発を行っています。

人生初エンジニアのお仕事に苦しみながらも楽しんでいます！

## 企画についてご案内

本企画は伝言ゲーム形式でサイト作成してみた、というものですが、詳しい企画内容は[こちら](https://qiita.com/sudachi_jelly/items/cdc27f4333e5338c1a5d)になります。

1年目フロントエンジニアって開発する時何を考えているの？？？という興味で軽く読んでいただけたら嬉しいです。

## 伝えられた内容

まずは3日目の

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

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

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

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

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

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

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

コンペボールは、虫捕り大会の中で使う特別なボールです。
ハートゴールド・ソウルシルバーのイベント、虫取り大会で20個貸し出され使うことができます。

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

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

Gmailは開発者を苦しめる

# 何だこれは！？

あるカラフルなHTMLメールを送信して、Gmailクライアントでテストをしていたある日。。。
なんだこれは！？！？
Gmailクライアントの色の変えようにびっくりしてしまいました。
しかし、ここまで色を変えられるとデザインによっては大きく雰囲気が変わってしまいます。
本記事ではGmailでも任意に色を設定することを目的としています。

| Gmailクライアント（ライトモード） | Gmailクライアント（ダークモード） | iOSのデフォルトメールクライアント（ダークモード） |
|:–:|:–:|:–:|
|  |![IMG_3555.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/565f68ef-5564-e9e

【JavaScript】DOMツリーからHTMLの要素を取得する方法

# はじめに

本記事では、JavaScriptでDOMツリーからHTMLの要素を取得する方法についてまとめていきたいと思います。
JavaScriptの初心者向けな内容あとなります。興味のある方はぜひ見て頂けると嬉しいです。

# DOM、DOMツリーとは

DOMツリーからHTMLの要素を取得する方法を書いていく前に、簡単にDOMとDOMツリーについて触れておきます。

DOM（Document Object Model）とは、HTMLを解析してデータを作成する仕組みのことです。
HTMLやCSSがユーザーに閲覧されるまでの流れはご存じでしょうか。
HTMLファイルは単なる文字情報なので、そのまま表示してもユーザーにとって見にくいです。
その為、HTMLを解析してCSSやJavaScriptによる装飾を行った後に画面に映しています。
これを行っているのは、Googleやsafariなどの「ブラウザ」です。
HTMLは階層構造になっていて、この階層構造であるデータのことをDOMツリーやドキュメントツリーと呼びます。
![image.png](https://qiita-image-

JavaScriptで追加機能実装

# HTMLでの実装
HTMLは簡単な部分の実装です。
“`index.html

追加

未完了

TODOです

完了
削除

Web Componentsを実装する

# はじめに
Web Componentsは再利用可能でカプセル化されたコンポーネントを作る機能です。
Web Componentsを実装するには3つの機能を利用する必要があります。それぞれ別記事にて紹介しましたので是非ご覧ください。
– [Custom Elements](https://qiita.com/KokiSakano/items/1ffa65a1adb3f7c11112) コンポーネントの要素と動作を定義するための機能です。
– [Shadow DOM](https://qiita.com/KokiSakano/items/21e511313e64e70c2221) カプセル化を担う機能です。
– [HTML Template](https://qiita.com/KokiSakano/items/c8f75f4741beca9f02c5) 再利用を可能にする機能です。
この記事ではこれらの機能を組み合わせてWeb Componentsの実装を行います。

# 実装
例として`tier-table`という名前でtier表(ランキングボード)を作成する要素を作ります。細かな

社内で話したメディアダウンロード機能の実装について

## 背景
最近、社内でS3に保存したメディアをHTML上で手元にダウンロードする機能を実装してほしいとの要望があった。
実際に作成していく中で、私の知識不足もあり、いろいろ嵌っていったので、共有と備忘録も込めて、この記事を記述する。

## なんだ、簡単じゃん
調べてみると下記のようなコードで実装できるらしい！（やったね！）
“`html
ダウンロード
“`

うっきうきで実装してみると…
違う、そうじゃない…
調べてみると、下記のような文言がありました。
>この属性は同一オリジンのURLに限り動作する

今回、ダウンロードしたい画像はS3に置いてあるため、当然のことながら同一ドメインではない。よ

【連載企画3日目】ウェブ画面開発者の頭の中を見てみよう！〜伝言編 part2〜

この記事は[レコチョク Advent Calendar 2022](https://qiita.com/advent-calendar/2022/recochoku)の7日目の記事となります。

—–
## 自己紹介

みなさんこんにちは、株式会社レコチョクに入社2年目の山岸世良です。やませらって呼んでください。

やませら、パンクロックが好き！ベースもたまに弾くます。

業務としては、murketの開発や音楽ダウンロードサービスの対応などを行っており、HTML/CSS/JavaScriptをメインで触っています。

自分の担当サービスです。よかったらチェックしてください。

[murket](https://recochoku.jp/corporate/murket/)

[レコチョク](https://recochoku.jp)

[dミュージック powered by レコチョク](https://music.dmkt-sp.jp)

[Music Store powered by レコチョク](https://musicstore.auone.jp/s/)

## 企画

【G】Google Driveのファイルも直接参照したい

Dropboxの場合を書いたのでせっかくだからGoogle Driveも。

## 正解

– 共有リンクを得る
– `https://drive.google.com/file/d/XXXXXXXXXX/view?usp=sharing`みたいなURLがとれる
– `/view?usp=sharing`を消す
– `file/d/`を`uc?id=`に置き換える

“`html

“`

## 補足

`id=XXXXXXXXXX`のあとに`&export=download`をつけると自動ダウンロードリンクになる。これはこれで使えそう。

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

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

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

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

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

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

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

ヘビーボールは、体重の 重い ポケモンが 捕まえやすくなる特別なボールです。
金銀世代(HGSS)で登場して以来サンムーン以降で再登場した少しエモいボールです。

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

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

CSSのclassって前方・後方検索ができるんですよ！

↑ サンプルコードはこちら

## CSSで要素を前方検索・後方検索

後方検索
“`css
タグ名[class$=”ターゲット文字”]
“`
前方検索
“`css
タグ名[class^=”ターゲット文字”]
“`
部分検索
“`css
タグ名[class*=”ターゲット文字”]
“`
## 使用例

“`css
input[type=”checkbox”]:checkd~div[class^=”hoge”]
“`
意味：
チェックボックスがチェックされた時に兄弟要素のうち、hogeから始まる要素（=hogetarou,hoge-01-red など）にCSSが適用される

上記の機能を活用することで、以下のようなCSSの適用の仕方をしたい時に以下のようにCSSのクラスを命名することで、少ない行で簡単にスタイルの違いを作ることができます。

|要素A＼要素B|あり|なし|
|–|—|—|
|あり|youa-youb|youa-off|
|なし|off-youb|off-off|

iframeと親ページ間でpostMessageを利用してデータ送受信を行う

# はじめに
[iframe表示部分のクリックイベントを取得する](https://qiita.com/manzoku_bukuro/items/66d07b88eb0b6eb28601)という記事で、iframe内のイベントをiframeのcontentWindowに対しaddEventlistenerを登録して親ページで取得する方法を紹介しました。

この記事ではpostMessageを利用してiframeと親ページ間でやり取りする方法を紹介します。

# この記事の対象者
– ページに埋め込んだiframe要素から情報を取得したい
– ページに埋め込んだiframe要素と親ページ間で相互間のデータ送受信を行いたい
– ページにiframe埋め込みをする前提のページを作成して、イベント発生時に親ページに情報を渡したい

# iframeと親ページ間のデータ送受信
## postMessageを利用した送受信の方法
### 子ページ
#### データを親ページに送信する場合
“`js
window.parent.postMessage(message, targetOrigin);

チェックボックスをトグルボタンにする[cssとjQuery]

# こんなトグルボタンを作ります

①チェックボックスで作ります。

– [ ] ⇒トグルの見た目「×」
– [x] ⇒トグルの見た目「✔︎」

②HTML、CSS、jQueryを使います。

# HTML
“`html:index.html

“`

# CSS
“`css:style.css
.input.checkbox {
position: relative;
width: 52px;
height: 29px;
border-radius: 50p

Canvas2D RadialGradientの細分割による線をはみ出さない塗りの実験

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

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

自作ツールでブラシ塗りがしたいということで、[前回](https://qiita.com/warotarock/items/50320c22fc5c9096ee26)は放射状グラデーション（RadialGradient）のパフォーマンスを検証しました。

PC上でイラストなどの絵を描くためのソフトウェアは一般的にペイント系とドロー系に分けられると思いますが、筆者が今作っているツールはドロー系です。つまり、データをビットマップで持つのではなく、ベクトルデータで持します。それにより、後から修正しやすいのが売りのつもりです。

しかしドロー系なので、色を塗ったときに線からはみ出した部分を消しゴムで消す、ということが技術的に難しかったりします。消しゴムデータが肥大化したり、重ね合わせの問題が生じたりするからです。

また、そ

ユーザビリティ備忘録

世の中にあるいろんなWEBアプリを使ったり、時には作ったりしてきた中で、こういう工夫がユーザビリティにつながるのでは？と思ったポイントを備忘録的にまとめます。
テーブル行は交互に色を付けたほうが見やすいとかそういうのです。
（要件がどうとか諸説あると思いますが気にせず書いていきます。備忘録なので）

### ・有名どころの画面レイアウトを~~パクる~~参考にする
ユーザーの目は肥えてるので、彼らが慣れ親しんでいるWEBサイトやアプリの素晴らしい画面を基準に画面を操作する。
というのを前提に、独自の視点で画面を作らないようにする。
自分が作ろうとしているものの競合になりそうな（またはそれに近いジャンルの）WEBサイトの中でビュー数が多そうなものを見てみて、どうして見やすいのかを分析する作業が大事かな。

### ・ユーザーのIQは2であることを意識する
要は画面を見るときに、ユーザーに推測させてはいけない（頭を使わせてはいけない）。
頭からっぽでも操作できるように、小手先のテクニックをちりばめて誘導させまくるというマインドが重要。
↑の「有名どころの画面レイアウト」はエンドユーザーの

最短でWEBデザイナーになるには・・・


# はじめに

WEBデザイナーになるには、どのようなスキルを身に着ける必要があるのでしょうか。
20年ほど前までのWEBデザイナーの仕事は、PCのホームページを作る仕事でしたが、2014年以降タブレット・スマートフォンの普及によりSPユーザーが50％を超え、SNS中心にモバイルでWEBサイトを見ることが主流になりました。

そのようなことに伴いHTML5やレスポンシブデザイン技術を駆使したWEBアプリ、WEBサービスが数多く登場しました。
WEBは日進月歩で進化し、今も新しい技術が誕生し続けています。

本屋に行けば一目瞭然、プログラミングやWEBに関する書籍が山のようにあります。
人々の関心は高まっていますが、何から勉強すれば分からないといった声も多く聞こえてきます。

そんな中で、WEBデザイナーになるには何から学べばいいのかを今回の

エンジニア転職を成功させる正しいポートフォリオの作り方

# はじめに

今回の記事では、「エンジニア転職を成功させる正しいポートフォリオの作り方」についてご紹介していきたいと思います。
実際にエンジニア転職を成功させた方の体験談や採用担当の方の話なども盛り込んだ貴重な内容になっています。
是非ご参考にしていただければと思います。

# 現在の就職活動市場

コロナ禍3年目に突入した2022年。
エンジニア転職市場は、2021年に引き続き過去最高水準の採用数が見込まれているようです。
エンジニア転職は、コロナ禍で危機感を感じ「市場価値を上げたい」「専門知識･技術を習得したい」といった上昇志向で転職を目指す方が多く、未経験で生半可な気持ちでは転職を成功させることが難しいと考えられます。
自分自身をしっかりアピールできるようにしておくことが重要で、その準備として欠かせない要素の一つがポートフォリオです。
参考：[日経XTECH](https://xtech.nikkei.com/atcl/nxt/column/18/00577/010700032/?P=2)

# ポートフォリオとは

「ポートフォリオ」とググると、「金融商品の組み合わせ」とか「

【Web Componentsを学ぶ】HTML Template編

# はじめに
この記事ではWeb Componentsを利用する準備のためにHTML Templateを紹介する記事です。Web Componentsとは他のコードから独立して利用できる再利用可能なコンポーネント(要素)を指します。
Web Componentを利用するために必要な他の要素として[Custom Elementについての記事](https://qiita.com/KokiSakano/items/1ffa65a1adb3f7c11112)、[Shadow DOMについての記事](https://qiita.com/KokiSakano/items/21e511313e64e70c2221)も書きましたので併せてご覧ください。なお、この記事ではCustom Elementは知らなくても進めることができますがShadow DOMについての知識は多少要求します。また、Web Components自体の実装は[こちらの記事](https://qiita.com/KokiSakano/items/334e0b3af7d72ee4d230)で行いました。

# HTML Templa