今さら聞けないHTML　2023年07月28日

スマートフォン向けのハンバーガーメニューボタンの動作方法（jQuery利用）

# ハンバーガーボタンの作り方

お久しぶりです。コウヤです。

今まで、Python関連の記事を中心に書いておりましたが、この度、WebデザインやWebコーディングのスキルを強化して、Webコーダーをまずは目指していきたいという気持ちが固まりました。
現在は副業または業務で活かすことを念頭にスキル強化中です。

さて、今回のWeb作成の課題で、ハンバーガーメニューの作り方を学ぶ機会があったので、実装方法を紹介したいと思います。

皆さんもスマートフォンでWebサイトを見ているときに、以下の画像にあるハンバーガーボタンを見かけることが多いと思います。


さて、このボタンを押下すると、以下のように背景が薄く白くなり、ページ内リンクが出るようになりますが、今回はこれを実装することを考えていきたいと思います。

ここまでの背景デザインまで作成はしませ

“デザイン通りに作る” の1歩先に行くためのチェック項目の模索

# ”デザイン通りに作成” から1歩先に行くチェック項目の模索
デザイン通りに作成することは非常に重要で、素晴らしい技術です。
私が、デザインを実装に落とし込む前に考えることを列挙してみました。

デザイン自体を作る上で、ではなく
もらったデザインを実装する前に、エンジニアとして確認したい項目になります

もしこれ以外にもこんなことを考えている
ここに注意したいなどがあれば是非コメントをください:eyes:

重要項目に関しては別記事で情報を掲載して居ます。

## 簡易チェック項目

### デザイン意図の確認
– [ ] ユーザーにどのような印象を与えたいのか、どうなって欲しいのか理解して実装を始めよう
– [ ] 余白、文字サイズ、色、配置、コンテンツ内容、それぞれの意図はなんであるか理解しよう

