Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html講習会資料

5,129 views

Published on

2013/11/12フリュー株式会社 就業研修でのHTML講習会用資料

Published in: Business
  • Be the first to comment

Html講習会資料

  1. 1. フリュー株式会社 就業体験 HTML 講習会 ソフトウェア開発部  H(HTML) チーム
  2. 2. はじめに 本日の内容 1.HTML って何? 2.HTML で WEB ページを作成するには?
  3. 3. HTML って何?
  4. 4. HTML って何? 普段よく見ている WEB ページ↓↓
  5. 5. HTML って何? 右クリックで「ページのソースを表示」をしてみると…
  6. 6. HTML って何? こんな文章が出てきます。
  7. 7. HTML って何? これこそが HTML です! この文字の羅列によって WEB ページが作られているのです。 <header> ここがヘッダーです </header> <nav> ここがメニュー ( ナビゲーション ) です </nav> <section> <article> コンテンツ 1</article> <article> コンテンツ 2</article> <article> コンテンツ 3</article> <article> コンテンツ 4</article> </ section> <footer> ここがフッターです </footer>
  8. 8. HTML って何? HTML のタグ <p></p> <section></section> このように、 < > で囲まれているパーツを「タグ」と言います。 <xxx> テキスト </xxx> のように同じタグで囲うことで、 WEB ページ上で 表示されるようになります
  9. 9. HTML って何? 例 <p> これはサンプルです </p> と書くと…↓↓ これはサンプルです とブラウザに表示されます ※ ちなみに、 <p> は 1 つの段落であることを表します
  10. 10. HTML って何? さきほどの <p></p>( 段落 ) のようなタグがたくさん用意されてい るので、これらを利用してホームページの構造を作っていきます。 タ グ <header> <nav> <section> <article> <footer> <aside> <p> <a> 用 途 ヘッダを示す メニュー・ナビゲーションであることを示す 一つのセクションであることを示す 記事であることを示す ( ブログやニュースのエントリで使う ) フッタを示す 余談・補足情報のセクションであることを示す ひとつの段落であることを表します。 リンクを指定するタグです
  11. 11. HTML って何?  このほかにもたくさんのタグがありますが、書ききれません…  こういうときには、 Google 検索で調べてみましょう 「 HTML タグリファレンス 」など、詳しく説明があります
  12. 12. HTML って何? 調べてみると HTML とか XHTML とか HTML5 とか出てきて、どれ を見ればいいの?となるかと思います。 簡単に言うと、 XHTML     従来の言語 HTML5     新しい言語 スマホサイトは基本的に HTML5 で記述しますが、 PC サイ トでは古いブラウザのまま更新していない人でも見れるよう に、従来の XHTML で書かれていることが多いです。
  13. 13. HTML で WEB ページを作成するには?
  14. 14. HTML で WEB ページを作成するには?  ではさっそく、 WEB ページをつくるとしたら、何から始 めればいいでしょう? 一番最初は、デザインですね! 自分の他にデザイナーさんがいたらデザインをつくっても らったり、 紙に簡単に描くのでもいいので、完成図を決めましょう!
  15. 15. HTML で WEB ページを作成するには? サンプルとして、このようなページを作るとします。
  16. 16. HTML で WEB ページを作成するには? まず、テキストエディタを用意します。 • サクラエディタ • NetBeans • TeraPad etc… など無料で使えるものや、 DreamWeaver など有償のものもあ ります。私たちは、業務で WebStorm という IDE( エディタ、 デバッカ、コンパイラなどをまとめたアプリケーション ) を利 用しています。(有償)
  17. 17. HTML で WEB ページを作成するには? エディタを開いて、下記のソースを書きます。  ※これは、決まり文句のようなものです。 <!DOCTYPE   html> <html lang=“ja”> <head> <meta charset=“utf-8”> <title> サイト名 </title> </head> <body> ここに自分で HTML ソースを書いていきます </body> </html> 「 HTML5  宣言」などでググれば OK !
  18. 18. HTML で WEB ページを作成するには? 先ほどの <body></body> の間に文章を書いていきます。 <body> TestSITE   HOME BLOG COMPANY CONTACT 大見出し テキストテキストテキストテキスト… 小見出し テキストテキストテキストテキスト… 小見出し テキストテキストテキストテキスト… (C)copyright </body>
  19. 19. HTML で WEB ページを作成するには? デスクトップや任意の場所に新しくフォルダを用意し、 その中に作成したファイルを、拡張子 (. の後ろ ) を html にし て、保存します。
  20. 20. HTML で WEB ページを作成するには? 先ほどの文章を、それぞれ相応しいタグで囲っていきます  <header> <h1>TestSITE</h1> <nav> <ul> <li>HOME</li> <li>BLOG</li> <li>COMPANY</li> <li>CONTACT</li> </ul> </nav> </header> <section> <h1> 大見出し </h1> <p> テキストテキストテキストテキスト… <p>     …略… </section> <footer> <small>(C)copyright</small> </footer> ここで <></> で囲った一つ一つを、 「要素」と言います。 20
  21. 21. HTML で WEB ページを作成するには? このように、 HTML タグで文書の構造を明記することを 「マークアップ」といいます。 ここでマークアップをした html ファイルを、クリックしてブ ラウザで表示してみましょう。 ブラウザは Google Chrome がおすすめ!
  22. 22. HTML で WEB ページを作成するには? TestSITE •HOME •BLOG •COMPANY •CONTACT 大見出し テキストテキストテキストテキスト… 小見出し テキストテキストテキストテキスト… 小見出し テキストテキストテキストテキスト… (C)copyright あれ? これではデザインと 全然違うぞ?
  23. 23. HTML で WEB ページを作成するには? HTML とは、 WEB ページの文章構造を明確にするためのも のであって、デザインをするためのものではないのです。 じゃあデザインを入れるにはどうすればいいの? CSS( スタイルシート ) を使います 。
  24. 24. HTML で WEB ページを作成するには? CSS とは、 HTML で書いた WEB ページの見た目を定 義する為の言語です。 最近は HTML で WEB ページを作成するときには、ほぼセ ットで使用します。
  25. 25. HTML で WEB ページを作成するには? どうやって書けばいいの? まず、 CSS ファイルを作成します。 テキストエディタで新しいファイルを作成し、拡張子を .css にして、先ほど HTML ファイルを保存したフォルダに保存し ます。
  26. 26. HTML で WEB ページを作成するには? 次に、先ほどの HTML ファイルの、 <head></head> の間に、一行 追加します。 <!DOCTYPE   html> <html lang=“ja”> <head> <meta charset=“utf-8”> <title> サイト名 </title> <link rel=“stylesheet” type=“text/css” href=“style.css”> </head> … <body> これで、 CSS ファイルを HTML ファイルに関連付けました。 ※ 作成した CSS ファイルと、 HTML で記述したファイル名が 一致していないと、関連付けられません。
  27. 27. HTML で WEB ページを作成するには? CSS の書き方は、 HTML とは違います。 h1 { color:white; } このように書くと、 HTML で <h1> でマークアップした文章の、 文字色が白になります。 p{ font-size:14px; } このように書くと、 HTML で <p> でマークアップした文章の、 文字サイズが 14px になります。
  28. 28. HTML で WEB ページを作成するには? セレクタ スタイルを適用したい HTML を指定 の要素 h1 { color:white; } プロパティ どのスタイルを適用するかを決める 値 どのようなスタイルにするかを決める
  29. 29. HTML で WEB ページを作成するには? CSS プロパティは、 HTML タグよりさらにたくさん あります。(よく使うスタイルはそんなに多くありません ) 詳しくは Google 検索で見てみましょう。
  30. 30. HTML で WEB ページを作成するには? 個別にデザインを反映したいとき p{ font-size:14px; } このように書くと、 <p> でマークアップした段落、全ての文字サイズが 14px に なります。でも、ある特定の段落にだけこのスタイルを適用したい…。 そんな時は id ・ class を使います
  31. 31. HTML で WEB ページを作成するには? id とは、要素を識別するための固有の名前。  一つの HTML ファイルで、一つしか使えません。 class とは、スタイルを適用する為につける名前。  一つの HTML ファイル内で複数利用でき、一つの要素  にも複数付けられる。  デザインの為に付けるのは、 class を推奨!
  32. 32. HTML で WEB ページを作成するには? HTML タグの後ろに、 id 、又は class を付けることで、その要素に名前を 付けることができます。 <p class=“largeText”> テキストテキストテキストテキ スト… <p> largeText という、名前を付けました class をつけたら、 CSS でもこの class( 名前 ) に対してだけ、スタイル を適用させることができます。 .largeText { font-size:14px; } class は頭に . をつけ、 id は頭に # をつけて、 p の代わりに書きます。
  33. 33. HTML で WEB ページを作成するには? CSS を使えば、最初に考えた通りのデザインを反映させることがで きるようになります! TestSITE •HOME •BLOG •COMPANY •CONTACT 大見出し テキストテキストテキストテキスト… 小見出し テキストテキストテキストテキスト… 小見出し テキストテキストテキストテキスト… (C)copyright
  34. 34. HTML で WEB ページを作成するには? 完成図をきめる HTML でマークアップして WEB ページにする CSS で見た目を完成させる
  35. 35. さいごに これで、 HTML で基本的な WEB ページが、 できるようになりました! ここで紹介した事は、まだまだ基礎で、お仕事で使うにはまだまだ たくさんの情報が必要ですが、 基礎がわかると楽しく覚えられると思います。 ぜひ本日の就業体験、楽しみながら学んでください!

×