SVGをHTMLに埋め込むときのあれこれ

# SVGをHTMLに埋め込むときのあれこれ
デザイナーからSVGデータで表示させてほしいと言われても実際は色々面倒。。。
何が面倒ってもらったSVGデータをキレイにすることが一番面倒。。。
何を消していいか、どうやったら使ったらいいか、あれやこれやを記述します

## SVGデータから不要なデータを削除

### STEP 1. イラストレータで不要なものを削除（ほんとはデザイナーにやってもらいたい）
– 余白を削除（アートボードの調整）
– SP/PCで同じSVGデータを利用して画像をPCでは大きく見せたりする場合に余白があると調整が難しいため
– グループの解除
– SVGデータを少しでも軽くするため
– 色をCSSで調整する際にグループがあるとその部分だけ上手く反映されないことがあるため
– パスの結合
– 矢印の形などでデータを見ると三角▲と四角■のデータに分かれていることがあるが、SVGデータを少しでも軽くするためやCSSで色を変更するために結合することが望ましい
– 不要なレイヤーの削除
– 時々何も書かれていないレイヤーが含まれて

初めてQiitaを使ってみた。（自己紹介）

## 初めに
初めまして。プログラミング学習歴1年のヒロシといいます。
HTML CSS jQuery JavaScript WordPressあたりがメインスキルです。

日々の学習の習慣の一つとして、コーディングでつまづいたところをアウトプットできればいいなと思いQiitaを始めてみました。

このQiita、Markdown記法なるもので記事を書けるみたいなので練習してみようと思います。

## 自己紹介
### 出身地・誕生日
福島県会津若松市にて1995年3月8日に生まれました。（27歳）

### 趣味
テキサスホールデムというポーカーにハマっています。アプリで遊んだり、たまにアミューズメントカジノに行って遊んだり・・・
家でぐうたらしているときはほとんど動画サイトでアニメかVtuberの切り抜き、配信を見ています。

## 大学卒業後〜現在について

### プログラミングに出会うまで

大学卒業後、予備校講師になりたいと思っていたので、集団塾の非常勤講師として２年間働いていました。プログラミングの学習を始めたのは卒業してから1年経ったあたりです。

### プログラミ

TECH CAMP 1日目 ~キックオフ~

# 学習内容
tech campの１日目はキックオフと言って、学習カリキュラムをどのように進めていくのかなどを確認したり、メンバーやライフコーチと顔合わせします。
それが終わると、基礎学習を始めていきます。
今日学んだ内容は事前にProgateで予習した内容と殆ど一緒でした。内容に関して苦労したことはありませんでした。

– HTML,CSSの基本（レイアウト構造、ブロックレベル要素やインライン要素等）

## 今週の目標
__今週中に中間試験を実施__
学習カレンダー上は6/16だが今週の金曜日6/10までに行う。
早めに進めることで⇨余裕を持ってカリキュラムに取り組める
　　　　　　　　　　就職活動で使うポートフォリオの作品制作に時間を注げられる

HTMLの構成 progate

# 要素
要素で要素を入れることを“`入れ子“`

## 親要素
要素を囲む方を“`親要素“`

## 子要素
要素から囲まれる方を“`子要素“`

## インデント
親子関係を示すために囲む要素の開始タグからスペースを2つ(一般的に)付ける。
これを“`インデント“`
tabでつけられる。

コピペで素早く学ぶ HTMLカルーセル

## 0. はじめに

HTML と CSS の機能のみでカルーセルを作成するチュートリアルを用意しました。理解の前に「動かす感覚」を味わってもらうため、**ほぼ全てコピー&ペーストのみで**、素早く進められるチュートリアルになっています。

### git レポジトリのクローン

:large_orange_diamond: Action: ターミナルで以下のコマンドを実行してください

