f@ctor

今さら聞けないHTML　2022年03月27日

今さら聞けないHTML　2022年03月27日
目次

VSCodeでhtmlのlangを初期設定で日本語設定にする方法

# この記事のゴール
– 「en」になっている部分を初期設定で「jp」にする
![スクリーンショット 2022-03-26 15.04.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/d7b9ed70-e078-5f4e-53db-96946120f5b0.png)

# 手順
## 【手順1】 VSCodeの設定を開く
![スクリーンショット 2022-03-26 15.08.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/30e5617c-afff-331b-7063-02fc8a830ac9.png)
![スクリーンショット 2022-03-26 15.10.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/cd8d4b5e-6b1d-7668-4ca9-399eb2d15b

元記事を表示

セレクタを並べて記述【CSS】対象を絞り込む

**HTML**
“`

サンプル1

サンプル2

“`
**CSS**
“`
.item._current { color: red; }

.item { font-style: italic; }
“`
![スクリーンショット 2022-03-26 10.39.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130361/c7e17487-a9f7-ca3c-fbec-b2efc30cbe4f.png)

セレクタを区切り文字・空白なしで記述（結合・連結）すると、対象を絞り込むことができる。

例：クラスセレクタ「item」とクラスセレクタ「_current」を並べて、「サンプル1」だけを赤文字にしている。

元記事を表示

HTMLとWebブラウザ

# HTMLとは?(記述言語)
ハイパーテキストを記述するための言語がHTML(Hyper Text Markup Language)。
HTMLが使えるようになると、webページを作成できるようになる。
マークアップ言語のひとつ。
ハイパーリンクや「ここはタイトル」「ここは段落」など、タグと呼ばれるマークによって表現する。
タグには要素の始まりを表す「開始タグ」と終わりを表す「終了タグ」があり、テキストを挟むように記述する。HTMLで記述された文書やそれに付随する画像をまとめてコンテンツと呼ぶ。
## 主なタグ

https://developer.mozilla.org/ja/docs/Web/HTML/Element

# Webブラウザ(表示プログラム)
ハイパーテキストは、人間がそのまま読むには適していないので、ハイパーテキストを解釈して人間が読みやすい形に変えて表示してくれるのがWebブラウザと呼ばれるプログラム。
Webブラウザの種類によって表示の方法に多少の違いはあるが、HTMLのルールは世界共通。

# 参考
* [イラスト図解式 この一冊で全部わかるWeb技術の基本

元記事を表示

HTML+CSSでタコピーを書いてみたっぴ

つい先日完結した「タコピーの原罪」という漫画に出てくるタコピーという癒しのマスコットキャラクターをHTML+CSSで描いてみました　?

See the Pen
happy-octopus by tamanugi (@tamanugi)
o

元記事を表示

text-transform【CSS】要素のテキストを大文字にする

“`
要素 {
text-transform: uppercase;
}
“`

大文字以外にも以下のような指定が可能。代表的なものを挙げています。

| 値 | 仕様 |
| —- | —- |
| uppercase | 全て大文字 |
| lowercase | 全て小文字 |
|capitalize | 単語の先頭を大文字 |
|none|変換させない|

詳細
https://developer.mozilla.org/ja/docs/Web/CSS/text-transform

元記事を表示

【HTML】リンクタイプとは

## リンクタイプとは
リンクタイプは文書と他の文書、もしくは文書と外部リソースを関連付ける `rel属性` の値として指使用する。
* rel属性とは
現在の文書から見たリンク先の文書（href属性で指定した文書）の関係を示す。

:::note alert
※ rev属性はHTML Living Standardで廃止されているため、使用するべきではない。リンク先から見た現在の文書の関係を示す際もrel属性を使用する。
:::

[havin’a coffee break](https://web.havincoffee.com/html/tag/a/rev.html)に詳しい説明が記載されています。

## 目次
* rel属性を内包できる要素

* リンクタイプの一覧

## rel属性を内包できる要素
| 要素 | 説明 |
|:-:|:-:|
| ＜a＞ | 現在の文書から見たリンク先との関係 |
| ＜area＞ | 現在の文書から見たリンク先との関係 |
| ＜link＞ | 現在の文書から見たリンク先との関係 |
| ＜form＞ | 現在の文書

元記事を表示

【Chart.js】グラフの背景色を設定する方法

# はじめに
お仕事でグラフを表示するページを作ることがあったので、まぁSVGとかで頑張って描画してもよかったのですが、いくつか要求仕様があったので、せっかくなら便利でオシャレなグラフツールでもないかな～と思って探したところに出てきたのがChart.js。
これを使ってみたところ、見た目もアニメーションもなんだかかわいくてとてもよい！

ところが、**グラフの背景に色をつけたいな～**と思って背景色設定のプロパティを探したところ、どうやら`background-color: ‘white’;`みたいに**1行で背景色が設定できる便利機能はない**ことが分かりました。
グラフの領域を目立たせたりデザインをよくしたり、背景色を変えるモチベーションは多いと思ったのでデフォルトで設定機能がないのは意外だったのですが、実装にちょっと苦労したので共有。

# Chart.jsについて
私が使用したChart.jsのバージョンは、**3.7.0** です。
今回はChart.jsの基本的なグラフ作成方法の説明は省略します。
（※ Chart.jsは2系と3系で書き方が異なる部分もありますので、お使い

元記事を表示

【CSS Battle】世界中のユーザーとCSS・HTMLの力を競い合える！？

## CSS Battle とは？
[CSS Battle](https://cssbattle.dev/) とは、お題の画像と全く同じになるようにCSS、HTMLを書いて、世界中のユーザーと得点を競い合うゲームです。

得点は、**記述したCSS、HTMLの文字数が少なければ少ないほど、得点が高くなります**。

https://cssbattle.dev/

お題はこんな感じです。
ぱっと見、難しそうなものから簡単なものまで、色々なお題があります。

ドクロ|プレゼント|モンスターボール
–|–|–
![スクリーンショット 2022-03-24 20.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2443f024-5756-8fcd-0db6-1d41d89a9779.png)|![スクリーンショット 2022-03-24 20.58.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/

元記事を表示

画像の読み込み中にローディングマークを表示させる

# はじめに
APIから画像を取得する時、読み込みが遅いと画像がある部分が空欄になる。
そこに画像が表示されることを分かりやすくするため、ローディングマークを表示させる。

# loading.gifを背景に設定
https://www.benricho.org/loading_images/transparent01.html

こちらのサイトから透過済みのフリー画像を保存。
背景画像にloading.gifを設定し、メイン画像が表示されるとloading.gifが隠れるようにする。

# コード
`image`にAPIから取得した画像URLが入る。

“`html


“`

# 参考サイト

https://cpoint-lab.co.j

元記事を表示

text-decoration【CSS】タグの傍線を非表示にする

**text-decoration: none;**

“`
a {
text-decoration: none;
}
“`

元記事を表示

ここが変だよHTML&CSS

## HTML

### 略語多すぎ問題

HTMLは略語のタグが多い。一文字の要素を挙げるだけでも`` `` `` `

` `` `` ``の7個ある。2文字の要素は現存しているだけでも20個あった。数え間違えているかもしれない。ここまでくるとニュースピークである。実際、意味合いがイニシャルが同じ別の言葉に置き換わる(例: `

`は → “[Definition List](https://www.w3.org/TR/html401/struct/lists.html#h-10.3)”(定義リスト)から”[Description List](https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element)”(説明リスト)に変わった)という「1984年」を思わせる改竄、もとい仕様変更が発生したりもした。元来の意味を忘れ、見た目だけで要素を作るテーブルレイアウトの暗黒時代は間違いなく略語のせいで発生した。今ですら本来の意味を逸脱して``タグが使われる

【HTML】スタイルシートの構文２

## 固定スタイルシート
常に適用させるスタイルシート。優先スタイルシートから代替スタイルシートに切り替えても、固定スタイルシートは適用される。
title属性を指定しないことで、固定スタイルシートとなる。

~~~html

~~~

## 優先スタイルシート
ページ読み込み時に、優先的に適用されるスタイルシート。
title属性を指定したstyle要素のうち、最初に現れたstyle要素のtitle属性値が、優先スタイルシートのグループ名となる。
同じグループ名のスタイルシートは、同時に適用される。

~~~html

~~~

## 代替スタイルシート
優先スタイルシートの代替となるスタイルシート。ページ読み込み時には適用されず、ユーザーがブラウザを操作し、スタイルシートを切り替えたときに適用される。
title属性を指定したstyle要素のうち、優先スタイルシート以外のstyle要素のtitle属性値が、代替スタイルシートのグループ名とな

【備忘録】CSSで上下左右中央寄せ

# この記事について
CSSで要素を上下左右中央に寄せて配置する方法を毎回ググってる&方法がバラバラになっていたので、メモを残しておく。

# 基本的なやり方
親に以下を指定する。これだけ。

– `display: flex`
– `justify-content: center` (左右中央)
– `align-items: center` (上下中央)

“`index.html

あいうえお

かきくけこ

さしすせそ