今さら聞けないHTML　

2024.07.21
OTHER

今さら聞けないHTML

目次

1. title

CSS入れ子を道草食べすぎながら理解する

# はじめに
道草って美味しいですよね。世の中には多種多様な道草があります。シロツメクサとかいい感じな味がして美味しいですし、たんぽぽはなんかしらんが刺身の上に乗っていますし、よもぎは普通に食えます。ながすなりです。

そんな戯言はさておき、CSS入れ子ってなんぞ？ってなりました。よくわかんなかったので、調べました。そうしたらさらにわかんない概念がたされましたので、それを調べたら、さらによくわかんなくてさらに調べて、わかんなくて…世の中こんなんばっかです。

**…神は死んだ**

天を仰いでそう言いたくなりましたが、頑張って一つ一つ理解しました。私だけでその理解を占有するのも勿体無いと思ったので、無知な皆様にも共有することにしました。…えっ？もう知ってるって？…次行きましょう。

ちなみに筆者はゴリゴリのサーバーサイドなんで、html,cssは齧ったくらいしかないです。適度な塩加減で微妙に美味しいのだけは知ってます。なので詰まるところが多すぎると思うのですが、ニコニコしながら見るのが多分エンタメ的に正解です。

# CSS入れ子ってなんぞ？（1回目）
CSS入れ子っ

元記事を表示

YAMLでHTMLを書いてみる

## 概要

