今さら聞けないHTML　2021年11月19日

HTMLのタグを調べる

#概要
HTML初心者のための備忘録。（ほぼ自分のため）

#HTML5入れ子チートシート
タグに対して、どのタグを内包することができるか調べる。
https://yoshikawaweb.com/element/

#HTMLクイックリファレンス
使うタグを調べたり、タグの意味を調べる。
http://www.htmq.com/

いまさら聞けないHTML（テキスト表現編）

# はじめに
社内Wikiに細々とまとめていたものをQiitaへ移行したいと考え、鋭意作業中。
適宜追記予定。

# i
テキストをイタリック文字にする

“`html
斜体になるよ
“`

いまさら聞けないHTML（文書情報・構造編）

# はじめに
社内Wikiに細々とまとめていたものをQiitaへ移行したいと考え、鋭意作業中。
適宜追記予定。

# p
段落を示す要素

“`html

Hellow!!

“`

iOS 15 Safari モーダル処理時にスクロール固定のために従来のやり方をするとおかしくなる件

##現象

モーダル表示される時に普段はoverflow hiddenして、スクロールさせない様にしてますが、iOSはoverflow hiddenしてもスクロールされるためbodyにfixedし、ずれた分のScrollTopからの位置をあてて対応してました。

ところがiOS１５にてその対応を行っているページで不具合が発生しました。

どうやらbodyにfixedすることでiOSで新たに追加された機能（タブバー）のせいなのかわかりませんが、bottomの基準位置が見た目とズレちゃうみたいなんですよね。

これがどういう状況で起こるかというと、下記に該当している場合です。

1.ページ下部にナビゲーションをfixedで置いている。（bottom: 0;など。）
２.modalなどの処理でbodyまたはhtmlにfixedしている時。

modalを開いてbody fixedしてスクロールを固定させると既に置いているページ下部のナビゲーションがタブバーの高さ分？隙間が出ちゃいます。

##対処法
とりあえずコードを。

“`javascript
class Ios15ModalHack

いまさら聞けないHTML（リスト編）

# はじめに
社内Wikiに細々とまとめていたものをQiitaへ移行したいと考え、鋭意作業中。
適宜追記予定。

# dl
定義型リストを作成する
dtとddによって構成される

“`html

　　

エラーコード

“`

# dt
dl内で定義する用語の部分を示す

“`html

エラーコード

“`

# dd
dl内で用語に対する説明部分を示す

“`html

エラーコード

いまさら聞けないCSS（テキスト編）

#はじめに
社内Wikiに細々とまとめていたものをQiitaへ移行したいと考え、鋭意作業中。
今回はテキストを操るCSSをまとめました。
適宜追記予定。

# text-align
要素内のテキストの水平方向の位置を設定する

| 値 | 意味 |
| —- | —- |
| left | テキストを左揃えにする（デフォルト） |
| center | テキストを中央揃えにする |
| right | テキストを右揃えにする |

“`html

if文

“`html:index.html

アニメーション

```html:index.html

button

クリックイベント

```html:index.html

button

```
```html:ind

flexbox

```html:index.html

```
```css:base.css
#wrapper {
background-color: #0f0;
padding: 50px 0;
display: flex;
}

#box1 {
width: 500px;
height: 300px;
background-color: #f00;
margin: auto;
}

#box2 {
margin: auto;
width: 500px

bootstrap4のテンプレートを使ってjqueryの簡易テスト

初心者の強い味方、BootstrapはjQueryを使い始めた初心者には強い味方。

functionで画面操作をひとまとめにするのってどうやるんだっけ？
簡易に確認したいけど、すぐ実装ってのもなぁ・・・
というわけで、テスト用にコピペで出来るbootstrap4を使って確認してみました。

bootstrap4のテンプレートなら楽にテストができるかなと思い実行してみた。

See the Pen input type number でeを入力させたくない

サーバ側のバリデーションで1eなどのべき乗の数値がはいってくると期待するチェックができないことがある。
なので、そもそも入力できないようにする。

$("input").keydown(function(e) {
if ((e.which && e.which === 69) || (e.keyCode && e.keyCode === 69)) {
return false;
} else {
return true;
}
});

HTMLの基本的な書き方

#HTMLとは
***HTML***は、***HyperText Markup Language***の略で、主にwebサイトに表示される画面を作成するために使用されるマークアップ言語の1つ。
マークアップ言語は、***タグ***で囲む(Markup)ことでレイアウトや構造などを指定することができる。

# 基本的な書き方
HTMLのタグには開始タグ```<>```と終了タグ``````がある。タグは大文字、小文字どちらでも使用することができる。
まず、HTMLを記述する上での基本構造で重要なタグが以下の3つである。
■***\...\*** : HTMLの文章であることを宣言するタグ
■***\...\*** : 文章のヘッダ情報を指定するタグ
■***\...\*** : 画面に表示される部分を記述するタグ

例として、「Hello, world!」と画面に表示する場合は以下のように書ける。

```html


　

