今さら聞けないHTML　

HTML & CSS学習の記録

# はじめに
はじめまして！HTML & CSSの学習を始めて一週間経ちました．
Qiitaへの投稿の練習も兼ねて，これまで学んだことを箇条書きでアウトプットしていきます！

# HTML
+ ``要素では，文字コード，ページタイトル，CSSファイルの読み込みなどの設定を記述する．
文字コードを指定することで，ページの文字化けを防ぐことができる．
+ クラスを複数指定するときは，それぞれのクラスの間にスペースを入れる．
“`

“`
+ viewportとは，レスポンシブデザインを適用する際に，端末に合わせて表示領域を変えるために指定する．
（`content=”width=device-width~”`の部分で端末のビューポートサイズを表示領域として認識させている）
viewportを指定しないと，スマホやタブレットでもPCの表示領域で画面が表示されてしまう，といったことが起こる．

（以下サイト参照）

https://skillhub.jp/courses/256/lessons/2016

+ class名は数字からつけ

html　ボタンの作り方について

## 2つの方法がある

## 1.　inputタグを使う

“`
button type=”button”>
“`

## 2.　buttonタグを使う

コードで見てみよう

“`

“`

label タグでの for の省略

チェックボックスで `` タグを付けないとクリック範囲が狭まって不便です。`` タグでチェックボックスを囲めば記述がすっきりします。

常識なのかもしれませんが、自分はこれを知らなくて `for` は必須だと思い込んでいたので、メモしておきます。

# 概要

チェックボックスの横に文字を書くだけだと、文字をクリックしても反応しません。

“`html
check1
“`

※ 一昔前はこのような UI をよく見掛けました。

チェックボックスとラベルを関連付けるには、`` で `id` 属性を指定して、`` で `for` 属性を指定します。

“`html
check2
“`

チェックボックスを `` で囲めば、関連付けは明確となるため `id` や `for` 属性は不要となります。

“`html

hタグは、なに要素？

h1タグ〜h6タグまで、全部、ブロック要素

終わり

己はフロントエンダーだーー！と言う方は、ATOMを使おう

フロントエンダーは、フロントエンドをやっている人

## ATOMについて説明するよ

タグって、めちゃめちゃたくさんあるじゃん？

覚えられないじゃん？

天才と無限やる気人は、わからないけど

２週間で覚えようのコーナーに参加してる人は、覚える気にならないでしょ？

そしたら、ATOMを使ってみて

と言う話

“`
justify-content: flex-end;
“`

とかさ、

j
と
F

を入力するだけで、補完されるぜ

やばくねーーーーーーーーーーー

## 追伸

そんなこと言っても、ATOMは重いからやだーーーー

と言う人！

わかりますよ。

いきなりPCが、ブーーーーーーと大声あげるんだもの

なにが起きたの？

恥ずかしい
と言う状態になる

そう言う時は、Disableしてみて

パッケージを

ATOMの画面で、

`command` + `,`

を同時押しよ

そんで、

`パッケージ`というメニューを開いて、

パッケージを、全部、Disable（無効）にしちゃえ〜〜〜〜〜〜〜

音が出なくなるよ

まあ、そこそこ手間がかか

li要素は、なに要素？

ブロック要素

## 詳しくは、こちら

[これ見てちょうだい]()

html つまづかないために、覚えておけばいいこと　4つ

## 4つだけ、理解すればいい

1. インライン要素
1. ブロック要素
1. 親要素
1. 子要素

## 具体的には、

例えば、

この要素を横並びにしたい

と思うことがあるでしょ？

ない？

あるよね

そう言うとき、そのパーツが

インライン要素なのか？
ブロック要素なのか？

と言う観点と

親要素なの？子要素なの？

と言う観点のみ突き止めれば、必ず横並びにできるぞ

## 他

まあ他にも、

パディングとか、
マージンとか出てくるけど、

そっちは、まだいい

html 要素の種類

## 要素の種類

1. インライン要素
1. ブロック要素
1. リスト要素
1. 表関連要素
1. フォーム要素
1. 埋め込み要素がある

## 具体的に

### 1. インライン要素

インラインという名の通り、
行の中の1つのパーツ・テキスト
というイメージ

### 2. ブロック要素

かたまり
のようなイメージ
ブロック要素を挿入すると、横幅を親要素と同じまで広げる性質を持つ

### 3. リスト要素

純粋に、一覧形式のレイアウトを作れる

順序ありリスト　：　olタグ
順序なしリスト　：　ulタグ
定義リスト　：　dlタグ

の３種類があある

### 4. 表関連要素

単純に、表を作れる

というのも、レイアウトとして、表を作る

理解しなければならないのは、
デザインとして、表を作るのであれば、CSSでもいい
ということ

### 5. フォーム要素

Webの世界では、
アプリケーションやサイト自体が、
ユーザーとやり取りすることがある

これを、インタラクティブと言う

どんなやり取りか？

文章でのやり取り。。

それを実現させよう

HTML pタグ

## pタグ

`文章を書き込めたい！`

とういときに使おう

ほとんどのサイトでは、段落とか言われている

“`

