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

HTML/CSSコーダーが初めてVisual Studio Code(VSCode)を使うときのポイント

HTML/CSSのコーディングをするとき自分がよく使っているVSCodeについて、これから初めて触る人向けに、よく使うメニューや設定などのポイントをまとめておきます。

# 対象の読者
– HTML/CSSをコーディングする人
– テキストエディタをどれにするか迷っている人

ソースコードはこちらのサイト↓から、ポートフォリオのテンプレートをお借りして説明します。

https://webdesigner-go.com/template/portfolio-02/

# インストール

インストールはこちら↓の記事がシンプルにまとまっていると思いましたのでご紹介。日本語化や、おすすめのプラグインなどもまとめられています。

https://qiita.com/genbu-jp/items/0a7e38cd4faaa58f1b56

# フォルダーを開く

「ファイルを開く」より「フォルダーを開く」がおすすめです。(後述する「エクスプローラー」が使えるため。「ワークスペース」は、HTML/CSSではあまり使わなくてもいいかなという印象なので、今回は割愛します。)

「ファイル → フォル

HTMLに原稿流し込むときは校正だけじゃなく校閲もしとけ

# はじめに

ある日。

私は、支給された原稿をコピペでHTMLに流し込みました。
ブラウザで表示されたページを支給原稿と照らし合わせながら一通り読み、原稿・表示共に問題ないことを確認、テストアップを提出しました。

すると、プロジェクトメンバーからお戻しを頂きました。

**「『CO2』は『CO₂』でお願いします」**

あぁ、なるほど、確かにCO₂の『2』は下付き文字で記述するのが通例だよな。

数カ所で『CO2』の記述があり、私はすぐに修正し提出し直しました。

—

その後、プロジェクトメンバーからお叱りの一言。
**「こういう当たり前のことを指摘されるのが一番ダメ」**

社会人はこういうときに原因と対策を考えると聞きます。
ということで、
– なぜ“当たり前のこと”に気付けなかったのか
– どうすれば気付くことができたのか

について考えてみます。

# なぜ気付けなかったのか ― 原稿と同じならOK？

『CO2』→『CO₂』と記述するのは、化学式を記述する際の一般的な規則です。
化学式における下付き

HTML/CSSコーダーにもXDのプラグインの自作をお勧めする件

XDのプラグインといえばデザイナー向けの便利機能が多いと思いますが、HTML/CSSコーダーがXDから情報を取り出すときにもプラグインが便利です。一般に公開されているものもたくさんありますが、ここではXDのプラグインを自作する方法について説明します。
機能としては以下のようなものを作ります。
– グループ内のテキスト要素から文字をまとめてコピーする
– １つのテキスト要素や四角要素から色情報などを取り出し、css形式でコピーする

また、自作することにより、以下のようなメリットがあります。
– 自分のコーディングルールに合うようにカスタマイズできる
– ちょっとjavascriptの練習になる

# 対象の読者
– XDのデザインカンプをもらってHTML/CSSをコーディングする人
– javascriptの基本的な文法が分かる人

XDが初めての方はこちら↓

https://qiita.com/yymmt/items/0c4daa744a88a72593d4

今回も、こちら↓のサイトから、ポートフォリオのXDファイルをお借りして説明します。

https://webdesigne

【１日目】ボタンを押したら何かが表示されるプログラムを作る

# ０.はじめに
この記事はプログラミングの特訓をしている高専4年生(もうすぐ5年生)がその日勉強した内容を記録していきます。
何か月か続く予定。

# １.本日の課題
今日はHTMLとJavaScriptを使ってボタンを押したら何かを表示させるプログラムを作成する。
HTMLもJavaScriptもあまり触ったことがなくネットを参考に自分なりに書いてみた。

“`html

“`

このプログラムを先生に評価してもらったところ次の改善点を告げられた。
***
– id名はどういった役割かの名前にす

ドットインストールでHTML基礎文法をやってみた

# 一周してみて、気になった点をメモ書きしたのでアウトプットと復習を兼ねて

動画1〜順にメモしてるので良かったら理解度プラスにして頂きたい