モーダルの切り替え：自分用

暇を持て余す社内ニートその３（多分）

モーダルの切り替え：解説でなく自分用
閲覧になった方は参考のURLへ移動するか、検索しなおすことをお勧めします。

HTMLはパクリ
・モーダルは待機状態イメージ。

#やってること
モーダル１：message-modal1　を開いてOKすると
モーダル２：message-modal2　を開く
モーダル２をキャンセル（insert-message-cancel ）したらモーダル１に戻る。

##HTMLの中

```html:html

モーダル1

【帳票ツール】JavaScriptをベースとしたStimulsoft Reports.JSをとにかく試してみる

以前、[こちら](https://qiita.com/REQWARE/items/169479c4c94dc41c9722)で紹介した帳票ソリューションである「Stimulsoft」をさくっと試す方法について書いてみます。今回は、HTML化が容易な、JavascriptライブラリのStimulsoft Reports.JSを使用します。

#前提
gitとnpmはインストール済みとします。

# Stimlsoftのサンプルアプリの場所（github）
https://github.com/stimulsoft/Samples-JS

こちらのリポジトリには、Node.js、JavaScript、ASP.NET、PHP、AngularJS、Angular、React、Vue.jsアプリケーションのレポートツールであるStimulsoftReports.JSのサンプルが含まれています。
#サンプルアプリのクローン
インストール先のディレクトリに移動した後に、リポジトリをクローンします。

```shell
$ git clone https://github.com/stimulsoft

marginとpadding

```html:index.html

box1

box2

```
```css:base.css
#box1 {
color: red;
width: 500px;
height: 300px;
background-color: #f00;
margin-top: 50px;
margin-left: 50px;
padding: 30px
}

#box2 {
margin: auto;
color: blue;
padding: 50px;
width:

複数要素の配置

```html:index.html

box1

box2

```
```css:base.css
@charset "UTF-8";
.size{
width: 500px;
height: 300px;
font-size: 40px;
}
.fontr{
color: red;
}
.fontb{
color: blue;
}
.backr{
background-color: red;
}
.backb{
background-color: blue;
}
```

【Cocoon、WordPress】Cocoonでダークテーマとライトテーマで配色を使い分ける方法をメモ書いておく

## はじめに
自分で開設しているブログをダークテーマにも対応するようにしたときのメモを残しておきます。

## 設定方法
### headタグにmetaタグを追加する。
以下のHTMLをheadタグ内に入れることで、ライトテーマとダークテーマを規定できます。

```HTML

```

そして、どうやったらCocoon上で設定できるかというと、
Cocoon設定の「アクセス解析・認証」タブ内で追加できます。
「ヘッド用コード」に書きたいmetaタグを書けばそれが追加されます。

そして、追加した後のページのソースコードにあることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast

[Vue 3] 親コンポーネントから子コンポーネントのinputをfocusさせる方法

# 環境

vueバージョン: 3.0.0
※ Composition API の形式で記述しています。
検証ブラウザ: Google Chrome

# やりたいこと
Todoアイテムを表示する親コンポーネント(Todo.vue)と、Todoアプリを追加するフォームの子コンポーネント(AddForm.vue)に分かれたTodoアプリで、
・ページの初回読み込み時
・Todoの追加、削除後
に子コンポーネントのinputに自