HTMLのチートシート
HTMLのチートシート
HTMLのチートシートを作成しました。
HTMLに必要なタグ
1. DOCTYPE
HTMLファイルがどのように記載されているかを宣言できる。
例えば以下のように記載すると、この文書がHTML5で作成されたものであることを指定することが出来ます。
<!DOCTYPE html>
2. html
htmlの本文を伝える。
日本語を指定する場合は以下のように記載
<html lang="ja"></html>
3. head
HTMLファイルに必要な情報を記載
<head> <meta charset="utf-8"> <title>MyPage</title> <link rel="icon" href="favicon.ico"> <meta name="description" content="HTMLのサンプルサイト"> </head>
2行目で文字コードをutf-8に指定
3行目でタイトルを指定
4行目でファビコンを指定
5行目でSEO検索された時の表示名と詳細内容を指定
4. body
HTMLファイルの文章の内容を記載
他にも必要なタグはたくさんありますが、主要な箇所はこの辺りかなと.....
段落と見出し
1. 段落
段落は<p>~</p>タグで作成できます。
2. 見出し
見出しは６段階あります。
<h1>~</h1>から<h6>~</h6>
h1が一番大きな段落でh6が一番小さい段落です。
<body> <h1>これはh1です</h1> <h2>これはh2です</h2> <h3>これはh3です</h3> <h4>これはh4です</h4> <h5>これはh5です</h5> <h6>これはh6です</h6> </body>
強調と区切り線
1. 強調を示す
<em>~</em>を使うと強調できる。
<p>hogehoge<em>ここはemで選択された箇所です。</em>hogehogehogehoge</p>
2. 重要性を示す
<strong>~</strong>を使うと強調できる。
<p>hogehoge<strong>ここはstrongで選択された箇所です。</strong>hogehogehogehoge</p>
3. 区切り
区切り線を入れたい時は<hr>を使う
<p>hogehoge<em>ここはemで選択された箇所です。</em>hogehogehogehoge</p> <hr> <p>hogehoge<strong>ここはstrongで選択された箇所です。</strong>hogehogehogehoge</p>
改行
改行したい箇所に<br>を記載すると改行できます。
<p>こんにちは、僕の名前はああああああです。<br> これからよろしくお願いしますね！ </p>
リスト
1. 番号がつくリスト
< ol > ~ </ol> (ordered lists)とリストを作成する<li> ~ </li>で番号付きリストを作成できます。
<ol> <li>1つ目の項目</li> <li>2つ目の項目</li> <li>3つ目の項目</li> <li>4つ目の項目</li>[f:id:lhiroki1205:20190218104024j:plain][f:id:lhiroki1205:20190320074153p:plain] </ol>
2. 順番がつかないリスト
< ul > ~ </ul> (unordered lists)とリストを作成する<li> ~ </li>で番号付きリストを作成できます。
<ul> <li>1つ目の項目</li> <li>2つ目の項目</li> <li>3つ目の項目</li> <li>4つ目の項目</li> </ul>
ちなみに入れ子構造で作成も可能です！
<ul> <li>1つ目の項目</li> <ul> <li>1つ目の項目のその１</li> <li>1つ目の項目のその２</li> <li>1つ目の項目のその３</li> </ul> <li>2つ目の項目</li> <li>3つ目の項目</li> <li>4つ目の項目</li> </ul>
情報がセットになったリスト
情報のセットを<dl> ~ </dl>情報の項目を<dt> ~ </dt>情報の内容を<dt> ~ </dt>で表示させることができます。
<dl> <dt>質問1</dt> <dd>答え1</dd> <dt>質問2</dt> <dd>答え2</dd> <dt>質問3</dt> <dd>答え3</dd> </dl>
アンカータグ
<a> ~ </a>を利用すればリンクを作成できます！
（href属性はリンクの飛び先を指定）
<a href="https://google.com">googleに飛びまっせ！</a>
ちなみにhrefをidにすると、ページ内リンクを作成することも可能です！ （id属性はページの中のある特定の部分について名前をつける）
<a href="#index">リンク先はidがindexのところ</a> <p id="index">ここはindexというidがついてます！</p>
相対パスと絶対パス
これ意外とハマりやすい.....
1. 相対パス
今いる場所を基準にして相手がどこにいるのかを伝える書き方
例）同じ層上のフィルを指定する書き方
ファイル名
例）今いる場所の1階層上のファイルを指定する書き方
.. / ファイル名
例）今いる場所の2階層上のファイルを指定する書き方
.. /.. / ファイル名
例）今いる場所の2階層上のフォルダの中にあるファイルを指定する書き方
.. /.. / フォルダ名/ファイル名
2. 絶対パス
相手がどこにいるのかを確実に伝える書き方(URLとか)
画像
<img> ~ </img>を使えば画像を貼り付けられます。
src属性はソースの参照先を伝えます。
alt属性は画像がどんなものかを伝えます。
title属性が画像のタイトルを伝えます。
<p>画像貼り付けまっせ</p> <img src="image.jpeg" alt="サンプル画像" title="猫ちゃん">
ファイルの読み込み
1. linkタグ
スタイルシート、ファビコンを読み込む時に使う。
<link rel="stylesheet" type="text/css" href="style.csss"> <link rel="icon" href="favicon.ico">
2. scriptタグ
JavaScriptを読み込む時に使う。 JavaScriptを書き込む時に使う。
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript"> ここにJSの記述 </script>
iframe
HTMLでiframeを使う方法【初心者向け】 | TechAcademyマガジン
youtubeとかをHTMLに埋め込む時などにも利用することが多いです。
インフラインフレーム（特定のファイルをページの一部に表示させる）
1. src属性で表示させるファイルの場所を指定する
2. width属性で幅を指定する
3. height属性で高さを指定する
<iframe src="iframe.html" width="200" height="100"></iframe> 別途iframe.htmlを用意する必要があります
行とセル（HTMLのテーブル）
1. テーブル （表）
<table> ~ </tabele>
ちなみにborder属性を指定するとテーブルにボーダがついてわかりやすくなります！
2. 行（レコード）
<tr> ~ </tr>テーブルのレコード
3. セル（マス）
<td> ~ </td>テーブルのデータ
<th> ~ </th>テーブルのヘッダー
<table border="1"> <tr> <th>日本語</th> <th>英語</th> </tr> <tr> <td>東京</td> <td>Tokyo</td> </tr> <tr> <td>大阪</td> <td>Osaka</td> </tr> <tr> <td>滋賀</td> <td>Shiga</td> </tr> <tr> <td></td> <td>Okinawa</td> </tr> </table>
表のヘッダーとフッダー
1. 表のヘッダー
thead
2. 表のフッダー
tfoot
3. 表のボディ
tbody
<table border="1"> <thead> <tr> <th>日本語</th> <th>英語</th> </tr> </thead> <tbody> <tr> <td>東京</td> <td>Tokyo</td> </tr> <tr> <td>大阪</td> <td>Osaka</td> </tr> <tr> <td>滋賀</td> <td>Shiga</td> </tr> <tr> <td></td> <td>Okinawa</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">最後まで見ていただきありがとー</td> </tr> </tfoot> </table>
<td colspan="2">最後まで見ていただきありがとー</td>のcolspan="2"はセルの結合（２つ分）をしている。
テキスト入力
テキスト入力の方法は色々あります
<!-- 分かりやすいようにname属性をつける --> <input name="name" type="text"> <br> <input name="pass" type="password"> <br> <!-- textareaの大きさはrows（縦幅）とcols（横幅）で変更できる --> <!-- textareaの中に文字を書くとデフォルトで記載されるようになる --> <textarea name="info" rows="10" cols="30"></textarea>
ラジオボックスとチェックボックス
1.ラジオボックス（一つしか選択しない場合）
inputタグでtype属性をradioにする。
同じname属性の中で一つを選択する。
value属性で送信する値を指定する。
<input type="radio" name="gender" value="male"> 男性 <br> <input type="radio" name="gender" value="female"> 女性<br><br>
2.チェックボックス（複数選択が可能の場合）
inputタグでtype属性をcheckboxにする。
name属性が同じものをひとまとめとして扱われる
value属性で送信する値を指定する
<input type="checkbox" name="musiic" value="jazz">ジャズ<br> <input type="checkbox" name="musiic" value="pops">ポップス<br> <input type="checkbox" name="musiic" value="rock">ロック<br>
# ドロップダウンメニュー
selectタグに対してname属性を指定。
項目ごとにoptionタグを指定
optionタグに対してvalue属性を指定して送信する値を指定する。
optgroupタグでグルーピングが可能。
<select name="address"> <optgroup label="関東"> <option value="tokyo">東京</option> <option value="osaka">大阪</option> </optgroup> <optgroup label="関西"> <option value="shiag">滋賀</option> <option value="Kyoro">京都</option> </optgroup> </select>
ボタン
formタグで囲むことで送る値を一つのデータにすることができる。
inputタグtype属性をsubmitにすることで入力したデータを送信するボタンが出来る。
POST: データを裏でまとめて送る GET: URLの一部として送る <form method="POST" action="#"> <select name="address"> <optgroup label="関東"> <option value="tokyo">東京</option> <option value="osaka">大阪</option> </optgroup> <optgroup label="関西"> <option value="shiag">滋賀</option> <option value="Kyoro">京都</option> </optgroup> </select> <input type="submit" value="送信"> </form>