– `Ctrl + /` = HTMLのコメントショートカットキー
– `rel` = relation (関係 )
– `href` = hypertext referece ( 参照 )
– `Charset` ( キャラセット ) 文字コードの事
– `` = Webサイトに表示されないがSEO/ブラウザ用
– `

---

` = horizontal rule ( 水平方向の罫線 )
– `` ( 引用 )
– 文字実体参照　; 忘れない
– `” < “` = less than (小なり)　`” > “` = grater than ( 大なり )

– `

` = preformatted

　すでに整形されたテキストをそのまま表示する

- `` = ソースコードをそのまま表示する

※正直理解半分ぐらい

エディタに書いた際に上記コードがないと段落が付かない

Webのさまざまなデータ形式について図を使って説明してみた

## HTML
- タグに囲まれた文章
- タグ：囲んだ文章が「何を示すか」を表すもの。開始タグと終了タグからなる。
- 要素：「開始タグ・文章・終了タグ」のかたまり。そのかたまりが「何を示すか」は「要素名」という。
- 1つの要素は、「\<要素名>文章\」で記述される。
- html要素を起点とした要素の階層構造になっている。

See the Pen HTML マークアップ言語について

:::note info
こんにちは！よろしくお願いします。
三日目のブログ記事になります。
今日の記事はHTMlマークアップ言語について勉強したことを記事に書いていきます！
では、早速！！！
:::

マークアップ言語とは

マークアップ言語とは、文章を構造化するための言語で、僕たちが直感的に「これはタイトルだな」などわかる部分がコンピュータでは認識できません。なので、基本的に「タイトル」や「本文」など、記号やタグでコンピュータに認識させてあげないといけません。そのためのマークアップ言語ですね！
そのマークアップ言語には複数種類がありますが、HTMLなどが主流になっていますね。他にもXHTMLやXMLなどあります。
CSSもマークアップ言語になります。CSS言語はHTMLで記述したコードの色を変更したり太字にしたり位置を変更したりできます。

:::note warn
プログラミング言語とマークアップ言語は別々の言語なので注意が必要
:::

マークアップ言語の種類

　

CSS(Cascading Style Sheets)

特定の単語を固定して検索！ 検索効率向上！ 新しいエンジニア向け検索サイト！

# 紹介
検索効率**爆上がり**のサイトを作ってみた！プログラマー向け！（ほかにも用途があるかも!?）
http://emc2games.starfree.jp/searcher/
https://github.com/tomato645/Useful-Searcher-For-Developer
Tweets by tomato645P
（↓サイト紹介動画）

自作サービスの紹介動画を作成しました！
ぜひ見て、使ってみてください！！#HTML #javascript30 #駆け出しエンジニアと繋がりたい #Qiita https://t.co/ts0mgd5c60 pic.twitter.com/uNHBPozXkB

— tomato645 プログラム初心者 (@tomato645P) March 11, 2022

# 使い方
* ①固定する言葉言葉を入力します。
例えば、html,js,css,python 数学、国語など...

* ②検索指定言葉を変更する言葉に入力します。
例えば、タイマー 作り方、人工知能、三角関数など...

# 利点
* 入力欄が分離しているので、入力のし直しの回数を削減することができます。
* 新しいタブを開く仕組みなので、一括でたくさん調べておくことが可能です。
* （募集中）

# 改善点
* google検索以外もできるようにすること。
* （募集中）

# 終わ

HTMLのinputの配列は添字に key が指定できる

## はじめに
inputで入力された値をphp側で把握してdbに登録したいようなケースがあるよな（例えばマスタとして全量が登録してあって、そのなかから取り扱ういくつかを選択して、以降は選んだものだけを表示する管理画面みたいなやつな）

探すと `name="use_cert[]"` みたいにやるんだぜ、って出てくるんだけど、配列の index は 0ベースである。stackoverflow を当たっても javascript で上書きするようなやり方しかねぇ。
・・・上書き？:rolling_eyes:　ふとひらめいた

https://www.google.com/search?q=html+input+%E9%85%8D%E5%88%97&oq=html+input+%E9%85%8D%E5%88%97&aqs=chrome..69i57j0

2x2実正方行列で線形写像を体験する