タイトルからして「お前は何を言ってるんだ」って感じですが、HTMLに変換できるデータ構造をYAMLの仕様の範囲内で記述して[Haml](https://haml.info/)や[Pug](https://pugjs.org/)みたいなことができないかと考えてみました。

## 仕組み

JSON界隈には[JSONML](http://www.jsonml.org/)というXMLをJSONで表現する方法があります。厳密には違いますが、XMLを表現できるのならHTMLも表現できるのではないか、また、YAMLはJSONの(ほぼ)スーパーセットであり、JSONで表現できるならYAMLでも表現できるので、JSONMLをYAMLの仕様で書いてHTMLに変換できたら見やすく書けるんじゃないかという気がしたので試してみた感じです。

## JSONMLの仕様

JSONMLの仕様をざっくりと説明すると、以下のような感じです。

– 要素はリスト形式で表す
– リストの1つ目は必ずタグ名を表す文字列であり、省略不可。
– リストの2つ目は属性を表すオブジェクトである、ただしこれは省略可能。

元記事を表示

expressとmongoDBを使って簡単なコミュニティーを作ろう！

expressとmongoDBを使って簡単なコミュニティーを作ろう

アプリの紹介

このアプリはコメントを残すアプリです
コメントを読んだり、作成したり、編集したり、削除することができます！

それだけです(笑)

目次

事前設定

データベースのスキーマを作ろう

CRUDのR

CRUDのC

CRUDのU

CRUDのD

動作確認

事前設定

このアプリではexpress, mongoose, ejsを使うため、node環境が整っていることと、mongodbがインストールされていることを前提にします。

まず、npmでexpress, mongoose, ejs,method-overrideをインストールします。

“`
npm i express mongoose ejs method-override
“`
そして、require

元記事を表示

VS Codeの拡張機能「Live Preview」

## はじめに
VScodeでHTMLやCSSを編集する際、編集のたびに保存してブラウザを開いて確認をするのって面倒ですよね。そこでオススメな拡張機能を記載します。

## Live Preview とは？
Live Previewは、VS Code内でリアルタイムにHTMLファイルのプレビューを表示できる拡張機能です。この拡張機能を使うと、ブラウザを別ウィンドウで開く必要がなく、エディタ内で直接Webページの見た目や動作を確認できます。

## 使い方
VSCodeを開き、サイドバーの「拡張機能」で「LivePreview」を検索してダウンロードします。
[![Image from Gyazo](https://i.gyazo.com/2770c6925908879b8bdf13173fc1f9be.png)](https://gyazo.com/2770c6925908879b8bdf13173fc1f9be)

編集しているHTMLファイルを右クリックして「プリビューの表示」を選択するか、右上の「プリビューの表示」アイコンを押すとプリビュー画面を確認できます。
[![Image

元記事を表示

HTML初心者必見！ゼロから学べる実践入門

HTML（HyperText Markup Language）は、ウェブページの構造を定義するための標準的なマークアップ言語です。

HTMLの基本的な要素とその使い方を紹介します。
___
“`1. HTMLドキュメントの基本構造

ドキュメントタイトル

“`
``: HTML5であることを宣言します。
``: ドキュメントの言語を日本語に設定します。
``: メタデータ（ドキュメント情報）を含むセクションです。
``: ドキュメントの文字

元記事を表示

CodeSandboxのコンソール表記（HTML）のやり方

## 初めに
初めて使った[CodeSandbox](https://codesandbox.io/)のコンソールのHTML表記方法でつまづいたのでまとめます
## 問題
[CodeSandbox](https://codesandbox.io/)でコンソールを表示した際、HTMLの形で表示されず困りました
例）
“`JavaScript:exsample.js
const li = document.createElement(“li”);
console.log(li)
“`
↓ 理想のコンソール表記
“`:理想

“`
↓ 現実のコンソール表記
“`:現実
▶ HTMLLIElement

—————————–
”▶” から展開が可能で以下のようになる（一部抜粋）
type: “”
value: 0
ATTRIBUTE_NODE: 2
CDATA_SECTION_NODE: 4
COMMENT_NODE: 8
・
・
・
“`
## (一応）解決
Udemyを使って勉強をしていたため、Q&Aを見たところ答えがあ

元記事を表示

今日の発見 input要素にv-modelをしたときにstringになる

まずこちらをご覧ください。

https://play.vuejs.org/#eNp9kc1OwzAQhF/F8qWtVBIQnKq0EqAe4AAIOPoSpZs0xX+y16EoyruzdpTSA+rNmpmd/Vbu+b21WReAr3jhK9daZB4w2I3QrbLGIeuZg3pZGWUDwo4NrHZGsRnNzISujPbIdFBsHWPz68WkKd+QNo3N54v1Bn8smDqms66UAShb5ONSWlcgKCtLBHozVuxvUn7F+j51DUORk5a8VlMp666U2YFcC06NgrM8luRnLXzJ0RNN3TbZwRtNN/ZxXvCI1UpwrxZbohWc1kQneqWU5vs5aegCLCe92kP19Y9+8MeoCf7mwIPrQPCTh6VrAEd7+/ECR3qfTKIPktIXzHfwRobIOMYegt4R9lku0T6ln2p18+m3RwTtp6MiaEwOKS84fdrjhdP/cG+zuzQn9MCHX8LatqY=

`num`にはリアクティブな0が入ってて、`msg`には`num`の値の型を`computed

元記事を表示

QBの学内順位を表示したい

# はじめに
Question Bankの国試問題を解いていると、問題数の進捗具合を示すグラフがありますが、その図には学内順位が載っていないと思います。今回はグラフのプロットを、Chromeの拡張機能を使って読みとり、自分の順位を把握できるツールを作ったのでメモしてます。

# 現在の環境
– Windows11
– Google Chrome バージョン: 126.0.6478.182
-Mac book pro M1でも動作確認済み
## ステップ1: ファイルの作成
以下のファイルを1つのフォルダにまとめます：

– manifest.json
– popup.html
– popup.js
– imagesフォルダ内の画像ファイル:
icon16.png
icon48.png
icon128.png
background.png

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3695780/a947877b-a8a2-5f47-1cc7-234ee422f76e.png)

#

元記事を表示

VScodeで指定した範囲にdivタグをつける

こんにちは、テリスです！

webでデザインをしていたら、役立つショートカットを知りましたので残しておきます。

HTMLをコーディングしているときにこのようなことはないでしょうか。
“`

title

a
b
c

“`
bodyの中身の最初と最後にdivタグをつけたい！と

そんな時は、divタグをつけたい範囲を選んで
〈Mac〉command+shift+p
〈Windows〉control+shift+p
を押すと、コマンド一覧が開けます。

その後、検索欄に’wrap’と打つと
Emmet: Wrap with Abbreviation
と出てくるのでクリック、Enter。

そして、再度記入する欄が現れるので’div’と入力してEnter。

これでbodyの中身の最初と最後にdivタグがつきました！

元記事を表示

HTML,CSS,Ruby,Railsなどの参考資料まとめ(自分用)

HTML

HTML辞典

→HTMLのデジタル辞書。わからなくなったらここから引く。

https://html-coding.co.jp/annex/dictionary/html/

CSS

・CSS辞典

→CSSのデジタル辞書。わからなくなったらここから引く。

https://html-coding.co.jp/annex/dictionary/css/

https://www.tagindex.com/stylesheet/properties/

Rails

・Railsガイド

→Railsのデジタル辞書。わからなくなったらここから引く。

https://railsguides.jp/

元記事を表示

html 画像表示タグ『imgタグ』『iframeタグ』について

# 目次

| 項番 | ページ内リンク | 説明 |
|:—-:|:————-|:————-|
| 1 | [1.はじめに](#1-はじめに) ||
| 2 | [2.imgタグについて](#2-imgタグについて) ||
| 3 | [3.iframeタグについて](#3-iframeタグについて) ||
| 4 | [4.さいごに](#4-さいごに) ||

更新履歴
2024/07/19　@junerさんから qiitaの見易さ・記事コード修正案を頂きました。☺
記事コードが余りわからなかったので、非常に助かりました！☺

https://qiita.com/juner

※勝手に載せてるので、怒られたら消します。
2024/07/19　初稿

# 1-はじめに
html における画像を挿入する方法
・imgタグ
・iframeタグ

の解説記事

※「絶対パス」もしくは「相対パス」の記事は後日書きます。

「絶対パス」
『`https://www.~~~~~~.com/img/sample.jpg`』
インターネットにある『`https

元記事を表示

【HTML, CSS】CSS Tips

# CSS Tips
作ってみて、ナルホドと思った CSS Tips を書き溜める。

## プログレスバー

“`:html

“`

“`:css
.progress {
width: 100%;
height: 20px;
background-color: gray;
border-radius: 15px;
}

.progressBar {
width: 25%;
height: 20px;
background-color: red;
border-radius: 15px;
}
“`

#### できあがり :cooking:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455342/f07716f0-597c-c627-240c-0c0b181dd875.png)

`.progressBar`の`w

元記事を表示

STUDIOに触れて思うこと

# STUDIOに触れて思うこと

コーディング（HTML&CSS）のブロック要素、インライン要素の考え方が進歩した！！

以前は「　`

`はブロック要素だから、、　」と要素に囚われてしまっていました。
STUDIOに触れることで、`div`をBOXと表現しており、その考え方にしっくりきました。
良くも悪くも、一つのことをやり込んでからしか次に進めないのが自分の足枷になっていました。今回でいえば HTML&CSSの入口のところでウロウロしてました。

## 何がしっくりきたのか
〔１〕　外枠（`

`）と中身（`インライン要素`）の指定するべきことが明確になった
親要素に指定すべきこととインライン要素に適応すべきことがごっちゃになっている自覚はありましたが、何がどうごっちゃになっているのか、についてはわかっていませんでした。

〔２〕単位（`px`／`％`）の使い分け
親要素には`px`、子要素には`％`ね！と決めたがりの自分がいました。
それは、「この指定をすると、見た目はこう反映される。」がよくわかっていなかったから。今も完全にはわかりませんが、相対的な話なんだな、

元記事を表示

サーバーが機能しているかを確認するもの(?)をjsとhtmlで書く

# 初めに
今回はサーバーが稼働しているかを確認するもの(※)をhtmlとjsで書きます
※…サーバからの応答があれば全部200で返します
# ファイル構成
今回はhtmlファイル一つで大丈夫です
# コードをコピペ
“`html:main.html

サーバーチェッカー

テスト

※このコ

元記事を表示

たくさんあるCSSの中央揃えの方法をまとめた

## はじめに
CSSでスタイリングするときに必ずと行っていいほど登場するのが中央揃えです。

上下、左右、もしくはその両方を実現するために、いろいろな方法があります。

今回はその方法について網羅的にまとめました。

## 左右中央揃え

### Flexboxを使う方法
#### 概要
`display: flex;`
`justify-content: center;`
の2つの設定値で実現できます。

ほとんどすべての要素に適用可能です。
（ブロック要素、インライン要素、テキスト、画像など）

#### 実装例
“`css:index.css
.container {
display: flex;
height: 150px;
background-color: #f0fca6;
justify-content: center;
}
.item {
padding: 20px;
margin: 10px;
height: 50px;
background-color: #3498db;
color: white;
}
“`

“`htm

元記事を表示

O型のHTML記載方法まとめ

## はじめに

__　【HTML（HyperText Markup Language）】
　（ハイパーテキスト・マークアップ・ランゲージ）を__
　記載する上で、最低限必要そうなことを、まとめました。

————————————————————–

## ①HTMLの基本構成
#### 以下の4つが基本的な構成となります。
1･･･ DOCTYPE宣言（ドックタイプ　宣言）
HTML文書の仕様、バージョンタイプを記載

2･･･ htmlタグ（エッチティーエムエル　タグ）
HTML文書であることを示すタグを記載

3･･･ headタグ（ヘッダ　タグ）
HTML文書全体に関する指定などを記載

4･･･ bodyタグ（ボディー　タグ）

元記事を表示

【JavaScript】HTMLCollectionって何！？

## ▼最初に
DOM操作において必ず触れる”HTMLCollection”。これを理解しないと先へは進めない。そんな壁にぶち当たり、調べて分かったことをかみ砕いた内容で記事にしたいと思います。

## ▼”HTMLCollection”って何？
初見の方は **HTMLCollectionって何？** ってなりますよね。
調べてみると….。

:::note info
”HTMLCollection”は、HTML文の要素を配列風のオブジェクトにまとめたもの
:::

例としてHTML文の要素とは以下のことです。
“`HTML:HTML

Example

Example

Example

“`
HTML文を配列風オブジェクトにしたものと言ってもイメージ沸かないので実際に見てみましょう。

![スクリーンショット 2024-07-14 151

元記事を表示

ローカルのsvgとかhtmlが参照している画像を埋め込んで1ファイルにする

“`python
#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import sys
import os
import re
import base64
import mimetypes
import xml.etree.ElementTree as ET
from bs4 import BeautifulSoup

namespace = “”

def usage():
f = os.path.basename(__file__)
a = f”””
usage:
{f} [filepath]
“””
print(a)

def check_file_extension(f, check):
r, ext = os.path.splitext(f)
return ext.lower() == “.” + check.lower()

def isSvg(f):
return check_file_extension(f, “svg”)

def isHtml(f):

元記事を表示

HTMLのaタグを使ってPOST送信する方法。

## はじめに
Spring Securityを用いてログイン・ログアウト機能を実装していた際、POSTリクエストを送りたいところ、aタグではGETリクエストが送られてしまうため、下記実装を行いました。

formタグでpostにしてダイレクトに送ってもいいんですが、aタグを使用して送りたいケースも仕様によっては考えうるケースかと思います。

この辺に疎いので一つひとつ実装解説も併せて、備忘録という形で残したいと思います。

※誤りありましたら、ご指摘いただけますと幸いです。

## 想定読者
初学者の方
フロントも頑張りたい方

## 実装の中身

#### html

“`

Logout