f@ctor

今さら聞けないHTML　

今さら聞けないHTML　
目次

[CSS] backdrop-filterを設定する場所に気を付ける　backdrop-filterの適用にラグがあるときの改善策

## この記事の概要
親要素にtransition: opacityなどを設定していて、backdrop-filterの適用にラグが発生したときの改善策です。

![vid.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795435/e7393843-4ba1-7e22-271e-d954f7aa92cc.gif)

:::note info
結論：**transitionを設定している要素にbackdrop-filterを設定しましょう。**
:::

## コード例

“`html:html

backdrop-filterがかかる画像

“`
:::note info
ラグが軽減する書き方

“`css:css
.pa

元記事を表示

プログラミング学習とテレビゲームの戦い方の共通点～初学者の知恵～

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。今回は、学習のモチベーションを上げるために考えた内容です。学生時代はテレビゲーム、特にアクションRPGなどをしていました。その時の楽しみ方がプログラミング学習に活かせないかと思い記事を書いてみました。

## プログラミング学習とテレビゲームの共通点とは？
プログラミング学習とテレビゲームには意外な共通点があることに気づいたことはありませんか？アクションゲームをプレイしていると、プログラミング学習のプロセスと似ている部分が多く感じられます。ゲームの戦い方とプログラミング学習の過程にどのような共通点があるのかを具体的に見ていきます。

## 1. 初期の挑戦と成功体験
**ゲーム:**　
ゲームを始めたばかりの頃は、比較的弱い敵と戦いながら操作やコマンドを覚えます。簡単な敵を倒すことで、ゲームの基本的な流れや戦い方を学ぶことができます。
**プログラミング:**
プログラミングを始めたばかりの頃は、簡単なプログラムやチュートリアルに取り組むことで、基本

元記事を表示

HTMLの親子要素と兄弟要素をgridレイアウトを参考に理解する〜初学者の考察〜

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。
HTMLでウェブページを作るとき、要素同士の関係を理解することが重要です。特に「親子要素」や「兄弟要素」の関係を知ると、HTMLやCSSでページをデザインしたり、レイアウトを整えたりするのに役立つと考えました。今回は親子要素と兄弟要素の理解を深めるためにgridレイアウトを参考に考察してみました。

## 親子要素と兄弟要素の基礎
**1. 親子要素とは？**
親子要素は、HTMLの構造で使われる用語です。ある要素が別の要素の中に含まれているとき、それを「親子関係」 と呼びます。外側にある要素が「親要素」、内側にある要素が「子要素」となります。

親子要素の例:
“`html

これは段落です。

“`

– `

` は親要素です
– `

` はその中に含まれている子要素です。

**2. 兄弟要素とは？

元記事を表示

How to show React API Data

import { useEffect, useState } from ‘react’
import reactLogo from ‘./assets/react.svg’
import viteLogo from ‘/vite.svg’
import ‘./App.css’

function App() {
const [user, setUser] = useState([])
const [ageValue,setAgeValue] =useState(”)
const url = ‘https://dummyjson.com/products’;
// const url = ‘https://dummyapi.online/api/movies’;

const updateAgeValue = (e) => {
console.log(e.target.value)
setAgeValue(e.target.value)
}

async function fetchApi(url) {
const res = aw

元記事を表示

電卓を作りながら勉強ー1

お疲れ様です。

JavaScriptを使って、まずは簡単に作れるものはないか探していたところ、今日偶然にも私用で使う電卓を購入したことを思い出し、「電卓作ってみよう！」ということで、考え方を検索:computer:

いろいろと見てきましたが、要素の意味なども説明してくださっている [@bumpfuji10様](https://qiita.com/bumpfuji10/items/2b9470667530f67696ca) の記事を見て、分かりやすそうと思いましたので、分からないところは調べて理解しつつ、進めていこうと思います！
**※bumpfuji10様のページ内でも書かれてあることですが、[ウェブカツブログ様](https://webukatu.com/wordpress/blog/27277/)のコードを元にbumpfuji10様なりの解釈で書かれたコードとなっております。これを盗用し私発信とすることが目的では一切ございません。気になる方はぜひ上記ページをご覧ください！**

まずは進捗です。

元記事を表示

angularでパンクズリストを実装する方法

# 概要

angularでパンくずリストを実装したため、その内容について記載します。

今回はnpmライブラリである `xng-breadcrumb` を使用して作成しました。

https://www.npmjs.com/package/xng-breadcrumb?activeTab=readme

:::note info
使用バージョンは以下です。
– npm: 10.5.0
– nodd: 18.20.2
– angular: 17.3.10
:::

# パンくずリストとは

サイトの上部でよく見る「ホーム ▶︎ 買い物かご ▶︎ 商品1」のような表示です。

Webページのどこにいるかをわかりやすくするために使われています。
「買い物かご」をクリックするとそのページに戻ります。

# 使用手順

### 1. npmライブラリのインストール

以下のコマンドで `xng-breadcrumb` ライブラリをインストールします。

“`
npm install xng-breadcrumbs
“`

### 2. パンクズリストのComponentを作成

パ

元記事を表示

「position: absolute」で要素を画面中央に配置する方法 ～ボタン、画像、ビデオをレスポンシブに対応させる～

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。HTML,CSSでwebページを模倣してみた時、レスポンシブデザインでビデオが画面の中央に配置出来ませんでした。そこで今回は、CSSのposition: absoluteやtransformを使用して、要素を中央に配置する方法を、まとめてみました。

## CSSの基本的な使い方について
まず、中央に要素を配置するために使用する主なプロパティを理解しました。

– position: absolute: 要素をその親要素内で絶対位置に配置します。
– left: 50%; top: 50%: 要素の左上を親要素の中央に配置します。
– transform: translate(-50%, -50%): 要素自体の幅と高さの半分だけずらし、正確に中央に表示します。

これらを組み合わせることで、要素を親コンテナの中央に配置することができます。

### コード例
“`