“`terminal
git clone https://github.com/richardimaok

バッティングスコア管理アプリをお喋り出来るようにする⚾

## バッティングスコアに機能を追加
この前記事で作成したアプリの機能を充実させるということで、より一層かっこいい感じにしようと思う。

https://qiita.com/long66tail/items/ab96b204c4ca7bea56b0

今回は、かっこよく英語で語らうようにしてみた。

## 完成作品
と、いうことで、打撃成績を”追加”したら、
「good job.Always put your best foot forward.（訳：お疲れ様。いつもベストを尽くしていこう）」
と言ってくれるようにした。

https://batting-statistic-c35a90.netlify.app/

## ソースコード

今日の天気とアニメは？？音声認識で天気予報とEテレ番組を教えて貰ってみた

## 音声認識と発話ができるアプリを作りたい！
音声認識と発話を利用したWebアプリを作成した。
今回は前回の[天気予報アプリ（ライブカメラで渋谷を見てみた）](https://qiita.com/kosuke0517lab/items/be242454c517b10a176b)をもとに作成している。前回と違う点としては**音声認識と発話の技術** を用いており、視覚だけではなく聴覚からも天気予報を知ることができる。
それに加え、NHK番組表APIという面白そうなAPIを見つけたので取り入れてみることにした。ジャンルをEテレに絞っているのでおかあさんといっしょやおじゃる丸、忍たま乱太郎といったアニメが好きな**子供たちにも楽しんでもらえるはず**なのでぜひ使ってみてほしい。

## どんなアプリ
・[前回](https://qiita.com/kosuke0517lab/items/be242454c517b10a176b)と同様に今日、明日、明後日の天気を画像付きで表示をする。
・『～の天気は』と訊くとその日の天気を教えてくれる。もしその日が雨なら傘を持って行ってと提案してくれる。

HTML5プロフェッショナル認定試験レベル1 Ver2.5 合格記

2022年6月上旬にHTML5プロフェッショナル認定資格レベル1 Ver2.5を受験し合格しました。

今年の4月に現在の会社にIT業界未経験として入社後、初めての資格試験として受験しました。

## 受験理由
もっとWeb全般の知識を深く体系的に身につけたいと思ったからです。独学で主にhtmlやcss, Javascriptを使って遊んでますが、用語は知っているが意味はあまり分からない等といった事が多々ありましたので今一度知識をしっかりと定着させたいと思いました。

## 試験概要

公式サイト: https://html5exam.jp/outline/lv1.html

90分（秘密保持契約とアンケートの時間を含む）
内訳：秘密保持契約5分、試験80分、アンケート5分
試験問題数
約60問
受験料
￥16,500（税込）

:::note warn
試験を受ける前はHPをよく見ておらず実際に問題を解く時間が90分だと勘違いしてました。
問題を解く事が出来る時間は80分です。
合格ラインは65点でした。
:::

## Ver2.5

2022年2月1日から従来のVer2.0から

【JavaScript】セレクトボックスの要素を移動させる

今回はセレクトボックスの要素の移動について記述します。
この実装はJQueryでよく見かけるのですがJavaScriptで実装しているものがなかった為
メモを残したいと思います。

【view】



左のセレクトボックスの要素を選択して右のセレクトボックスに移動させます。
※逆も可能。

<【JavaScript】>

![【JS】コード1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/

Web ページをベクタ形式で綺麗に保存する方法 (CSS の @media をいじってブラウザで印刷)

# 前提

画像ファイルにはラスタ形式とベクタ形式があります．
ラスタ形式はピクセル単位で画像データを管理しているため，拡大するとギザギザしてきます．PNG や JPEG などはラスタ形式です．
ベクタ形式は「座標 (10, 20) から座標 (60, 20) に直線を引く」みたいな感じで文字や図形を表現しているため，拡大しても綺麗なままです．SVG や EPS などはベクタ形式です．
PDF は基本的にベクタ形式ですが，ラスタ形式の画像を埋め込むことも可能です．

(と思っているのですが，画像形式の仕様について特別詳しいわけでないので，間違っていたら教えてください．)

# やりたいこと

Web ページをベクタ形式で保存したいです．普通の方法でスクリーンショットを撮るとラスタ形式になってしまいます．ラスタ形式は特に印刷すると汚くなってしまいます．

上述の通り，PDF はベクタ形式です．よって，ブラウザの印刷機能を使用して，プリンタの代わりに「PDF に保存」を選んであげれば Web ページをベクタ形式で保存できます．

# 困ったこと

一部のサイトは印刷を試みるとデザインが乱れ

四捨五入、切り捨て、切り上げをしたい(Math)

## はじめに
現在、独学でJavaScriptを勉強中です。
`Mathオブジェクト`で躓いてしまったのでまとめてみました。

## よく使うMathオブジェクト
`Math.round` ・・・四捨五入する(戻り値 数値)
`Math.round()メソッド`は次のような挙動をする。
・小数点部分が0.5以上であれば、次に大きい整数へ切り上げ
・小数点部分が0.5以下であれば、次に小さい整数へ切り下げ
“`javascript
Math.round(5.34); //結果: 5
Math.round(6.8); //結果: 7
“`
`Math.floor` ・・・切り捨てる。数値以下の最大の整数を返す(戻り値 数値)
※少数の大小に関わらず切り捨てる。
“`javascript
Math.floor(5.34); //結果: 5
Math.floor(6.8); //結果: 6
“`
`Math.ceil` ・・・切り上げる。数値以上の最小の整数を返す(戻り値 数値)
※少数の大小に関わらず切り上げる。
“`javascript
Math.ceil(5.34); //結

