HTMLの基本の書き方

見出し

  
  <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>天才になりました（１０代）<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」箇条書き

1. 天空に輝く７つの星
2. 世界は一つになれるのか？
3. 世界平和

  
  <ol>
  <li>天空に輝く７つの星</li>
  <li>世界は一つになれるのか？</li>
  <li>世界平和</li>
  </ol>
  

「ツールバーメニュー式」箇条書き

黄金の財宝

世界征服世界征服

宇宙人

  
  <menu>
  <li>天空に輝く７つの星</li>
  <li>世界は一つになれるのか？</li>
  <li>世界平和</li>
  </menu>
  

「電話番号などで便利」箇条書き

営業時間

10:00~19:00(平日)

09:00~10:00(祝日)

  
  <dl>
  <dt>営業時間</dt>
  <dd>10:00~19:00(平日)</dd>
  <dd>09:00~10:00(祝日)</dd>
  </dl>
  

「絵文字」箇条書き

お勧め変換サイト

お勧め絵文字サイト

• いつも元気
• いつでも幸せ
• 失敗は成功の元

  
  <ul class="emoji-ul">
  <li>いつも元気</li>
  <li>いつでも幸せ</li>
  <li>失敗は成功の元</li>
  </ul>

  .emoji-ul {
  list-style:"/1F600";  
  }
  

テーブルタグ

天才君	大馬鹿	諦めた
一部	努力	根性
紙一重	空気読	即行動
失敗	行動	普通

  
  <table>

    <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>
  

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="logo画像">
  

画像の説明欄表示

  
  <figure><img src="../img/logo.png" alt="ロゴ画像"><figcaption>画像説明用画像</figcaption></figure>

  /* 画像の説明欄表示の文字を中央にしてる*/
  figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  }

  /* 画像の説明欄表示の文字を中央にしてる*/x
  figcaption {
  text-align: center;
  margin-top: 8px;
  font-size: 1em;
  color: black;
  }
  

画像の重なり表示(z-index)

  
  <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 {
  width: 100vw;                                  /* ビューポート幅いっぱい */
  background-image: url(../img/back.jpg);      /* 背景画像 */
  height: 100vh;                             /* 100vhはビューポートの高さの100%を意味 */
  background-size: cover;                   /* 背景画像が要素全体を覆うようにスケーリングされることを意味 */
  }
  

画像の装飾変更

  
  ブレンドモード 

  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="#"><img src="../img/logo/logo.png" alt="button-logo画像"></a>
  

動画再生(MP4)

  
  <video src="../move/web-de.mp4" controls></video>
  

音楽再生(MP3)

  
  <audio src="../music/Cosmos.mp3" controls></audio>

  audio {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  }
  

nav（header）で使用している場合が多い

      
  <nav>
    <a href="#">Top</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </nav>
  

spanタグの説明（見た目に変化なし）cssで使用

  
  <p>わが生涯に<span>一片の悔い</span>なし</p>
  

div.section.article（見た目に変化なし）cssで使用

  
  <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>
  

特殊記号

ソースコード	表示記号	説明
"	"	クォーテーション
&	&	アンパサンド
&lt;	<	小なり
&gt;	>	大なり
&nbsp;		空白
&copy;	©	コピーライト

ソースコード	表示矢印
←	←
↑	↑
→	→
↓	↓
↔	↔
↵	↵
⇐	⇐
⇑	⇑
⇒	⇒
⇓	⇓
⇔	⇔

文字表記	文字	説明
◊	◊	lozenge
♠	♠	スペード
♣	♣	クラグ
♥	♥	ハート
♦	♦	ダイヤ

文字表記	文字	説明
¥	¥	円
€	€	ユーロ
¢	¢	セント
£	£	ポンド
®	®	登録商標

ソースコードの表示して画面内で選択する方法(3種類)

  
  <pre>
    <code>
      <p>複数行ソースコード表示</p>
      <p>複数行ソースコード表示</p>
    </code>
  </pre>

  <code>
    <p>ワンコードの例(1行)</p>
  </code>
  

外部埋め込み画像(グーグルマップ)(ユーチューブ動画)など

  
  <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>
  

申し込み-お問い合わせ-各種フォーム欄

氏名
年代 10代 20代 30代 40代
お問い合わせ内容
男性 女性 トランスジェンダー

隠れた文字を見てみる

ねだるな勝ち取れさすれば与えられん

伝説の言葉に同意する

送信:リセット:しても変化なし:今回は形だけ紹介してるよ

  
  <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>