元記事を表示

Google Web Toolkit入門：Javaデベロッパーのための強力なWebアプリケーションフレームワーク

## はじめに

Google Web Toolkit（GWT）は、JavaデベロッパーがHTML5とJavaScriptを使用して高性能なWebアプリケーションを構築するためのオープンソースフレームワークです。GWTを使用することで、JavaコードをJavaScriptに変換し、クロスブラウザ対応の洗練されたユーザーインターフェースを作成することができます。

この記事では、GWTの基本から応用まで、15章にわたって詳しく解説していきます。各章では、概念の説明と実践的なコード例を提供し、GWTの理解を深めていきましょう。

## 第1章：GWTの基礎

GWTは、JavaデベロッパーがWebアプリケーションを効率的に開発するためのツールセットです。主な特徴として、JavaからJavaScriptへのコンパイル、クロスブラウザ互換性、そしてリッチなユーザーインターフェースの構築が挙げられます。

まずは、簡単なHello Worldアプリケーションを作成してみましょう。

“`java
package com.example.myapp.client;

import com.goo

元記事を表示

【遊びながら脳トレ！】色違いパネルを探せ！HTML & JavaScriptで作る間違い探しゲーム

# はじめに

今回は、HTMLとJavaScriptを使って「間違い探しゲーム」を作成します。複数のパネルの中から1枚だけ色の違うパネルを探し出し、正解すれば次のステージへ進むというゲームです。ステージが進むごとに難易度が上がり、パネルの数が増えたり、色の違いがわかりづらくなったりします。

JavaScriptを学びながら遊べる楽しいゲームを一緒に作りましょう！

## ゲームのルール

1. 複数のパネルの中から1つだけ色の違うパネルをクリックします。
2. 正解すれば、次のステージに進みます。
3. ステージが進むと、パネルの数が増え、色の違いが少しずつわかりづらくなります。
4. 間違えるとゲームオーバーです。リトライボタンを押すと最初から挑戦できます。
5. 正解するたびにスコアが加算されます。何回連続で正解できるかチャレンジしましょう！

## ゲーム画面
![スクリーンショット 2024-09-13 18.41.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/a8dde9

元記事を表示

link_toメソッドを使った範囲リンクとネストした個別リンクの実装方法

この記事はプログラミング学習者がアプリ開発中に躓いた内容を備忘録として記事におこしたものです。内容に不備などあればご指摘頂けると助かります。

#### link_toメソッドを使って範囲リンクと複数のlink_toをネストさせてそれぞれのリンクを設置する

この記事ではWebサービス(Xのクローンサイト)を作成中に遭遇したちょっとした壁？についてお伝えしています。

Webサービス上で他のページへのリンクを貼る際にlink_toメソッドは皆さんお使いになると思います。

以下はリンクのサンプル画像とサンプルコードです。

`ホーム`のところにカーソルを合わせてクリックすれば`root_path`へのリンクにアクセスできます。

![スクリーンショット 2024-09-12 20.18.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508918/dcc486de-01ce-f2d8-0814-dc8595d1a56f.png)

“`ruby:_nav.html.slim
ul