セレクトボックスの一部の項目を選択できなくする

# 見出し1
JavaScriptでセレクトボックスの一部を動的に選択できなくする方法を記載します。

# コード

“`HTML
アイテム1アイテム2アイテム3
“`

“`JavaScript
let items = Array.from(document.querySelectorAll(‘#selectbox option[data-val=”1″]’));
items.forEach(option => option.disabled = true);
“`

これでセレクトボックスのdata-valが1の項目が選択できなくなります。

bootstrapで表示内容を中央揃えにする方法

こんにちは。

みなさんは普段htmlを書いていて、
一つ一つにcssを適用させるのめんどくさいなーと思ったことはありませんか？
本日はbootstropで、col内にまとめたhtmlの表示位置を
一括で管理する方法について理解できたので
アウトプットをしたいと思います。
参考資料も最後の方にあるので、そちらも目を通していただければと思います。

表示させたい内容はこちら
こちらのDMの表示位置をbootstrapを使って一括管理する方法を
アウトプットしていきたいと思います。
(bootstrapに関しては調べれば出てくると思うのでここでは割愛します)

グリッドシステムを利用した中央揃え

bootstrapのグリッドシステムにより画面が12分割されていることは

Re:ゼロから始めるSNS作り生活（一週間目＋α）

# ☆どんな記事？☆
プログラミング初心者が、イチからSNSサイトを構築する過程を記録したもの。
誰かに「勉強の状況はどう？」と訊かれたときに提示できるよう、Qiitaの記事として投稿しています。
# ☆前置きや前提☆
### 完成品のイメージ
– コンセプトは「勉強記録をポストしたり、問題を出しあったりできるSNS」
– 自分の勉強記録をポストし、閲覧できる
– 友人の勉強記録に対し、コメントやミニクイズを投稿できる（本記事では未実装）
– 自分と似た目標を持つユーザーを検索し、フォローできる（本記事では未実装）
– フォローしている人の勉強記録を一覧表示する「タイムライン」もある（本記事では未実装）
– 当然レスポンシブデザイン（本記事では未実装）
### 制作の目的
– プログラミング技術の向上
– あわよくば友人にこのSNSを使ってもらいたい
### これまでの経験や知識
– WordPressで構築されたサイトの調整経験
（2年弱従事していたため、HTML・CSS・PHPとも基礎はわかっていたつもり）
（通信をはじめバックグラウンドの知識はゼロ）
– 大昔にイチからサイトを構

Nginxに静的ファイルをデプロイしてみよう

## はじめに
Docker でHTML ファイルを nginx 起動しngrock で簡単にhttps 起動できるまでを記載しています。

## フォルダ構成

“`
root/
├── Dockerfile
└── src
└── index.html
“`

## 各ファイル設定

1. Dockerfile を用意する

“`Dockerfile
FROM nginx:1.15.0

COPY ./src /usr/share/nginx/html
“`

2. src/index.html ファイルを用意する

“`html