Private Chamber - HTML

　ノーコメント.

コメントアウト

<!-- コメント -->

<!--
複数行コメント
-->

CSSをタグに埋め込む

<○○ style="××: ABC;"></○○>

コードのヘッダにCSSのコードを書く

<style type="text/css"></style>

見出し

　h1からh6まである

<h1>見出し</h1>

段落

<p>段落</p>

太字・斜体・下線

<b>文字</b>
<i>文字</i>
<u>文字</u>

打消し線

<s>文字</s>
<strike>文字</strike>

改行

<br>

線

↓

---

↑

<hr>

範囲指定

<div>範囲</div>
<span>範囲</span>

画像

<img src="image.png" width=240px height=240px alt="代替テキスト">

動画

表

<table border="1">
  <tr>
    <th>見出し</th>
    <td>要素</td>
  </tr>
</table>

ルビ

<ruby><rb>薔薇</rb><rp>(</rp><rt>バラ</rt><rp>)</rp></ruby>

半角スペース・改行適用

<pre>a a</pre>

リンク

<a href="#"></a>

・# で同じページ(現在いるページ)
・同じページ内でリンクするなら

「<a href="#link">リンク</a>」セクションへ
  <h3 id="link">リンク</h3>

「リンク」セクションへ
・新しいタブを開くなら

<a href="#" target="_blank"></a>

・カーソルを重ねてタイトル表示

<a href="#" title="タイトル"></a>

ボタン

<button>
<button disabled="disabled">
<button name="名前">

テキストボックス

<textarea></textarea>
<textarea cols="20"></textarea>
<textarea disabled="disabled"></textarea>
<textarea maxlength="100"></textarea>
<textarea name="名前"></textarea>
<textarea readonly="readonly"></textarea>
<textarea required="required"></textarea>
<textarea rows="2"></textarea>

折りたたみ

　summaryに折り畳みタブのテキストラベルを書く

<details><summary>タイトル</summary>内容</details>

「<」のエスケープ

＆lt;

半角スペース

＆nbsp;

参考

指定idの要素を取得

var val = document.getElementById("id");

指定classの要素を取得

var val1 = document.getElementsByClassName("class");
var val2 = element.getElementsByClassName("class");

　HTMLCollectionというアレイで返ってくる

指定idのcssの値を取得

var element1 = document.getElementById("id");
var element2 = getComputedStyle(element).padding

cssの値を変える

documents.getElementById("id").style.fontSize = "20px";

画面の大きさ

var val = window.innerWidth;

画面の形によってスタイルを変更

　横長なら赤く、縦長なら青くなる例(リアルタイム)

<script type="text/javascript">
  //読み込み時の表示
  window_load();
    
  //ウィンドウサイズ変更時に更新
  window.onresize = window_load;

  //サイズの表示
  function window_load() {
    if(window.innerWidth > window.innerHeight){ //横長
      document.getElementById("test").style.color = "#f00";
    } else { //縦長
      document.getElementById("test").style.color = "#00f";
    }
  }
</script>