今さら聞けないHTML 

今さら聞けないHTML 
目次

【初心者向け】モールス信号でプログラミングをしてみる

## はじめに
皆さん、こんにちは。
普段はエンジニアチームで仕事をやらせてもらっています。

私たちは常に新しいものを学ぶことに重きをおいていますが、時には過去の技術を知り、使ってみることで新しい発見があると思うんですよね。

そこで、今回はモールス信号を使って学びを深めてみることにします。

モールス信号といったら、最近流行りの[あの曲](https://www.google.com/search?q=%E3%81%AF%E3%81%84%E3%82%88%E3%82%8D%E3%81%93%E3%82%93%E3%81%A7&sca_esv=ad1fe64d584e8890&rlz=1C1PWSB_jaJP1122JP1122&ei=GNbOZq-VGY7Y1e8P7tSM8QU&ved=0ahUKEwivgdiSmZeIAxUObPUHHW4qI14Q4dUDCBA&uact=5&oq=%E3%81%AF%E3%81%84%E3%82%88%E3%82%8D%E3%81%93%E3%82%93%E3%81%A7&gs_lp=Egxnd3Mtd2l6LXNlcnAiFeOBr-O

元記事を表示

Claude.aiのArtifactsのプレビューは一体どういう仕組なの?

Claude.aiの「Artifacts」、皆さん使ってますか?

HTMLの生成をお願いすると、上手にHTMLを生成してくれます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/773a2e8e-270f-add1-ed71-1798ecfa327a.png)

さらに、HTMLのプレビューまで切り替えられます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/2aad0eda-7b03-3bdd-3a72-6d228c0ec02d.png)

これは一体どういうテクノロジーでできているのでしょうか??

## 開発者ツールで確認

ブラウザの開発者ツールを使って、プレビュー部分がどうやってできているか見てみます。
すると、iFrameが見つかりました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/d

元記事を表示

ブラウザ間のデザインのズレを解消!`normalize.css`でスタイリングの土台を整えよう

# はじめに
Web開発をしていると、ブラウザごとに微妙に異なるデフォルトのスタイルに悩まされたことがあるのではないでしょうか?この問題を簡単に解決してくれるのが、**normalize.css**です。

この記事では、`normalize.css`がどのようなものか、そのメリット、導入方法、そして実際の使用例について詳しく解説します。

## **1. `normalize.css`とは?**

`normalize.css`は、ブラウザ間のスタイルの違いを統一し、Webページがあらゆるブラウザで一貫して表示されるようにするための小さなCSSファイルです。これにより、ブラウザごとのスタイルリセットが不要になり、安定したデザインを実現できます。

通常、CSSのリセットを行う際には`reset.css`が使用されることが多いですが、`normalize.css`はこれとは異なり、デフォルトのスタイルを完全に削除するのではなく、**調整**します。その結果、見た目のバランスを保ちながら、より自然なデザインを維持することができます。

### **主な特徴:**
– **デフォルトスタイ

元記事を表示

webページが表示されるまでの大まかなな流れ

# HTML,CSS,JavaScriptそれぞれの役割

**HTML:**
ページの構造を定義し、ブラウザはこれを解析してDOMツリーを構築します。

**CSS:**
ページの見た目を定義し、ブラウザはこれを解析してCSSOMツリーを構築し、スタイルを適用します。

**JavaScript:**
ページの動作を定義し、DOMの操作やユーザーインタラクションに応じた動的な動作を実現します。

**レンダリング:**
これらの要素を統合して、ブラウザはページをレンダリングし、最終的に画面に表示します。

# 表示されるまで行われていること

**HTMLの解析とDOMツリーの構築**
* HTMLの解析:
ブラウザは、最初に受け取ったHTMLファイルの内容を解析(parse)し始めます。解析中にHTMLタグを順次処理し、各要素(タグ)をメモリ上に構築します。

* DOMツリーの構築:
HTML要素が解析されると、それに基づいてDOM(Document Object Model)ツリーが構築されます。DOMツリーは、HTMLドキュメントの階層構造を表現したもので、ブラウザがペ

元記事を表示

(すべて1冊で身につくJavaScript)ローディング画面を作る

お疲れ様です。

今回もタイトルにあります通り、「すべて1冊で身につくJavaScript入門講座」の内容を勉強し、実践してみたものです。
JavaScriptのanimateプロパティを使ったものですが、指定できるプロパティ1つ1つの意味を理解すれば、こんなこともできるんだなーと感じた次第です:smiley:

転職目指して勉強をしているのですが、最近はアニメーションばかりな気がします…
とはいえ、他の教材を使ってみる前に、この参考書を1冊やり通してから考えようと思います!
qiita内でもたまに探しているのですが、初心者用でおすすめの勉強法がありましたら、お教えいただけますと助かります:sob:
やはりコードを書きまくることが最短でしょうか…

【MySQL+Node.js】要素ごとに異なるnを使って、1回目~n回目の値を集計表示する方法

# 作業記録テーブルのcontents要素について、n回目までの作業データを集計・整理したい(※ただしn≠一定)

## 作業記録テーブル(`test_log`)の概要

**特徴**
– カラムは`id`、`user`(作業者)、`contents`(作業内容)、`time`(作業時刻)、`upload_time`(記録した時刻)
– 同じ作業内容が複数回行われるが、その際の作業者・作業時刻はランダムに決まっている
– 記録した時刻

元記事を表示

display:contentsって何?どんな時に使うと便利なの?

先日、`display:contents;`というプロパティをはじめて知りました。
他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回は`display:contents;`とは何か、どんな場面で使えるのかについて紹介します。

## 1. 結論
– `display:contents;`を指定した要素は、あたかも存在しないかのように扱うことができる
– これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる
– ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある

## 2. `display:contents;` とは?
### 2-1. `display:contents;`の概要
`display:contents;`を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。

[Mdn Web Docs](https://developer.mozilla.org/ja/docs/Web/CSS/display-box)では以下のように説明されています。

> これらの要素は自

元記事を表示

【HTML/CSS】divで作られたボタンをdisableにしたのにクリックイベントが発火する原因と対策

## この記事は何

最近、フォームの送信ボタンをグレーアウトして、再度クリックされないようにする実装を行いました。一見ボタンがグレーアウトされて無効になっているように見えたのですが、実際にはグレーアウトした後にクリックされると、イベントが発火してしまい、思わぬバグが発生しました。
この記事では、その原因と対策について共有したいと思います。

## 発生した問題

以下のようなコードを使って、送信ボタンを無効化しようとしました。

“`html

上記の内容で送信する

“`

そして、ボタンがクリックされた後に無効化するためのJavaScriptを次のように実装しました。

“`javascript
function disableSendButton() {
let sendButton = document.getElementById(‘submitButton’);
sendButton.removeAttribute(‘oncli

元記事を表示

第六回: HTMLの書き方

こんにちは、[株式会社カスタマトリックス](https://www.customatrix.co.jp/)の寺尾です。

こちらは **新卒社員と学ぶWEBプログラミング** 企画になります。
可能な限り毎日更新していくのでご期待ください。

本日は第六回、「**HTMLの書き方**」を説明していきます。
まずはWEBサイトの見た目を司る二つのプログラミング言語から勉強していきます。

前回はこちら
https://qiita.com/r-terao/items/b081eecf54d4d4e52e8f

第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6

# HTMLの書き方
HTMLの書き方には少しだけルールがあります。
このルールはどこまでが「表示する内容」でどこまでが「表示しない情報」かを切り分けるために存在します。

“`構造.html




“`

元記事を表示

メモ帳でコーディングしていた話

# はじめに
## ひとこと
アクセスしていただきありがとうございます。
タイトルの通りの、メモ帳でコーディングしていた話です。
タメになるかどうかは分かりません。

## 目的
+ メモ帳でコーディングしていたことで得られた知見を共有すること()

## 検証済みの環境
+ Windows11 Home x64
+ メモ帳

## ご注意
+ この記事の情報は **2024/08/26現在** のものです

# 1.前書き
筆者は高校に入学したと同時に、部活でプログラミングを始めました。
HTMLとCSSを一通り学習し、一人で簡単なウェブページをつくれるようになりました。
そして自然とウェブページに機能を実装したいと思うようになり、JavaScriptの学習を始めました。
(今もですが)ここまで独学だったこともあり、一度、挫折しながらも百人一首を4択から選んで覚えるウェブアプリをつくり、高校で公開しました。
その後も学習を続け、高校2年生の夏ごろに全体で1000行ほどのウェブアプリを完成させました。

**…そう、メモ帳で。**

# 2.メモ帳でコーディングしていた話
## な

元記事を表示

OTHERカテゴリの最新記事