元記事を表示

【備忘録】リフターを防げ！　「見本くん」【claude】

ClaudeにHTML、CSS、JavaScriptを使って、商品陳列時の盗難防止用ダミーPOPを作成するWEBアプリを生成してもらったので、忘れないように記録しておきます。

https://claude.site/artifacts/fe9b88dc-efdb-4ecf-aeec-61a490e9b452

### ▫️できたもの

こんな感じのものができあがりました。

（↑入力する画面）

（↑印刷してラミネートかける前）

### ▫️

元記事を表示

デベロッパーツールって便利だなぁ…

お疲れ様です。

今週はずっと自己紹介ページの編集をしておりますが、「なんでここの空白は埋められないんだろう…」という壁にぶち当たり、様々な要素にmarginやpaddingを書き足したりしておりましたが変化なし…
こういう時はGPT先生だろうと思い、質問してみましたが解決できず…

「どうしようかなー」と思い、ネットで検索したりしていたところ、F12キーで開けるコンソールのことを思い出し、何となく開いて、デベロッパーツールなるものにたどり着きました。

![09111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/db304a1b-611d-e091-8efc-cdf8dca90699.png)

デベロッパーツールを開き、「要素」を選択、自分がこれまで書いたHTMLのコードが、ページ上のどこにあたっているかを見ていきましたら…

あ　り　ま　し　た:sob::sob::sob:

画像にある「職歴」というh2タグと、その下にtableタグで囲った経歴の間に謎の空白があって悩んでいまし

元記事を表示

Angularと戯れる⑦

