Go to Qiita Advent Calendar 2024 Top
LoginSignup
10
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@intern

HTML入門（nojimayusuke）

Last updated at Posted at 2014-05-01

##まとめ

#HTML

###概要

  • ホームページを作るための言語
  • Hyper Text Markup Language

###ツール

  • テキストエディタ
  • ブラウザ（Google Chrome）

###基本構造

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>初めてのHTML</title>
    </head>
    <body>
        <p>こんにちは！</p>
    </body>
</html>

##書き方

  • HTMLは基本的にテキストをマークアップする記法で、タグを囲んでいくという書き方でマークアップしていく。
  • タグの囲み方は「<タグ>テキストタグ>」
  • 行頭のタグを「開始タグ」、行末のタグを「終了タグ」と呼ぶ
  • タグは不等号記号で囲い、終了タグはタグ名の前に「/」を付けるのを忘れない
  • タグによっては属性を取ることができて、更にその属性が値を取ることもできる。この指定によって幾つかの表現が可能になる。
  • 文字コードは「utf-8」を指定
  • HTML5は拡張子が必ず.htmlになる。

##基本的なタグ

  • <!DOCTYPE html> 文書宣言
  • <html land="ja"> 言語設定日本語
  • <meta charset="utf=8"> 文字コード設定

##meta,style,linkタグについて

  • description このサイトの説明を完結に示したもの。検索結果としても使われるので正確に表記すること。
  • style 見た目を規定していくstylesheetと呼ばれるもの。
  • 例：pタグの文字色を赤にする場合styleタグに記述する。
    p { color: red; }
  • link　stylesheetを別のファイルから読み出すときに使用する。また、faviconにも使うことができる。faviconとはブラウザで表示した時タイトルの横に現れる小さいアイコンのこと。

##h1~6,br,strong,hrタグについて

  • <h1>大見出し</h1>
  • <h2>中見出し</h2>
  • <h3>小見出し</h3>
  • <br> 改行
  • <strong>Text</strong> Textが太字になる
  • <hr> 水平線を引く

##ui,ol,liタグでリストの作成

  • ui(Unordered List) 単に箇条書きしたいときに使用
  • ol(Ordered List) 箇条書きではなく、数字付きのリストにしたいときに使用
  • li(List Item ) リスト表示したい項目を囲う

##tableタグについて

  • tableタグ　表組みを表現するために使用
  • まずはtableタグを書いて、その中にthead要素を付ける。<table>から</table>で囲まれた部分が一つのテーブル（表）になる。
    • tr: table row(行を作成)
    • th: table header(見出しを作成)
    • td: table data(実際のデータを記述)

##aタグでリンク

  • <a href="URL"> URLの場所がリンクになる
  • target="_blank"　別のタグでリンクを開く
  • <a href="hello.html">Hello</a> 外部サイトではなく、自分で作成したhello.htmlにページを飛ばす。
  • <p><a href="#hello2">hello2</a></p> ページ内リンクの作り方。ページの途中に飛ばしたいというときに使用する。
  • <p id="hello2">hello 2 !!!</p>　ページ内リンクの飛ばす先の指定方法

##imgタグについて

  • imgタグ　画像を表示させる -> <img src="画像ファイル名.jpg">
  • 様々な属性
  • width="500" 画像の幅を指定
  • height="283" 画像の高さを指定
  • alt="" 画像が表示できないようなブラウザで、テキストを表示したり音声読み上げをしてくれる。画像の内容がよく分かる文章を付けること
  • title="" 画像にキャプションを付けることができる。マウスオーバーしたときに指定したtitieが表示される

##formタグについて

  • <form> 入力フォームで使用
  • 属性
  • action formで入力されたデータの送信先を指定
  • method データの送信形式を指定
  • inputタグ 名前を入力させたい場合に使用
  • maxlength="5" 5文字以上入力できないようにしている
  • nameの属性はこのformからデータを送ったときに、「survey.php」(送り先のプログラム)で送られたデータをどんな名前で呼べばよいのかを知らせるための属性である。
  • メモを送信する際、メモは1行ではなく複数行にしたいのでtextareaを使用する。
  • <input type="submit" value="送信!"> 提出するために送信ボタンを作成。
<body>
   <form action="survey.php" method="post">
     <p>名前：<input type="text" name="name" size="60" maxlength="5"></p>
     <p>メモ：<textarea name="memo"></textarea></p>
     <p><input type="submit" value="送信!"></p>
   </form>