“`

*Pタグは、ブロック要素*

## 詳しくは下記

[これ]()

HTML aタグについて　サクッと

## aタグ

`リンク`

を設定できる

“`

“`

革新的なこと
“`
aタグ　：　インライン要素
“`

## 詳しい版は、下記から

[これ]()

## HTMLの極め方

20回、部分模写
20回、全体模写

何事も、3週くらい全体を実装経験すること
何だってそう

CSSで上下左右中央寄せにする主要な方法5選

# CSSで上下左右中央寄せにする主要な方法5選

Webデザインにおいて、要素を上下左右中央寄せにすることは、ページの見栄えを整える上で非常に重要です。CSSを使えば、さまざまな方法で要素を中央寄せに配置することができます。この記事では、CSSで上下左右中央寄せにする主要な5つの方法を具体的な使用例とともに紹介します。

## 左右中央寄せ

### ① text-alignで左右中央寄せにする

#### 使い方

“`css
.center-text {
text-align: center;
}
“`

`text-align: center;`は、テキストやインライン要素を左右中央寄せにする最も簡単な方法です。このプロパティを適用すると、テキストやインライン要素はコンテナの中央に配置されます。

### ② margin:autoで左右中央寄せにする

#### 使い方

“`css
.center-block {
width: 50%;
margin: 0 auto;
}
“`

ブロックレベル要素を左右中央寄せにする際には、`margin:

HTML 属性: autocomplete

## はじめに
autocompleteの備忘録です💁
初心者です😅
間違えてる部分多々あると思います。
もし見つけた場合、ツッコミいただけると助かります🙇

## 内容
ポートフォリオサイトを作成した際にお問い合わせサイトを作成した。
お問い合わせに必ず、「name」「Email」「comment」を作成する。
それぞれに属性があり設定する。
その際にautocompleteがあり、入力を補助してくれる。
タイピングの労力を減らすために広く使用されている。

“`Contact.js

{errors.name &&

Windows の Firefox で X(Twitter) の 『さらに表示』が出るのは何のバグなのか

たいそうなタイトルを付けたが、やる気がなくなったので軽く書く。

# 省略要素がないのに『さらに表示』がでる

筆者が使用しているFirefox119では、X(Twitter)で、長文ではないポスト（ツイート）でも、リンクなどがなければ、『さらに表示』出る。
その姿は壮観である（？）

ちなみに、Youtubeでも、長くないコメントでも『続きを読む』でる。

# 原因

## 概略
フォントがメイリオの場合、なる。
ブラウザのフォントを変更すればなおるが、Windows でX(Twitter)をやると大抵、メイリオになるので厄介。

## 詳しい原因
いわゆる、『さらに表示』は、offsetHeight と scrollHeigh tの差がある場合に『さらに表示』を出していると思われる。
Firefoxのメイリオでの描画の場合、line-height を指定して描画すると細かい差が出ることが多い。

bugzilla にバグ報告が上がっていたが直る気配はしない。
https://bugzilla.mozilla.org/show_bug.cgi?id=1416615

# Firefo

CSSで横並びにする方法3選と付随プロパティ

# CSSで横並びにする方法3選と付随プロパティ

Webページのレイアウトを整える上で、要素を横並びに配置することは非常に重要です。CSSを使用すると、さまざまな方法で要素を横並びにすることが可能です。この記事では、CSSで横並びにする3つの主要な方法と、それぞれの方法に付随するプロパティについて解説します。

## ① floatを使用する方法

### leftとright

#### 使い方

“`css
.element {
float: left; /* またはright */
}
“`

`float`プロパティは、要素を左または右に浮かせる（フロートさせる）ことで、横並びを実現します。`float: left;`を使用すると、要素は左側に、`float: right;`を使用すると右側に配置されます。

### clear

#### 使い方

“`css
.clear-element {
clear: both; /* left, right, bothのいずれかを指定 */
}
“`

`clear`プロパティは、`float`された要素の影

リアルタイム読み上げサイトの作り方

機会音声のリアルタイム読み上げサイトがリニューアルしました！💡
是非お試しください！
キーボードう打てばリアルタイムに機会音声に変換されます❗️#javascripthttps://t.co/qvGDSk6mJr pic.twitter.com/uhvZ1qA7GZ

— gfkska⑨な人PJT (@hsjakkallavfhd) Novembe

やってみよう　模写コーディング

## 模写コーディングとは

HTML/CSSの基礎的な学習を終えた方が、実践的に技術力を高めたいときに、取り組むべき模写コーディング

すでにあるWebサイトを、自分でHTML/CSSを1から作成し、そっくりなWebサイトを作ること

模写コーディングをすると、格段にフロントエンド開発の力が付く

初心者は、部分模写がおすすめ

## 模写コーディングの手順

1. サイト選び
2. スクリーンショットを撮る
3. テキストを抽出する
4. 画像を抽出する
5. HTML編集
6. CSS編集
7. 答え合わせ

## 1. サイト選び

Googleで、模写コーディング練習サイト、などと検索して、出てきたサイトから、自分が気に入ったものを1つ選びましょう。

## 2.スクリーンショットを撮る

Chromeの拡張機能：GoFullPageを使う

## 3.テキストを抽出する

## 注意点

著作権には、気を付けてください

模写したサイト等は、公開したりせず、ローカルのみにとどめておいた方が良いでしょう。

静的サイトでグラフ可視化する方法の考察

# やりたい事

仕事などでデータの可視化をする機会があるのですが、**静的サイトホスティングで十分ではないか**と妄想する事が何度かあった為、一回しっかり考察をしてみたいと思います。
こんな考えに至ったのも経験上、可視化案件の大半は下の条件に当てはまる為です。。。

– いわゆるSPA（Single Page Application）で十分。
– データ更新頻度が数分に1回（それより遅い）でよい。
– 可視化（ダッシュボード）だけで十分。分析はいらない。

:::note info
静的サイトに詳しくは無いため、間違い、情報が古い等あるかもしれません。
「こんな方法もあるよ」というのがあれば教えていただけると助かります。
:::

# 期待すること

– 低メンテナンス（データ）
– 多少のカスタマイズ性（GUI部分）
– 望めば データ更新頻度1分 を達成することもできる

# 可視化するデータ
Webページのディレクトリ構成は以下のように至ってシンプルです。

“`
my_site/
+ data.json
+ index.html
“

