今さら聞けないHTML　2020年05月24日

Day18~22 中間試験~基礎カリキュラム本試験

#本試験で学んだことについて

本試験は5/22に突破。

学んだことは詳細は後日まとめる。

CSS上のwidth 100%と100vw、またheight 100%と100vhについて、詳しくまとめておきたい。

fontawesomeのプロパティ

fontawesomeを使う時にサイズは位置の調整で
よくハマることがあったので備忘録としてメモしておきます。

スタイルシートであれこれするよりも
タグの中で指定したほうが管理が楽でした・・・

##フォントサイズ
タグの中で以下のサイズ指定ができます。

“`html
.75em
.875em
1.33em
2em
3em
4em
5em
6

Firebase で静的Webページを公開する。

#はじめに

個人用のポートフォリオサイトを公開するためにFirebaseを試してみました。
この記事はその記録です！

# 用意するもの
Googleアカウント

# nodeをインストールする
firebaseを操作するにはnodeが必要です。下記サイトからインストーラーをダウンロードします。
http://nodejs.org/

# インストールの確認

nodeをインストールするとnpmをもインストールされます。
下記のコマンドで2つのバージョンを確認しましょう。バージョンが表示されたらインストール成功です。

“`
npm -v
node -v
“`

# firebaseプロジェクトの作成

https://firebase.google.com へアクセスしGoogleアカウントでログインします。

![image.p

お絵かきできるSNSを作りたい！8

レイヤーの実装していきます。

↓この部分

まず、ラジオボタンのname属性を同じにします。

“`html:

上レイヤー

下レイヤー

“`

これで両方のラジオボタンにチェックが付く状態から、片方1つにチェックが付く状態になります。
次にレイヤーを作るに辺りcanvasが2枚必要なので増やしました。

↓変更前

“`html:

“`

↓変更後

“`html:

【備忘録】HTMLのテンプレート

単独のHTMLのテンプレートです。Vue.js版とかも下に書いてますが、CDN利用なのでNode.jsで使う場合とは異なるのでご注意を。
時々バージョンアップしたり追加したりします。

# ソースコード
## 汎用版
特にフレームワークを使用しないパターン。

“`html:index.html











“`

“`css:basic

初心者でもタグ1つで秒速PWA対応。GUIエディタ(また)作りました。

# 概要
0. [前回記事](https://qiita.com/e-chan1007/items/cd34ce0871943ee34396)のLGTMとストックありがとうございます!
1. PWAって便利ですよね。
2. PWAってなかなか複雑ですよね。
3. Service Workerとその登録スクリプト、1つにまとまっちゃいました。
4. manifest.jsonも動的(?)に読み込めますね。
5. 1行だけソース書けば対応できるようになりそう
6. できちゃったのでまたエディタつくっちゃいました([こちら](https://pwa.app.e-chan.cf/))

# はじめに
こんにちは。いーちゃんです。
突然ですが、あなたのサイトPWA、対応してますか?
すでに実装している人、これから実装する人、面倒でできていない人など、様々だと思います。
manifestとService Workerを書けば済むんですがそれすらも面倒だと時々思ったり…。
ということでPWA対応を秒でしていきましょう。
(例によって前置きが長いのでエディタを早く使いたい方は[こちら](#いざ実装

Vue.jsで作る！自動保存するToDoリスト~その2~Bootstrap編

#初めに
前回の
[Vue.jsで作る！自動保存するToDoリスト~その１~](https://qiita.com/fijii_rin/items/6dfc5717897895e42853)の続きです。
今回はBootstrapを使用して、前回作成したToDoリストの見た目を装飾していこうと思います。

##目次
・このパートでの完成イメージ
・Bootstrapの記述
・classの解説
・まとめ

##このパートでの完成イメージ

Bootstrapの知識が既にある人は中をいじって自己流で綺麗にしてください。

##Bootstrapの記述

“`html:index.html

Django初学者の自分へ（4） – メモアプリ作成 –

