今さら聞けないHTML　

自前PCでjava・HTML・SQLの環境構築

# java・HTML・SQLの環境構築

## 1.各種パッケージのインストール
・Eclipseのインストール
　※コードエディタ java・HTML開発で使用
　[統合開発環境 Eclipse 日本語化プロジェクト](https://willbrains.jp/ “統合開発環境 Eclipse 日本語化プロジェクト”)
　
　【インストール手順】
　引用：[No.2【Eclipseのインストール】プログラミングは一部の方だけのものではない！はじめてのプログラミング入門講座（アルゴリズムとJava基礎）動画付き](https://qiita.com/kunchan2/items/a4af8544b0064a1c7fa8 “【Eclipseのインストール】”)

・xamppのインストール
　※SQL環境を構築するためにインストール
　[XAMPP Installers and Downloads for Apache Friends](https://sourceforge.net/projects/xampp/ “XAMPP Installers and Downloads fo

input type=”date” に元号で入力する方法

type=”date”のinputタグに元号で日付を入れたいという需要はたびたびありまして，いろいろと解決方法を探していく中で1つ方法を見つけました。

対策はいろいろと公開されていますが，どれもほしいものとちょっと違いました。

1. セレクトボックスを使う方法
100年分とか全部optionにするのも….うーん
1. 西暦・元号をセレクトボックスにして年月日を別inputにする方法
月日だけの入力インターフェースがないので，セレクトボックス増えちゃうし，2月31日みたいなのを選ばせないようにスクリプトを組むのも面倒….
1. 西暦で入れたあとにそれを元号で表示する方法
そもそも元号で入力したいので，これも違う….

ということで実装です。
“`javascript:hoge.js
window.addEventListener(‘DOMContentLoaded’, ()=> {
document.getElementById(‘genDate’).addEventListener(‘blur’, ()=>{
var genStr = d

完全未経験（元消防士）からWEB系エンジニアへの道　

昨日および本日はProgateで、HTML,CSSの初級を引き続きやった。

今日の学習内容の整理　アウトプットを兼ねて　

・レイアウトの基礎である、ヘッダー⇨メイン⇨フッターを学習。
　div要素をグループ化するために使用
　「header」、「main」、「footer」というclass名を持った3つのdiv要素でレイアウトを分割

・エディタの補完機能⇨タグ名を入力し、「Tab」キーを押すと終了タグまで補完してくれる。

・リストのマークをなくす
li要素にlist-styleプロパティを用いてnoneを指定すると、リストの先頭のマークを消すことができる。基本的に先頭の黒点は必要ない。
黒点なくす機能は、気になっていたから学習できて嬉しかった。

・ヘッダーの中身を横並びにする
HTMLで記述した要素は基本的に縦に並んでいくので、横並びにするにはCSSが必要
floatプロパティを用いることで、指定した要素を横並びにすることができる
float: left;を指定すると要素が左から順に横に並ぶ。

・ヘッダーの余白の調整について
『padding』内側の余白
padding:

やってみたシリーズ5編2部 JavaScript html , css は1部になる

これは、htmlとcssとJavascriptを駆使して動的に静止画の動化をしようとする、試みのスクリプトである。
実践的に、プログラムの謎解きを収録した実話で、その証拠を示すものとする。
ここまで来ると、ぺらぺらとめくるだけでは済まず、詳細な内容を検討する必要があり２部に分割して、載せる事としました。

https://qiita.com/tattyan3/items/1580a7696e3446f11ae4
2部　javascript

stdio.js
“`javascript
// ver. 1_00(test)

/*
2024/03/14-03/21-
///////////////////////////////
giam フリーソフト　Gif animetion 使い方 https://freesoft-100.com/review/giam.html
https://qiita.com/tattyan3/questions/e5afd5ff8689534f3f48 */
//alert(‘studio.js’);

const box_1 = docume

やってみたシリーズ5編1部 html , css js は2部になる

これは、htmlとcssとJavascriptを駆使して動的に静止画の動化をしようとする、試みのスクリプトである。
実践的に、プログラムの謎解きを収録した実話で、その証拠を示すものとする。
ここまで来ると、ぺらぺらとめくるだけでは済まず、詳細な内容を検討する必要があり２部に分割して、載せる事としました。

1部　htmlとcss

studio.html
“`html







クリック可能な要素は div とかじゃなく、ちゃんと button とかにしよう

## 2024/5/1 (投稿日同日) 追記

本記事の関連記事に出てきて気付いたのですが、すでに同じような記事がありました。こちらでは、コードについてより詳しく扱っておられるようです。

https://qiita.com/sukoyakarizumu/items/978df93755c4720d5cdc

## 具体的には

たとえば、クリック可能な要素を用意したいとします。これは `div` タグでも実現可能です。

https://codesandbox.io/embed/xgmc68?view=split&module=%2Findex.html

でも、こういうのは `div` タグじゃなくて、ちゃんと `button` タグとかで書きましょう、という話です。

https://codesandbox.io/embed/4ywk5g?view=split&module=%2Findex.html

## div だと何がマズイ？

### アクセシビリティ

「アクセシビリティの配慮がなされている」を言い換えると、「環境 (デバイス) の違いや障がいの有無などに関わらず、誰

DOM/ Node/ Element の違い

# まとめ
– **DOM（Document Object Model=ドキュメントを物として扱うモデル）**：プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造
DOMツリーという階層構造を定義しているものがDOMという仕組み
– **Node**：DOMツリー（オブジェクトツリー）を構成する一つ一つの要素
– **Element**：Nodeの種類の一種（Element型Node）

# 詳細
## DOM
1. **プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造**
JavaScriptからHTMLドキュメントに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を変更したり、要素のサイズや位置を取得したり、こういったものはすべてDOMのAPIを使うことで操作できる。
1. **DOMツリー（オブジェクトツリー）という階層構造を定義しているものがDOMという仕組み**
![image.png](https://qiita-image-store.s3.ap-northe

【フロントエンド】ラジオボタンをカスタマイズしよう【初心者向け】

# はじめに

この記事では、`input[type=radio]` を用いたスタイリッシュなラジオボタンのカスタマイズ方法を解説します。次のような悩みを持つ方の参考になれば幸いです

– ラジオボタンが希望のデザインにならない
– スマートフォンで表示が異なってしまう
– ライブラリを使用した経験はあるが、自作はしたことがない

# 今回のゴール

スマートフォンのGoogle Chromeおよびデスクトップ版Chromeで統一された下記のデザインのラジオボタンを作成することです。

# デフォルトのラジオボタンの課題

– ウェブブラウザ表示
![スクリーンショット 2024-04-26 11.23.30.png](https://qiita-image-store.s3.ap-nort

Bootstrapを初めて使った話

# Bootstrapってなんだ…？
・HTML／CSS／JavaScriptから構成されるWEBフレームワーク
　→簡単にボタンやフォームなどを装飾できる！
公式ドキュメント：https://getbootstrap.jp/

# 具体的にどう使うの？
・htmlのclassにbootstarpで定義されたクラス名を書く

“`html:普通のボタン
Primary
“`

“`html:bootstrapを使ったボタン
Primary
//class=”btn btn-primary”を追記
“`

![image.png](https://qiita-ima

【css】少し下に下がる日付フォームを調整したい

## 問題
input[type=”date”]を使った時
iPhoneでサイトを確認すると
日付フォームだけ少し下に下がっている
これを修正したい

※検証ツールでレスポンシブでの確認では、下がっていない
※iPhone本体(safari/chrome両方)で見ると少し下がっている

## 解決方法
“`app.sass
input[type=”date”] {
padding: 0.5em; /* 入力フィールドのパディングを調整 */
vertical-align: middle; /* 垂直方向の中央揃え */
}
“`

## gpt回答
input type=”date” が少し下に下がる理由や、日付を入力すると元に戻る現象については、ブラウザやデフォルトのCSSスタイルに起因する可能性があります。
具体的な理由としては、以下の点が考えられます。

ブラウザのデフォルトスタイル:
各ブラウザは、input type=”date” などの入力要素に独自のデフォルトスタイルを適用しています。これにより、同じ要素でもブラウザ間で見た目や挙動が異なることがありま

HTML

Introduction to HTML

HTML, short for HyperText Markup Language, is the standard markup language used to create web pages. It forms the backbone of the World Wide Web by structuring content and providing a framework for displaying information on the internet.

History and Evolution of HTML

HTML was first introduced by Tim Berners-Lee in 1991, as a means to share documents among scientists. Since then, it has undergone several revisions and update

擬似要素（::before ::after）が効かない！！！

### 頻出なのに毎回調べては忘れてしまう問題、擬似要素が効かない問題！！！！

初歩的なことですが、よく忘れてしまう問題なので覚書メモです。

一番最初に確認して欲しい点として、
“`

---

“`

上記の人たちに擬似要素をつけようとしてはないか…
（私の場合ほぼほぼこれで解決となります。外側にdivをつけて解決！）

**特に““に擬似要素をつけたいことが多く、**
ここを重点的に覚えておきたいがためだけに記事を書きました。

**`
`,``,`

---

`,`

`,``に擬似要素は効きません！！**

—

他の救済方法として、下記も記載しておきます。
* `content: “”;`でcontentプロパティを指定する
* `display: block;` or `display: inline-block;`にする
* 親要素に`position: relative;`指定をする
* z-indexを確認する

上記を確認すれば、大抵は擬似要素が

元記事を表示

コンピュータはindexというファイルしか気を利かせて読み込まない

この記事ではGitHub Pagesやレンタルサーバーで初めてデプロイ(サービスリリース)した人が
“`
「ちゃんとデプロイできてるはずなのにうまく表示されない！涙😭」
“`
と悲しんでいるので、そんな人を1人でも減らすための記事になります。

チュートリアル通りデプロイの手順を踏めているはずなのに、GitHub Pagesで発行されたリンクはアクセスしても404エラー(ファイルが存在しない)になっている。そういった方は、rootディレクトリのトップ(githubのリポジトリの一番上の階層)に**index.html**というファイルが存在しているかを確認し直してください。

ちなみにgithub上でのrootディレクトリがどれに相当するかというと


の赤枠の部分のファイルの階層のことを

元記事を表示

Bootstrapでフッターを下部に固定したいときの書き方

# はじめに
Bootstrap4.6を使用してサイトを作成した際に、<​body><​/body>の中のコンテンツが少ないと中身に合わせてフッターの位置が上に上がってしまっていました。
こんな感じです。


下に空間があってなんとなくかっこ付かないので、この表示を解消する方法を探してみることにしました。

# ちょっと違う…となったやり方
「Bootstrap　フッター　固定」というような内容で検索して良く見つかるのが「fixed-bottom」を設定するという方法です。
実際にfotterタグの部分に追加してみました。
“`html:app/views/layouts/_footer.html.erb

元記事を表示

完全未経験（元消防士）からWEB系エンジニアへの道　

私は、今年の3月で消防を退職しWeb系エンジニアを目指す２６歳男　すず。
こういった、ブログは初めて書く。続くかは、分からないけどなるべく長く続いたらいいなくらいの気持ちで記録として残していこうと思う。

一番最初のきっかけは、WEBデザイナーになりたいと思ったことからIT業界に興味もった。
そこから、WEBスクールやYouTubeでデザインの勉強をしたが、表向きはフルスタックに活躍できる人材を目指して、プログラミング学習を始めた。（まだ半月くらい笑）

正直、未経験からどうやってITの世界に飛び込んでいけばいいか道筋が曖昧で、それに悩んでいる未経験の人間も多いのではないだろうか。
そんな中、本日『Web系エンジニアになろう』という本を、たまたま図書館で見つけた。
そこには、私が求めていた内容が分かりやすく、且つ、見やすくシンプルな白と青を基調としたデザインで眠くならずにスラスラと読めた。
『Web系エンジニアとはなにか』から『Web系エンジニアになる方法』、『WEBスクールの選び方』、『Web系エンジニアのキャリア形成』など基礎から必須知識まで載っているため未経験な人間からすると非常

元記事を表示

javascriptで作るゲーム【ジャンケンマンフィーバー】ロジック編

https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A3%E3%83%B3%E3%82%B1%E3%83%B3%E3%83%9E%E3%83%B3_(%E3%82%A2%E3%83%BC%E3%82%B1%E3%83%BC%E3%83%89%E3%82%B2%E3%83%BC%E3%83%A0)

こいつのクローンを作ろうと思います笑

あ、ちなみにプログラムとか関係なく、単に遊びたい方は
見た目もそのまんまのゲームを見つけたのでそちらへどうぞ。
（権利的なものは大丈夫なんだろうか？）
https://hitoikigame.com/blog-entry-8538.html

# STEP1: ロジックを完成させる

MVCじゃないですけど、見た目は完全無視して、Controller的な部分から作成。（Modelもか？）
コンソール上で対話すればそれっぽく動くところまでを完成させます。
早速ですけど、できあがりはこちら。

“`javascript
class JankenFever {
#status; // プライベートプロパティ、ゲーム

元記事を表示

Javascriptでイベントカウントダウンを作る

# Javascriptでイベントカウントダウンを作る！
　この記事を読むと次のようなカウントダウンタイマーが作れるようになります。
https://kanetyengineer.github.io/Exam_Support/

詳細説明はコード全文の後にあります。しっかりと内容を学びたい方は参考にしてください。コードは私的利用に限りコピペ使用しても構いません。
## １.コード全文

### HTML
“`html:indx.html

元記事を表示

GAS(Google Apps Script)とJavascriptでLINEのAPIを使い、公式アカウントでメッセージを一斉送信するアプリを作成する

# 作成しようと思ったきっかけ
> ある日HTMLだけでLINEの公式アカウントを制御してみたいなと思い作りました。

>文章見るのめんどくせーよって人はまとめてコードを書いているところが最後にあるのでそちらをご覧ください。

# 基本的なコード
> 今回はサーバーを使わないGAS(GoogleAppsScript)で作るのでまずGASのコードを書いていきましょう
“`js
//固定変数
const accesToken = “ここに自分のトークンを入れてください”;

//一斉送信
function broadCast(type,text) {
//APIでLINEに情報を送信
UrlFetchApp.fetch(‘https://api.line.me/v2/bot/message/broadcast’, {
method: ‘post’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: ‘Bearer ‘ + accessToken,
},

元記事を表示

articleタグ、sectionタグ、asideタグでアウトラインを整える

## アジェンダ
この記事では、HTMLの`article`タグ、`section`タグ、`aside`タグを用いてアウトライン（階層構造）を整える方法についてまとめます。

## タグの使い分け
### article
`article`タグは、ブログなどの記事のページではその記事全体を囲みます。また、一覧ページでは個別の記事一つ一つを囲う要素として使用されます。

### section
`section`タグは、アウトラインの構造を明示的に表現することができるタグです。これは、ドキュメント内の特定のセクションが自立したセクションとして意味を持つ場合に利用します。

※似たようなものにdivタグがありますが、divタグはsectionタグとは違いアウトラインの構造を明示的に表現したりはしない抽象化されたタグで、区切りを表す時に使います。

### aside
`aside`タグは余談や補足情報を表すためのタグです。記事の本文には関連しているものの、主要な内容からは外れる情報に使用されます。例えば、サイドバーや広告バナーの表示に便利です。

## 実際のコード例
“`html

元記事を表示