# はじめに
[Angularチュートリアル：Tour of Heroes](https://v17.angular.jp/tutorial)を読み進めていきます。

# 開発環境
– OS: Windows10
– Nodeバージョン: 18.18.0
– Angular CLI バージョン: 17.3.8
– エディタ: VSCode

# 6. サーバーからデータの取得
[6. サーバーからデータの取得](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt6)を読んでいきます。

## 何をやるの？
今までは何かしらの処理をするメソッドを定義し、それを外部から呼んでいました。

この章では、API経由でメソッドを呼び出して処理をするということをやっていきます。

そのための下準備として以下を実施します。

### HTTPサービスの有効化
[HttpClient](https://v17.angular.jp/api/common/http/HttpClient)の利用により、HTTPを通してリモートサーバと通信できるよう

元記事を表示

複数のクラスにCSSを効率よく追加する場合のショートカット（ctrl+F, cmd+D, Shift+矢印, Shift+cmd+矢印, ）

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。今回はHTML,CSSでウェブサイトを模倣してみた時、クラスにCSSを追加する時にどうすれば効率よく出来るか考えてみました。

## トライ内容
Macでのトライ内容になります。
1. HTML内で、cmd + F で対象のclassを探す
1. cmd + Dで同じclass名を選択し、cmd + Cでコピー
1. CSS内にcmd + V でペースト
1. Shift+矢印で余分にコピーした部分で削除したい部分の始点に移動
1. Shift+cmd+矢印を使用し、余分にコピーした部分で削除したい部分の終点まで選択
1. backspaceで削除

### 使用例
以下のHTMLの記述があります。

“`html

    • 元記事を表示

    Angularと戯れる⑥

    # はじめに
    [Angularチュートリアル：Tour of Heroes](https://v17.angular.jp/tutorial)を読み進めていきます。

    # 開発環境
    – OS: Windows10
    – Nodeバージョン: 18.18.0
    – Angular CLI バージョン: 17.3.8
    – エディタ: VSCode

    # 5. ナビゲーションの追加
    [5. ナビゲーションの追加](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt5)を読んでいきます。

    ## アプリ構成
    ![nav-diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3873589/21ca20d8-d4b6-faf6-3a02-f2ebecb00a5a.png)

    https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt5 に添付されている図より。

    1. アプリのトップ画面にダッシュボード用

    元記事を表示

    Angularと戯れる⑤

    # はじめに
    [Angularチュートリアル：Tour of Heroes](https://v17.angular.jp/tutorial)を読み進めていきます。

    # 開発環境
    – OS: Windows10
    – Nodeバージョン: 18.18.0
    – Angular CLI バージョン: 17.3.8
    – エディタ: VSCode

    # 4. サービスの追加
    [4. サービスの追加](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt4)を読んでいきます。

    ## サービスの必要性
    チュートリアルでは、なぜサービスが必要なのかについて記載されています。

    今まではコンポーネント内で値の取得を行ってきました。
    しかし本来コンポーネントはデータの受け渡しに集中し、それ以外のロジック面（データの取得や保存、編集など）はそれを責務とする人に委託すべきです。
    その「それを責務とする人」というのが、「サービス」です。

    MVCのC（Controller）に該当するポジションという感じでしょうか。

    ## 関連コマンド
    `ng gen

    元記事を表示

    Angularと戯れる④

    # はじめに
    [Angularチュートリアル：Tour of Heroes](https://v17.angular.jp/tutorial)を読み進めていきます。

    # 開発環境
    – OS: Windows10
    – Nodeバージョン: 18.18.0
    – Angular CLI バージョン: 17.3.8
    – エディタ: VSCode

    # 3. フィーチャーコンポーネントの作成
    [3. フィーチャーコンポーネントの作成](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt3)を読んでいきます。

    ## 関連コマンド
    ### コンポーネント作成
    `ng generate component %コンポーネント名%`
    今回は以下のコマンドを実行。
    `ng generate component hero-detail`

    これを実行することで、src/app/app.module.component.tsにhero-detailについての記載が追加されます。
    “`TS:src/app/app.module.ts
    import {

    元記事を表示

    Angularと戯れる③

    # はじめに
    [Angularチュートリアル：Tour of Heroes](https://v17.angular.jp/tutorial)を読み進めていきます。

    # 開発環境
    – OS: Windows10
    – Nodeバージョン: 18.18.0
    – Angular CLI バージョン: 17.3.8
    – エディタ: VSCode

    # 2. リストの表示
    [2. リストの表示](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt2)を読んでいきます。

    ## ソースコードを読み解いてみる
    ### アプリの構成
    ![tour-of-heroes_2_show-list.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3873589/cf1effb1-d4cb-5564-a10c-56b469efac0a.png)

    – Heroesインタフェースにのっとったデータ構造を持つmock-heores.tsを作成（データ自体はモック）
    “`TS

    元記事を表示

    Angularと戯れる②

    # はじめに
    [Angularチュートリアル：Tour of Heroes](https://v17.angular.jp/tutorial)を読み進めていきます。

    # 開発環境
    – OS: Windows10
    – Nodeバージョン: 18.18.0
    – Angular CLI バージョン: 17.3.8
    – エディタ: VSCode

    # 1. ヒーローエディター
    [1. ヒーローエディター](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt1)を読んでいきます。

    ## 関連コマンド
    ### コンポーネント作成
    “`
    ng generate component コンポーネント名
    “`
    コンポーネントを作成したいフォルダに行き、このコマンドを実行することで、新規コンポーネントのフォルダが作成されます。

    ## ソースコードを読み解いてみる
    ### インターフェース
    #### インターフェースについて
    「このオブジェクトはこういう値を持っている」という制限をかけるための手法です。

    たとえば、Studentというオブジ

    元記事を表示

    Angularと戯れる①

    # はじめに
    Angularについて勉強しています。
    学んだことを自分なりにまとめて書いていきます。
    [Angularチュートリアル：Tour of Heroes](https://v17.angular.jp/tutorial)を読み進めていきます。

    # 開発環境
    – OS: Windows10
    – Nodeバージョン: 18.18.0
    – Angular CLI バージョン: 17.3.8
    – エディタ: VSCode

    # プロジェクトの作成
    [プロジェクトの作成](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt0)を読んでいきます。

    ## 関連コマンド
    ### ワークスペースの作成
    “`
    ng new ワークスペース名 –no-standalone
    “`
    Angularアプリの土台となるリソースが格納されたフォルダが作成されます。

    チュートリアルにもあるとおり、スタンドアロンを無効とするオプションを添えて実行します。

    ### アプリケーションの起動
    “`
    ng serve –open
    “`
    —

    元記事を表示

    OTHERカテゴリの最新記事