怖いか？逃げたいか？
逃げたら負けだ。逃げたら３歩下がる前に進めば１歩だ
Menu
HTMLの基本
見出し
p（段落）
改行
抜粋－引用
文字のサイズと強調
水平線
箇条書きの書き方２種類
テーブルタグ
テーブルタグに細かく指定できる
ファイルの指定方法
画像の表示方法
画像の重なり表示
画像のページ全体表示
画像の装飾変更
テキスト型ハイパーリンク
動画再生(MP4)
音楽再生(MP3)
nav-menu
span
div.section.article
変わった表記(dl)(dt)(dd)
特殊記号
ソースコードの表示
外部埋め込み画像
各種フォーム欄
HTMLの基本のベース
<>文章など記入</>
見出し
h1-見出し
h2-見出し
h3-見出し
h4-見出し
h5-見出し
h6-見出し
<h1>h1-見出し</h1>
<h2>h2-見出し</h2>
<h3>h3-見出し</h3>
<h4>h4-見出し</h4>
<h5>h5-見出し</h5>
<h6>h6-見出し</h6>
<h7>h7-見出し</h7>
p（段落）の使用
これはpタグを使用している
<p>これはpタグを使用している</p>
改行
天才になりました（１０代）
なんでも可能です。
<p>天才になりました（１０代）<br>なんでも可能です。</p>
抜粋－引用
天の声:
天は我に力を与えた。行動すれば何でもできる。
伝説の封印された力が解放
され真の力が目覚め望むものを手に入れる
<p>天の声:
<blockquote>天は我に力を与えた。行動すれば何でもできる。</blockquote></p>
<p>伝説の封印された力が解放
<q>され真の力が目覚め望むものを手に入れる </q> </p>
文字のサイズと強調
瞑想を始めると自分自身がわかったので行動できた...
好きな言葉は天上天下唯我独尊かっこいい
嫌なことは何もしないで言葉だけかっこよく話す時である
<p>瞑想を始めると<big>自分自身</big>がわかったので行動できた...</p>
<p>好きな言葉は<strong>天上天下唯我独尊</strong>かっこいい</p>
<p>嫌なことは<small>何もしない</small>で言葉だけかっこよく話す時である</p>
水平線
水平線の練習用
水平線の練習用
水平線の練習用
<h2>水平線の練習用</h2>
<hr>
<h3>水平線の練習用</h3>
<p>水平線の練習用</p>
<hr>
箇条書きの書き方２種類
「・」箇条書き
- 神は存在するのか？
- 天は広大だ
- 宇宙の心理を知りたい
<ul>
<li>神は存在するのか？</li>
<li>天は広大だ</li>
<li>宇宙の心理を知りたい</li>
</ul>
「123」箇条書き
- 天空に輝く７つの星
- 世界は一つになれるのか？
- 世界平和
<ol>
<li>天空に輝く７つの星</li>
<li>世界は一つになれるのか？</li>
<li>世界平和</li>
</ol>
テーブルタグ
| 天才 | 大馬鹿 | 諦めた |
|---|---|---|
| 一部 | 努力 | 根性 |
| 紙一重 | 空気読まない | 考えず即行動 |
| 失敗 | 行動しない | 普通でいい |
<table border="1">
<tr>
<th>天才</th>
<th>大馬鹿</th>
<th>諦めた</th>
</tr>
<tr>
<td>一部</td>
<td>努力</td>
<td>根性</td>
</tr>
<tr>
<td>紙一重</td>
<td>空気読まない</td>
<td>考えず即行動</td>
</tr>
<tr>
<td>失敗</td>
<td>行動しない</td>
<td>普通でいい</td>
</tr>
</table>
テーブルタグに細かく指定できる
(ヘッダー行=thead)(セクション行=tbody)指定できる
cssで装飾したもの(特殊記号)の(table)が見本
詳しくは、cssの場所で解説する
| A | B | C |
|---|---|---|
| 元気 | ハツラツ | 一生懸命 |
| 生涯 | 学習 | 努力 |
| 愛 | 恨み | 妬み |
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>元気</td>
<td>ハツラツ</td>
<td>一生懸命</td>
</tr>
<tr>
<td>生涯</td>
<td>学習</td>
<td>努力</td>
</tr>
<tr>
<td>愛</td>
<td>恨み</td>
<td>妬み</td>
</tr>
</tbody>
</table>
ファイルの指定方法
画像の表示方法(img src)
<img src="img/logo.png" alt="ロゴ画像">
画像の説明欄表示
かわいいロゴ画像
<figure><img src="img/logo.png" alt="ロゴ画像"><figcaption>かわいいロゴ画像</figcaption></figure>
<img src="img/logo.png" alt="ロゴ画像">
<figure><img src="img/logo.png" alt="ロゴ画像"><figcaption>かわいいロゴ画像</figcaption></figure>
画像の重なり表示(z-index)
z-index: (10 20 30); 数字が大きいものが上に表示される
白(z-index: 10;)赤(z-index: 30;)青(z-index: 20;)青は赤に文字消された
z-index: 10;
z-index: 30;
z-index: 20;
<div class="z-div">
<div class="z-div1">z-index: 10;</div>
<div class="z-div2">z-index: 30;</div>
<div class="z-div3">z-index: 20;</div>
</div>
.z-div {
position: relative;
}
.z-div1 {
position: absolute;
top: 0;
left: 0;
background-color: white;
z-index: 10; /* 数字が大きいものが上に表示される */
}
.z-div2 {
position: absolute;
top: 0;
left: 0;
background-color: red;
z-index: 30; /* 数字が大きいものが上に表示される */
}
.z-div3 {
position: absolute;
top: 0;
left: 0;
background-color: blue;
z-index: 20; /* 数字が大きいものが上に表示される */
}
画像のページ全体表示
ここでは分かりにくいが、ページ全体に画像が広がっている
この指定した範囲が、実際はページの囲んだ範囲を後ろ側を装飾している
重なりも関係ない
<div class="full-div">
h1 h2 p imgなどを記入
</div>
.full-div {
background-image: url(../img/back.jpg); /* 背景画像 */
min-height: 100vh; /* 100vhはビューポートの高さの100%を意味 */
background-size: cover; /* 背景画像が要素全体を覆うようにスケーリングされることを意味 */
}
画像の装飾変更
画像の装飾変更 : CSS
最初に専門ソフトで加工したほうが楽だよ
ブレンドモード
background-color: red; /* 背景色 */
ここで設定した色が画像に重なる
background-blend-mode: multiply; /* ブレンドモード(multiply) */
グラデーション
background-image: linear-gradient(90deg, red, blue); /* 線形グラデーション */
background-image: radial-gradient(circle, red, blue); /* 円形グラデーション */
テキスト型ハイパーリンク（別リンクに移動する）
サイトのメインページに移動サイトのメインページに新しいウインドウを開いて移動
<a href="index.html">メインページに移動</a>
<a href="index.html" target="_blank">サイトのメインページに新しいウインドウを開いて移動</a>
画像型ハイパーリンク（別リンクに移動する）
<a href="index.html"><img src="#" alt="button-logo画像"></a>
動画再生(MP4)
<video src="move/web-de.mp4" controls></video>
音楽再生(MP3)
<audio src="music/Cosmos.mp3" controls></audio>
nav-menu（header）で使用している場合が多い
<nav>
<a href="index.html">最初のページ</a>
<a href="index.html">最初のページに戻る</a>
<a href="index.html">最初のページに行く</a>
</nav>
spanタグの説明（見た目に変化なし）cssで使用
わが生涯に一片の悔いなし
<p>わが生涯に<span>一片の悔い</span>なし</p>
div.section.article（見た目に変化なし）cssで使用
天才は、1%の才能と99%の努力だ
地球は行動の星だ
<div>
<p>天才は、1%の才能と99%の努力だ</p>
<p>地球は行動の星だ</p>
</div>
<article>
<section>
<p>怖いか？逃げたいか？</p>
<p>逃げたら負けだ。逃げたら３歩下がる前に進めば１歩だ</p>
</section>
</article>
変わった表記(dl)(dt)(dd)
- 見出し
- 文章
<dl>
<dt>見出し</dt>
<dd>文章</dd>
</dl>
特殊記号
特殊記号とは、htmlで、文字化けや表示されない記号などを表示させるコード
とても量が多いので、個人的に使用が多いコードを表示
参考の紹介ページ紹介(このページブックマークして戻って来てね)
特殊文字の参考サイトに移動
| ソースコード | 表示記号 | 説明 |
|---|---|---|
| " | " | クォーテーション |
| & | & | アンパサンド |
| < | < | 小なり |
| > | > | 大なり |
| | 空白 | |
| © | © | コピーライト |
| ソースコード | 表示矢印 |
|---|---|
| ← | ← |
| ↑ | ↑ |
| → | → |
| ↓ | ↓ |
| ↔ | ↔ |
| ↵ | ↵ |
| ⇐ | ⇐ |
| ⇑ | ⇑ |
| ⇒ | ⇒ |
| ⇓ | ⇓ |
| ⇔ | ⇔ |
| 文字表記 | 文字 | 説明 |
|---|---|---|
| ◊ | ◊ | lozenge |
| ♠ | ♠ | スペード |
| ♣ | ♣ | クラグ |
| ♥ | ♥ | ハート |
| ♦ | ♦ | ダイヤ |
| 文字表記 | 文字 | 説明 |
|---|---|---|
| ¥ | ¥ | 円 |
| € | € | ユーロ |
| ¢ | ¢ | セント |
| £ | £ | ポンド |
| ® | ® | 登録商標 |
ソースコードの表示して画面内で選択する方法(3種類)
<pre>
<code>
<p>複数行ソースコード表示</p>
<p>複数行ソースコード表示</p>
</code>
</pre>
<code>
<p>ワンコードの例(1行)</p>
</code>
これはアンパサンドの例です:&
これはエンティティの例です:&
URLクエリでの使用例: https://example.com/?key=value&id=123
外部埋め込み画像(グーグルマップ)(ユーチューブ動画)など
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3233.465760903371!2d138.3337327124704!3d35.862101319900596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601c6bcb2653398d%3A0xb6331ba3efde6534!2z6Lqr5pu-5bKQ56We56S-!5e0!3m2!1sja!2sjp!4v1735954718985!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
申し込み-お問い合わせ-各種フォーム欄
送信:リセット:しても変化なし:今回は形だけ紹介してるよ
<form>
<label>氏名</label>
<input type="text" placeholder="名前を入力してください">
<br>
<label>年代</label>
<select>
<option>10代</option>
<option>20代</option>
<option>30代</option>
<option>40代</option>
</select>
<br>
<label>お問い合わせ内容</label>
<textarea placeholder="内容を入力してください"></textarea>
<br>
<label>男性</label><input type="radio" name="gender">
<label>女性</label><input type="radio" name="gender">
<label>トランスジェンダー</label><input type="radio" name="gender">
<br>
<details>
<summary>隠れた文字を見てみる</summary>
ねだるな勝ち取れさすれば与えられん
</details>
<label>伝説の言葉に同意する</label>
<input type="checkbox">
<br>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
& は HTML エンティティの一つで、アンパサンド (&) を表現するために使用されます。
HTMLでは、アンパサンド (&) は特殊文字として使われ、エンティティの開始記号として使用されます。
たとえば、<（小なり記号）や >（大なり記号）のようにエンティティを定義します。
そのため、HTMLで純粋にアンパサンドを表示したい場合、& を使用する必要があります。