CSSでの要素指定方法9選

# CSSでの要素指定方法9選

Webページのデザインをカスタマイズする際、CSS（Cascading Style Sheets）は不可欠なツールです。CSSを使うことで、ページ上の要素にスタイルを適用し、見た目を整えることができます。特に要素の指定方法を理解することは、効率的なスタイリングにとって重要です。この記事では、CSSで使用される要素指定方法を8つ紹介し、それぞれの使い方を初心者にも分かりやすく解説します。

## 基本の要素指定方法

### 全ての要素を指定 `*`

#### 使い方

“`css
* {
/* すべての要素に適用されるスタイル */
}
“`

### クラス名の指定 `.class`

#### 使い方

“`css
.className {
/* 特定のクラス名を持つ要素に適用されるスタイル */
}
“`

### ID名の指定 `#id`

#### 使い方

“`css
#idName {
/* 特定のIDを持つ要素に適用されるスタイル */
}
“`

## 特定の関係にある要素の指定

### 子孫セ

診断機能（ポイント制）

Ruby on Rails でポイント制の診断機能を実装する。
おすすめのキャラクターの診断ができる機能を実装する。

## 開発環境
– Ruby3.0.6

## 診断設計
Question1からQuestion3に対して「はい」→キャプテンアメリカに+1
Question4からQuestion6に対して「はい」→アイアンマンに+1
Question7からQuestion9に対して「はい」→スパイダーマンに+1
Question10からQuestion12に対して「はい」→ソーに+1
計12問の「はい/いいえ」の質問に回答すると、「はい」の数が最も多いキャラクターが表示される。

## 手順
1. モデル
2. ルーティング
3. コントローラー
4. ビュー

## 1. モデル
question1からquestion12の計12個（データ型がinteger）のカラムを持つTestモデルを作成する。
“`cmd
rails g model Test question1:integer question2:integer …
“`

“`cmd
rails db:migr

floatプロパティについての基本解説

# floatプロパティについての基本解説

Webデザインにおいて、`float`プロパティは非常に重要な役割を果たします。このプロパティを使用することで、Webページ上の要素を柔軟に配置することが可能になります。本記事では、`float`プロパティの基本的な特徴とその使い方について初心者にも分かりやすく解説します。

## floatプロパティの特徴

### 要素の横並び

#### 横並びの実現

`float`プロパティを使用すると、要素を左や右に浮かせる（フロートさせる）ことができます。これにより、例えば複数のリストアイテムや画像が横並びに配置されます。

### 要素幅の自動調整

#### 子要素に合わせた幅の調整

`float`を適用した要素は、その子要素の幅に合わせて自動的に幅が縮小します。これにより、要素が必要以上にスペースを取ることなく、コンテンツに合わせたサイズになります。

## clearプロパティとの組み合わせ

### 横並びの回避

#### clearプロパティの活用

`float`プロパティで要素が横並びになるのを避けたい場合、`clear`