### 保守と開発的な目線
– [ ] [MDN](https://developer.mozilla.org/ja/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete)で非推奨、廃止になったデザインでないか確認しよ

javascriptのinsertBeforeを利用して、HTMLの要素を移動させる(要素順の入れ替え)

# 結論
ある親となるHTML要素に、すでに存在している子要素を`insertBefore`で挿入しようします。すると子要素は関数で指定した場所に移動します。

# insertBefore関数
“`.js
(親).insertBefore(newNode, referenceNode)
“`
は、ある親が持つ`referenceNode`の前に、`newNode`を挿入する関数です。[^1]HTML要素を追加する目的で使用する想定だと思います。しかし、下記の2つの仕様を持っているため、HTML要素を移動させるときにも利用できます。
– `newNode`に「既に存在する要素」を指定した場合、指定された要素は`referenceNode`の前に移動される。
– `referenceNode`がnullの場合、`newNode`は末尾に挿入・移動される。

サンプルコードで実際の挙動を確認いただけると幸いです。

[^1]:正確性を欠くかもしれませんが、ノードはjavascriptで扱う「HTMLの要素」という考えでいいかと思います。

# サンプルコード

限界ド文系大学生がプログラミングをやってみて思ったこと

こんにちは、初めまして。堕罪ｵｻﾑです。
某文豪みたいな顔をしていますが、大学生で**国語学・日本語学**を専攻しています。
今日はざっとですが、初学者のｵｻﾑがつまずいているところをほんの少し掘り下げて記事を書いてみました。共感していただけたり、こんなところがわからないのか！と発見になればいいなと思います。よろしくお願いします！

ド文系の私がなぜプログラミングを始めたのか?

プログラミングとの出会いは唐突でした——。

というのも、当方限界大学生であるため就活云々で問題を抱えていまして、お付き合いをしている方にウワ～！と相談したところ、

「俺エンジニアだからプログラミング教えられるよ～」

という返事だったので私も、

「ほな、やってみるかあ」(プログラミングってJavaScriptとか、ぱいそん？とかそういうのだよね？)

という、ざっとこんな感じでした。

実際やってみて難しかったこと

1．HTML&CSSについて

まずはHTMLとCSSから始めました。引っかかった部分としては

**「閉じタグを忘れる」**
**「a

可動式todoリスト作成記 / 拖動可更換次序的todolist

(JP)
8月。といえば旅行！

今年は青森，台湾に行く計画を立てた！

しかし、9月にさらに一大イベントがある。引越しだ。

私は同じところにずっといるのが嫌な性で、賃貸更新のタイミングで毎回引越ししている。

今年も田町から芝浦あたりに引っ越そうと思う！（近場に限る）

そうなると8月月初に飛行機予約，宿予約，賃貸物件選定と、やることが盛りだくさん。

何からやればいいのかわからん、、

そこでtodoリストを作りたいと思ったのだ！

作ってみたけど、結構手こずった。

コードはかなり煩雑になってしまったが、綺麗にする気力がない、、

今週か来週にはコード載せたいと思うので、誰かに手直しして欲しい、、

ちなみに、調べまくってドラッグで項目を入れ替えることも可能にした。

——
(CN)
最近很繁忙，要幹的事情好多，，，

8月份計劃去旅遊，9月要搬家等等

想整理一下該做的事情

於是做了一個只屬於自己的完全original的todolist

憑藉網友們的智慧，前天終於完成了！！（如下圖）

但編程碼非常凌亂，打算下禮拜發編程碼，希望有網友們來修改

這todolist

Laravelで削除確認メッセージを出す方法

# 概要
この確認は正直どこでも使うので
汎用性が高いと考え記事にしました。

# バージョン
* laravel 9.x
* composer 2.5.8
* php 8.1

# 対象コード
“`html

vue.jsで、「事前に指定した特定のhtml」の要素を、「methodsで定義した関数内」で取得する

# 結論
事前に取得したい要素に対して`ref`属性を設定しておきます。「methodsで定義した関数内」で使用するときは`this.$refs.{refに設定した属性名}`で要素を取得できます。

# 前提
– この記事ではCDN の Vue を使用しています。
– vue@3.3.4を使用しています

# サンプルコード

See the Pen 「web ページを見る」ということ

最近、身の回りで、webフレームワークを学んでいるけど、そもそも「web」とか「HTTP」わからない、みたいな、そんな話があって本記事を記載しました。

そのような方々に、少しでも参考にしていただければと思います。

# もくじ

– はじめに
– この記事のゴール
– web ページとは
– 「web ページをみること」の第一歩
– TCP/IP とは
– HTTP とは
– web はおまじないではない
– 終わりに

—

## はじめに

この記事では、基本的な HTTP の動きを、ざっくり理解してもらうことを目標としています。

昨今の web 開発では、基本的にはライブラリやフレームワークなどは当たり前に導入されています。そのため、新卒で入社すると、フレームワークの使い方を先に学ぶために、そもそも web ページとは？HTTP とは？という、一番重要と思っている部分が蔑ろ（早期戦力化のため？）にされているように思います。（個人経験談です）

そのため、フレームワークに依存しない素の HTTP を学び、基礎的な部分の知識を習得することを目指します。

## この記事のゴ

元記事を表示

Safariではoption要素をhiddenできない

## 問題
optionにhiddenをつけた場合、Chromeでは期待通りに動きますが、Safari(やiPhoneのwebview）では選択肢としてでてきてしまいます。。

“`html
FirstSecondThird
“`

[Sampleコード](https://syncfiddle.net/fiddle/-NaA9SkC93fMnzWSqZX1)

|Chrome|Safari|
|–|–|
||![image.png](https://qiita-image-store.s3.

【HTML】便利そうな dialog 使ってみた感想

## 背景

**モーダルを作るってダルくないですか？**

– モーダル自身を作成して・・・
– モーダルの背景を作成して・・・
– モーダル内のボタンを押すとモーダルと背景が非表示になって・・・
– モーダルの位置を固定して・・・
– 背景とz-index調整して・・・
– etc・・・

実装しないといけない要素が複数あるので面倒という話です。
そこで、この **`dialogタグ`** の登場です。

簡単にいうと**上記で列挙した機能を簡単に作ってくれるすごいやつ**です。

実は結構前（2014年）から存在していたのですが、対応しているブラウザが`Chrome`や`Opera` のみでした。それが、2022年に[ 標準ブラウザで対応できる](https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)ようになり、実用性が出てきたので、これを機に触

beatmania IIDXをブラウザで練習できるようにしたぞ！！

## 目次

– [記事の内容](#記事の内容)
– [なぜ記事を書こうと思ったのか](#なぜ記事を書こうと思ったのか)
– [なぜ作ろうと思ったのか](#なぜ作ろうと思ったのか)
– [本編](#本編)
– [画面の見た目](#画面の見た目)
– [JS部分の説明](#js部分の説明)
– [要素取得](#要素取得)
– [保存データ適用](#保存データ適用)
– [同時に落ちるノーツ数の決定](#同時に落ちるノーツ数の決定)
– [重複なしの場合のノーツが落ちる場所を決定](#重複なしの場合のノーツが落ちる場所を決定)
– [ノーツが落ちる場所を決定](#ノーツが落ちる場所を決定)
– [1P2Pの変更](#1p2pの変更)
– [SUDDENとLIFTの高さを更新](#suddenとliftの高さを更新)
– [皿が落ちる間隔を変更](#皿が落ちる間隔を変更)
– [開始ボタンが押された時の動作](#開始ボタンが押された時の動作)
– [その他ボタンの動作](#その他ボタンの動作)
– [終わ

私はロボットでありません(reCAPTCHA)のレイアウトのものを作成「ネタ枠」

はじめに

最近暇だったのでインターネットでよく見るあなたはロボットではありませんを自作したと思いネタで作成した。この本のネタはGoogleが提供しているreCAPTCHAというものである。以下のコードを用いることで誰でもあなたはロボットではありませんということを改造して遊べる。
完成系URL

カスタムする際の変更点

HTML

`Javascript
`const ans=[“1,1″,”1,2″,”1,3″,”2,1″,”2,2”,

letter_opener_webって？

# letter_opener_webってなに？？
タイトルの通り`letter_opener_web`について解説したいとおもいます。
#### letter_opener_webとは
開発環境でメールを送信した際に、ブラウザでそのメールを確認するためのツールです。
本番環境で実際にメールを送る代わりに、このツールを使ってメールの内容や送信先を確認することができます。
#### 使用方法
Gemfileにletter_opener_webを追加
“`ruby:Gemfile
gem ‘letter_opener_web’, ‘~> 1.0’
“`
“`
$ bundle install
“`
これで使えるようになります！

アイコンフォントならPhosphor Iconsがおすすめ

Webサイトを作る際に、気軽にアイコンフォントを導入したいときがあるかと思います。

そういったとき、最近はPhosphor Iconsを気にって使っているのですが、
誰も話題に挙げていないので、他のアイコンフォントと比較しながら推していきたいと思います。

# Font Awesomeじゃダメな理由

https://fontawesome.com/

**有料だから** です。

無料部分もありますが、検索して「これ使いたい！」と思ったものが有料アイコンだったときにとても悔しい思いをします。

もちろん予算があるなら種類も豊富なのでぜひ買ってあげてほしいですが、気軽に使うには向きません。

# Google Material Iconsじゃダメな理由

https://fonts.google.com/icons

Google Material Iconsは素晴らしいです。僕もよくお世話になっています。

しかし、アイコンの豊富さで言うとそれほど多くなく（約3000）、 **欲しいものが無い** ということがよくあります。

「矢印」といったようなWeb UIで定番で必要となるも

非エンジニア（クリエイター）のはじめてのコーディング学習で挫折を支えるCSSセレクタチートシート一覧。

## 自己紹介
経営学部卒の非エンジニア（クリエイター）が、これまでディレクションを中心に活動をしてきていましたが、ご縁あってエンジニアの方と近い距離でお仕事をすることになりました。元々コーディングの基礎知識は習得したいと考えていたのですが、自分の成長度を測るため、Qiitaでアウトプットすることにしました。
ゆるく・少しずつ、でも確実に成長していく姿を身守って頂けると嬉しいです。

## 非エンジニア（クリエイター）がCSSを独学で学習する際に挫折しないためのチートシートを独自で調べてみました。

初学者にとってつまづきやすい最初のハードルはCSSだという人も多いのではないかと思います（筆者はそう）。分からない時に心の支えになるチートシートを独自で調べました。

### [Malven Co](https://malven.co/)

– [**flex**](https://flexbox.malven.co/)
– [**grid**](https://grid.malven.co/)

CSSで頻繁に使用することのあるflexでつまづいている自分に友人が教えてくれました。

非エンジニア（クリエイター）が挫折しないためのコーディング初学者向け無料学習サービスを使ってみた感想。

## 自己紹介

経営学部卒の非エンジニア（クリエイター）が、これまでディレクションを中心に活動をしてきていましたが、ご縁あってエンジニアの方と近い距離でお仕事をすることになりました。元々コーディングの基礎知識は習得したいと考えていたのですが、自分の成長度を測るため、Qiitaでアウトプットすることにしました。

ゆるく・少しずつ、でも確実に成長していく姿を身守って頂けると嬉しいです。

## HTML・CSSの基本的な内容を勉強するためのサイト

非エンジニア（クリエイター）がゼロからコーディングを学習したい！だけど、初めからお金をかけて学習するには覚悟が必要・・・そんな動機から無償で学べるサイトやサービスを**個人的に使ってみて良かった**サイトやサービスをご紹介します。

[**CreatorQuest**](https://creatorquest.jp/lessons/html/)

こんな人におすすめ。

– 書籍よりやテキストベースよりも視覚で覚えたい方。
– 1回の講座が1時間以内で終えたい方。
– HTMLの基礎（概念）を学習したい方。

YouTubeとサイトの教材

【JavaScript】Webページ内にタブ切り替えイベントを実装してみた

# 背景
Webサイトに載せるコンテンツが1ページで収まり切れないけど、１ページ内に詰め込み過ぎるとUXが下がってしまうときがあると思います。
このような場合、ページ内に**タブ切り替え**を実装する事でUXが下がる事を防げると思いますので、今回**HTML・CSS・JavaScript**を使用し１つのWebページ内でタブ切り替えを実装してみました。

# 目標
– １つのWebページ内でのタブ切り替えを実装する。

# 成果物

# 実装コード
### ◆ HTML
タブの見出しと内容部分をそれぞれ大きく2つを作成し、JavaScriptファイルの読み込んでいます。

“`html:index.html

某プロフィールサイトより早いサイトをGitHub Pages縛りで作りたかった

## 概要

インターネット史上、最速のサイトとして名高い某男優のプロフィールサイトを超えるため、Lighthouseのスコア改善に取り組んだメモです。

私の経験としては、サイトの速度改善はおろか、フロントエンドもおぼつかないため間違いあればそっと教えてください。

## 成果物

ペラのHTMLに似たようなスタイルと背景画像を当てた。
サイトのデザイン的な要件としては割りと似た条件になったはず。


## 成果物に対する速度改善

ここでは参考にしたサイトを上げていく。
各項目の詳しい説明はリンク先を参照願う。

### assetの遅延読み込み

https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657

### フォントのセルフホスト

【CSS】CSSだけでパララックスを再現する

## はじめに
みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？

最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、
スクロールに応じて色々なアニメーションが発火します。

今まで、このようなアニメーションを実装するには、JavaScriptを使っていたので大変でした。

しかし、Chrome 115で使えるようになった、scroll-driven animationsを使うと、CSSだけでスクロールに合わせたアニメーションを作れるようになります。

この記事では、そんなscroll-driven animationsを使って、パララックスを再現したので紹介します。

## パララックス（parallax）について
まずパララックス（parallax）にて解説します。

### パララックス（parallax）とは？
パララックスとは、視差効果のことで、
Webサイトにおいては、パララックスはスクロールなどの動作に応じて、
複数のレイヤー（層）にある要素を異なるスピードで動かすことで、
「**立体感や奥行きの演出**」、「**フェー

【html.erb】Emmetを使いコードを楽に書く方法

html.erbファイルの実装を入力補完のプラグインを使って楽に書きましょう！

Ruby on RailsでのWebアプリケーション開発を行う際のビューに関する設定を備忘録としてメモしておきます。

# htmlのコード実装で入力補完してくれるEmmet
htmlファイルのコードを記述する際、これまで入力補完による楽な記述ができていました。

ですが、Ruby on RailsでのWebアプリケーション開発を行う際、html.erbという拡張子のファイルを作成する際には、入力補完が機能しないことに気づきました。

そんな時はEmmetというプラグインの設定をいじることで解決できます。

# Emmetとは？
Emmetとは、HTMLやCSSを省略記法で入力できるプラグインのことを言います。

# 省略コードの書き方

箇条書きリストのタグを入力したい場合、このような感じで省略コードを書きます。

### 箇条書きリスト

“`ruby:html.erb
ul>li*10
“`
このように入力してEnterを押すと、以下のように補完して自動的に入力してくれます。

“`c:h