## **チュートリアル一覧**
| No. | タイトル | |
|—–|:—————————————————————|—:|
| 1 | [Django初学者の自分へ（1） – プロジェクト・アプリ -](https://qiita.com/Yi-Gaoqiao/items/c5b41d22907016ae1d0f) | |
| 2 | [Django初学者の自分へ（2） – MTVとは -](https://qiita.com/Yi-Gaoqiao/items/f375ea362034b8719440) | |
| 3 | [Django初学者の自分へ（3） – こんにちわ世界！ -](https://qiita.com/Yi-Gaoqiao/items/e63be4937dff96

【js】DropdownのUIを実装

# はじめに
JavaScriptのフレームワークやライブラリを使わずに **JavaScript、HTML、そしてCSSでドロップダウンUIを実装** したので、そのメモです。

ちなみにスタイル用途として、CSSフレームワーク[bulma](https://bulma.io/)とWebアイコンの[font-awesome](https://fontawesome.com/)を利用しています。

# DropwdownのUI動作確認
実際のDropdownのUIは以下のCodepensより確認できます。

初心者によるプログラミング学習ログ 324日目

#100日チャレンジの324日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
324日目は、

おはようございます
324日目　2h
・ポートフォリオ作成
・ふわっとでる演出追加#早起きチャレンジ大阪府のコロナ追跡システムを考えてみる3

大阪府のコロナ追跡システムの開発費が80万円以内、14日間で納めるシステム開発続き。
初めての方は1からご覧ください。

#詳細設計(内部設計)
DFD(データフロー図)とデータベース設計書を作成する。

DFD

事業者情報ばっかり。。。

##登録画面設計
Htmlを用いて事業者ごとに登録画面を作成する。

##データベース設計

###事業者管理テーブル
|名前|カラム名|データ型|制約|
| :– | :– | :– | :– |
|事業者ID|Store_id|char|Primary,Not NULL|
|事業者名|Store_name|varchar|Not NULL|
|登録日|Reg_date|date

元記事を表示

FC2ブログでGoogle Search Consoleを利用する

[FC2ブログ マニュアル](https://help.fc2.com/blog/manual/group112/1324#gsc2)

元記事を表示

ハンバーガーメニューなぜbuttonタグ？

buttonタグについて調べていたら知らなかったことが出てきたのでメモして置きます。

buttonタグはフォーカスされるのに対して、divタグはフォーカスされない。なので、キーボードアクセシビリティを失うことにもなるみたいです。
divタグでフォーカスされるように設定するには、tabindexやjavascriptの記述などプラスで作業することが必要。
というか、素直に正しい役割を持つものを使用するのが良さそうですね。

buttonのtype属性に[submit,reset,button]の三つがあったので、ハンバーガーメニューなどのbuttonには

“`html
開閉する
“`
が良さそうです。

アクセシビリティについて考えながらコードを書いたことがなかったので、これから少しずつ習得していきたい。

参考サイト
・https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
・https://html.spec.whatwg.org/multip

HTML 特殊文字 エスケープ処理

# HTMLの特殊文字とは

HTML上、ただの文字列ではなく、特殊な意味を持つ文字。

# エスケープ処理前と処理後
エスケープすると…(例↓)

– `<` → `<` - `&` → `&` ブラウザがHTLMLをレンダリングするときに、`<`が`<`に変換される。 その他の対応表は例えば以下リンク等に記載されている https://www.benricho.org/symbol/tokusyu_07_mark.html # 例 ``
を文字列として出力したい場合。

“`php:エスケープ処理
alert(“xssの危険”)‘;

function h($s) {
return htmlspecialchars($s, ENT_QUOTES, “UTF-8”);
}

?>

HTMLから画像を生成するシンプルな方法（Node.js）

どうもこんにちは、[@y_temp4](https://twitter.com/y_temp4)です。

最近、趣味で個人開発している Web サービスの [AnyMake](https://anymake.app) にて、画像を動的に生成するプログラムを書く機会があったのでその方法についてまとめてみます。

関連記事：[埋め込みコンテンツを追加しました！｜ AnyMake ｜ note](https://note.com/anymake/n/n2dbf8001c172)

## [node-html-to-image](https://github.com/frinyvonnick/node-html-to-image) を使う

自分は画像生成周りは全然詳しくないのですが、普段フロントエンドのコードを書くことが多いので

「**HTML から画像生成できたら便利だな〜**」

と思いました。

そこで少し調べると、[node-html-to-image](https://github.com/frinyvonnick/node-html-to-image)というライブラリが見つかり

Vue.jsで作る！自動保存するToDoリスト~その１~

#誰向けですか？

・Vue.js超初心者
・Vue.jsの基本構文は覚えたけど次は何すればいいの？
・リロードしたら消えちゃう！！

↑という方向けです。自分自身の学習のためにも記事を書かせていただきます！記述で間違いなどがありましたら教えてくださるとありがたいです?‍♂️

##このパートの完成イメージ

とりあえずinputに書いてbuttonを押すと配列(items)に追加できるようにしよう！
次回以降で順にCSSで見た目、watchやmountedを使用して保存できるようにします。

##このパートですること

1.HTMLを書いてVueで操作できるようにする
2.Vueで配列の作成やinputをバインディングする
3.関数を作成

disabled属性のフィールドのデータ送信方法

超絶初級レベルなんでしょうが、躓いたので備忘録としてdisabled属性のフィールドのデータを送信する方法をメモメモ、、、、。

#やりたかったこと＆躓いたこと
複数のラジオボタンのうち、１つのラジオボタンだけ権限付けをしておいて、権限がない人は、そのラジオボタンを選択できない。
ラジオボタン以外にもテキストエリアがあって、そのテキストエリアはだれでも編集できる。
権限がある当該のラジオボタンにif文でdisabled属性を付けておいた。
**しかし、初めから権限付きラジオボタンが選択されていて、権限がない人がテキストエリアを編集しようとすると、ラジオボタンの情報が送信されないので、ぬるぽ、、、。**

#disabled
formのフィールドにdisabled属性を付けると、無効状態になって入力できない＆データの送信もできない様になる。

#jsで送信直前にdisabled属性を解除
送信ボタン押下でdisabledを解除する。但しこれは、押下後画面遷移するまで時間がかかる場合、disabledだった項目が選択(入力)できるような状態になってしまうので、これじゃダメな場合もある。(解

html.erbでナンバリング（番号をふる）をする方法

HTMLの表示側で例えば、

* 特徴1
* 特徴1、特徴2
* 特徴1、特徴2、特徴3…

のように内容によって、数値が変わるように番号をつけるときに使うコード。
（とくに利用が多いのはこういうときだった）

# with_index(1) を利用する

こちらを利用することで、 ナンバリングスタート時の値を（）内の値からスタートすることができ、
`+1` と書く必要がなくなる。

“`erb

<% ....map.with_index(1) do |a, i| %>

<%= i %>

“`

# each.with_index

こっちだと、 `0` スタートになってしまうので、 `+1` と書く必要が発生する。

“`erb

<% ....map.each_with_index do |a, i| %>

<%= i + 1 %>

“`

TOC

TOC
Table of Contents
見出しから目次を作ってくれるようなやつ

初心者によるプログラミング学習ログ 323日目

#100日チャレンジの323日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
323日目は、

おはようございます
　323日目　1h
・ポートフォリオ作成

調べているうちに寝落ちしててほぼすすまず！#早起きチャレンジ