# はじめに
この記事では，2x2実正方行列での線形写像可視化ツールを使って平面から平面への線形写像を体験します．このツールは線形写像の独学用の教育支援ソフトウェアです．
線形代数には1次連立方程式の理論と線形写像の２つの柱があります．このツールで体験できるのは線形写像です．1次連立方程式や内積は本ツールでは体験できません．また，学校で学習する逆行列や固有値の求め方，行列の対角化といったいわゆる計算スキルは身に付きません．本記事はこれらの計算方法は知っていて，線形代数の定期試験も合格点をもらえるレベルにあるけれど，どうにも概念が腹落ちしないとか，この行列の計算スキルに意味を見出せないという学習者に向けて，実2次元における写像を体験していただき，学校で学習したことの意味の理解を深めることを目的としています．想定レベルは大学低学年の線形代数です．
(**おことわり**)
本記事は線形代数の問題が解けるようになる計算スキルを習得するためのものではありませんでの，試験対策には使えません．
# 支援ツール
ツールの場所はここです．
[著者のサーバ](http://www.olt.tokyo/ma

さくらのウェブアクセラレータ(CDN)やImageFluxでHTMLのpictureタグでWebP/PNGや解像度の異なる画像を出し分ける

# はじめに

さくらのウェブアクセラレータに限らない話ですがCDNやウェブサーバーで画像を配信するとき、WebP 対応ブラウザには WebP 画像、非対応ブラウザには PNG 画像と出し分けをしたいケースがあります。また Retina ディスプレイのような高解像度のデバイスには高解像度の画像を配信したいというケースもあるでしょう。

# HTML の picture タグを使った画像の出し分け
[さくらのウェブアクセラレータ(CDN)](https://www.sakura.ad.jp/services/cdn/) は [Varyサポート機能](https://manual.sakura.ad.jp/cloud/webaccel/manual/settings-vary.html) により1つのURLで最大5種類のコンテンツをキャッシュして出し分けることができますが、画像の出し分けには HTML の `` タグを使うほうがお勧めです。

例えばWebPとPNGを表示可能なブラウザに応じて出し分けたい場合、 `Vary: Accept` と指定すれば出し分け自体は可能

SafariはPDFがimgタグのsrc要素に指定できる！

これは知らなかったので、メモ的に。

WebブラウザはPDFの表示（別タブ）をサポートし始めて久しいのですが、imgタグに設定できるのは知りませんでした。普通にこんな感じ。

```html

```

そうするとPDFのサムネイル表示ができます。


ちなみにChromeではできません。


むしろ表示できてびっくりでした。

iOSのSafariでもいけますが、Androidで表示できないので使い道が難しいですね。

【HTML/CSS】Udemyコースで学んだ良い感じなデザインの共通点をまとめてみる

## この記事は何？

Udemyで**20 Web Projects With Vanilla JavaScript**というコースを受講しました。

https://www.udemy.com/course/web-projects-with-vanilla-javascript

HTML/CSS/VanillaJSで良い感じなデザインのアプリを20個作っていく、フロントエンド初学者向けのコースです。

コースを進めていく中で、デザインに**共通点が多い**事に気が付きました。

そこで、今後の自分のためにこのコースで登場するデザインの共通点をまとめることにしました。

### 受講の動機

HTML/CSS/JavaScriptで10個(くらい)何かを作ってみるチャレンジの一環として受講しました。

何か作ってみるチャレンジの目的は、**HTML/CSS/Vanilla JSを使ってとりあえずなにか作ること、手を動かすこと**です。

プログラミングにおいて手を動かすに勝る学習方法はないと思います。
実感としてもそうですし、そう言っているエンジニアの方も多くいます。
また、質を

V-Calendarで世界の祝日カレンダを作った

# はじめに
自分：中国販社の〇〇さんとベトナム販社の△△さんとのMTG設定しよーっと。
えらい人：中国は今旧正月だから〇〇さん今週ずっと休みだよ？
えらい人：あ、ベトナムは月末に祝日あるからそれも気を付けてね！
自分：・・・

ということがあったので世界の祝日カレンダを作りました。

これで世界中の人とMTGになっても安心です！

# 技術要素
- Vue.js
- V-Calendar

https://vcalendar.io/

V-Calendarを使ってカレンダを表示し、祝日をその国の国旗で表現します。
世界の祝日はgoogleカレンダから取得します。
世界の祝日は下記を参考にgoogleカレンダのグループから取得しました。

https://gist.github.com/mattn/1438183/984ed1725133

HTMLの基本〜part1〜

■HTMLの構造について
HTMLは大きく分けて、『head要素』と『body要素』の2つの要素で構成される

①head（ヘッド）要素
ウェブサイトの情報や、装飾用のCSSファイルの情報を記載する部分。
ここに記述した情報は画面上に表示されない。

（例）
・Webページのタイトル
・装飾のためのCSSファイルの指定
・外部のファイルの読み込み
・SNSなどでシェアされたときの表示の仕方

②body（ボディ）要素
画面上に表示したい情報を記載する部分。
ブラウザ上に表示したい情報は、body要素の中に記述する。

■HTMLを記述するときに必ず記述するコードとは
①` `
この文章がHTML文章であることを宣言する要素。コードの先頭に記述し、終了タグはなし。
記載する理由⇨レイアウトが崩れ、正しく表示されないことを防ぐため。

②` `
HTML文章の始まりと終わりを示す要素。

幅可変のコンテナ内のtext-overflow(Ellipsis)について(grid仕様)

よくある左右2カラムレイアウトで、片方のメインコンテンツなどが可変幅でwidthが設定されていない場合、その子要素にcssで text-overflow: Ellipsis;　を指定しても、はみ出してしまって適用できない場合がある。その対処法。
親要素にwidthは指定されていない、もしくはしたくないときに有効である。

```style.css
.container {
display: flex;
height: 100vh;
/*便宜上設定*/
width: 1000px;
margin: 0 auto;
}

.left {
width: 100%;
background-color: yellow;
flex:1 1 auto;
}

.right {
flex: 0 0 300px;

Webの画面をPDFにしようとしてすべてが無に帰した話

先日こんなことを言われました

Webの画面をそのまんまPDFにして
DLしたい！！！

「（え、Webの画面なら印刷画面開いて
PDFDLしたらよくない・・・？？？）
わかりました！！！」

ということで考えていく

1.画面を画像として保存
2.メモリに保存した画像をPDFに変換

これで行こうと思ったのですが
画面の比率がひどいことになりました
原因は画像化する際に解像度が著しく落ちるためです
画像なんてひどくて
見れたもんじゃない

初期の白黒のテレビくらい画像がぶれています
現代っ子の僕にはとても見れたものではない

じゃあ
JavaScriptでごり押しできないか・・・？

調べたらたくさんありました
そういう便利なやつ

方法としては
Html2canvasでcanvasに画面を画像として保持
jsPDFでPDF出力
というお手軽簡単！！
キューピーもびっくり！！！

ということでやっていきましょう

以下はHTMLに埋め込むスクリプトです

```javascript
function [任意の名前](){
html2canvas(document.queryS

HTML,CSS 凡ミス

# 超不器用な自分がHTMLの学習でinputとimageを間違えた話。

## 本日はHTML,CSSでサイト作り実践...のはずが
本日から学習したことを活かしてサイト作り実践(模写)に入りましたが早速ヘッダーの作成から間違えてしまいました...。

## 対象読者
- IT業界完全未経験者
- IT業界初学者

## どこが間違えているか

先ずはサンプルの模写サイトを確認、headerの部分のロゴマークはボタンみたいになってるからinputタグを使おう！
```html

```
はいこの時点で間違いですね、当時の自分の中ではボタンみたいに押せる=inputタグを利用してvalueを設定して…みたいな思考になってました。

その時点で学習不足なのが露呈したので再度復習です。

先ずはボタンみたいでは無くリンク先に飛ぶ、又は画像をクリックしてる(今回の例だとロゴマーク)と認識した上でコーディング、そして改めてタグの意味を理解した上で
```html
技術者ができるウクライナ支援 - ひまわりをサイトに書こう


## この、過去最悪のパンデミックから立ち上がりましょう。
?ぐだぐだ政治的なことをあたしが言ってもいいのですが、今回は書くことだけに専念します。

## なぜ、ひまわり？
?ウクライナの国花ではありますが、ずっとサイトに貼り付けていても普通にかわいいかと思います。

## HTMLで普通に書く

```
🌻
```
```

```

## CSSのリストアイコンにする

```
body {
font-size: 16px;
}

li {
list-style-type:none;
}

li:before {
font-size: 18px;
content:"\1f33b";
}
```

ちょっと文字サイズを大きめにしておいたほうがよさそうです。

ハンバーガーメニューの三本線を簡単に書く方法！

```
「三」か「≡」
```