</body>

##いろいろなinputタグを使う

  • パスワードを入力するフォームを作成
  • <input type="password"> パスワードを入力したときに伏せ字になる。
<input type="hidden" name="user_id" value="32">
  • 隠しデータを送ることもできる。(ユーザIDのようなものをformから送信する場合など)ユーザIDはユーザが入力する必要はないので、画面からなくてもよく、その場合に<type="hidden">としてnameとvalueを付ける。
  • <name="user_id" value="32">とすると「user_id」という名前で送信される。
<p>日付：<input type="date" name="birthday"></p>
  • <input type="date"> HTML5から使えるようになった。日付を入力させるとき、カレンダーをつけたり、数値がボタンで増減できたりする。また、エラーチェックをして日付以外のデータが入ってこないようにしてくれるので便利である。
<p>URL：<input type="url" name="url"></p>
  • <input type="url"> 適当にURLではなさそうな文字列を入れて送信しようとすると、エラーをだす。
<p>email：<input type="email" name="email"></p>
  • ブラウザが入力されたeメールアドレスが妥当かどうかチェックしてくれる。eメールアドレスぽくない文字列を入れて送信するとエラーがでる。
  • 属性required 何も入っていいない場合に送信しようとするとエラーがでる。

##radio,checkbox,labelについて

  • 複数の選択肢から何かを選んで選択させるものを作成する。
  • <input type="radio"> 複数の選択肢の中から一つの選択肢だけしか選択できない。
  • <input type="checkbox" 複数の選択肢を選択できる。
  • <label> チェックボタン・ラジオボタンなど関連付けられたテキスト部分をクリックしてもチェックすることができる。
<label><input type="radio" name="color" value="red">RED</label>
  • <input type="radio" name="color" value="red">とREDは意味的に結びついているものなので、<label>を付けるとREDがinputタグに対するラベルと指定できる。
  • 上記のようにラベルを指定してあげると、ボタンだけではなくREDのテキストでも選択することができ、ユーザビリティ的にも良い。
  • また、書いている都合上、ラベルとinputボタンを遠くに離れさせなくては行けないとい場合はラベルの方にlabelタグをつけて離れたところに部品を書くことも可能である。
<input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label>

##selectタグについて

  • 複数の選択肢から値を選ばせるタグ
<select name="color" size="5" multiple>
   <option value="red">Red</option>
   <option value="blue">Blue</option>
   <option value="green">Green</option>
</select>
  • selectタグ セレクトボックスを作成
  • Red,Blue,Greenの中から1つを選べるというインターフェイスになっている。
  • 「size="5"」とすると、今まで選択肢は1つだけだったが、選択肢を一気に見ることができる。
  • multipleという属性は、Macだとcommand、windowsだとCtrlを押しながら選択すると、複数を選ぶことができる。

##div,span id,classについて

  • div:汎用ブロック要素（前後に改行が入る） span:汎用インライン要素（前後に改行が入らない）
  • 何らかの範囲をスタイリングしたい場合（太字やフォントの大きさ）で使用する。
  • id:その文書に一つだけの要素　class:複数あってもよい
  • スタイリングをする際に識別子をつけて指定していくときに使用する。

##文書構造を表すタグ

<div id="header">
    <h1>起業日記</h1>
    <nav>
       home
       profile
    </nav>
</div>
 
<article>
    <h2>リリース完了！</h2>
    <p>うれしい！</p>
</article>
 
<aside>
   <h3>このサイトについて</h3>
   <p>@taguchiの起業日記です。</p>
</aside>
 
<footer>
   copyright 2013 @taguchi
</footer>
  • header セクションの見出し
  • footer そのセクションに関する情報を示す。
  • nav　　 他のページやそのページ内部へリンクするナビゲーション　
  • article　本文　
  • aside　副次的な情報
  • section　headerやasideなどに分類できないが、意味的には何らかの一区切りであるというときに使われる。

##実体参照、style,scriptについて

  • 実体参照　HTMLで文書を書くときに「<」など特殊文字として置き換えてあげないとならない
  • 「<」 -> 「&」「lt」「;」
  • 「>」 -> 「&」「gt」「;」
  • style ほぼすべての要素につけることができる。スタイルシートの命令を書くことができる。
  • script ページに動きをつけるそれを読み込むための方法。javascriptファイルを読み込むにはscriptタグを使用(</body>の直前に書くのが一般的)
10
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?