Downloaded 31 times
Html&cssの書き方入門編
- 1. HTMLの書き方(入門編) HTML4を使ったページ制作 Friday, June 1, 12
- 2. アジェンダ HTMLページのつくりかた HTMLとは何か？ ページに意味を与える「HTMLタグ」 基本的なマークアップについて 実習：Webページをつくってみよう Webサイトのつくりかた WebサイトとはWebページがまとまったもの 基本的なWebサイト構造 Friday, June 1, 12
- 3. HTMLとは 文書に意味付けをするための言語 Friday, June 1, 12
- 4. HTMLとは 例えばビートルズを紹介するページの場合 Friday, June 1, 12
- 5. HTMLとは 人間は見た目で文書の構造を理解します 大見出し 中見出し 文字の位置や大きさ、レ 小見出し イアウトなどで文書の構 小見出し 造を把握し、内容を理解 する。 大見出し 中見出し 子見出し 子見出し2 Friday, June 1, 12
- 6. HTMLとは しかし機械は見た目で理解できません ? ? ? ? ? 例えばGoogleはページの ? 見た目だけでは何が書か れているのかを理解する ? ことができません ? Friday, June 1, 12
- 7. 文書をマークアップする 文書にタグをつけることをマークアップという 大見出し <h1></h1> 中見出し <h2></h2> 小見出し <h3></h3> 小見出し <h3></h3> 大見出し <h2></h2> 中見出し <h3></h3> 子見出し <h3></h3> 子見出し2 <h4></h4> Friday, June 1, 12
- 8. 文書をマークアップする 文書にタグをつけることをマークアップという <h1></h1> <h2></h2> <h3></h3> このようにマークアップさ <h3></h3> れているものであれば、 Googleも内容を理解し、 <h2></h2> 検索された時の表示を正 <h3></h3> しくすることができます。 <h3></h3> <h4></h4> Friday, June 1, 12
- 9. ふたたびHTMLとは HTMLとは機械でも判断できるように文書をマー クアップするためのもの 機械が自動処理できるようにするためにHTMLはある Googleのような検索エンジンは内容をタグで理解する タグに気をつけてかかないと適切な検索結果として反映されない HTMLは見た目を整えるための言語ではなく「意味付け」のための言語 Friday, June 1, 12
- 10. HTMLの基本構造 HTMLの基本的な構造を理解しよう！ Friday, June 1, 12
- 11. HTMLの基本構造 何はともあれ、HTMLは以下を必ず書く <html> ! <head> ! ! ヘッダ ! </head> HTML文書 ! <body> ! ! ボディー ! </body> </html> Friday, June 1, 12
- 12. ヘッダ部分 タイトルや概要などを記述する <html> ! <head> ! ! <title></title> <meta name=”description” content=”ページの概要”> ヘッダ ! </head> ! <body> ! ! ブラウザでは見えない部分。ペー ! </body> ジのタイトルや概要などを記述す </html> る。Googleなど検索エンジンはこ の部分を重要視する。 Friday, June 1, 12
- 13. ボディ部分 本文を記述する <html> ! <head> ! ! <title></title> <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ボディ ! </body> </html> ブラウザで見える部分。 ここに本文を記述し、それをマー クアップする。 Friday, June 1, 12
- 14. 基本的なHTMLタグ 基本的なタグの書き方と使い方 Friday, June 1, 12
- 15.
- 16. ツールと記述のルール HTMLを記述するソフトウェア テキストエディタならなんでもよい。フリー（無料では、Windowsなら サクラエディタ、MacならMiなどがある。 - サクラエディタ http://sakura-editor.sourceforge.net/ - Mi http://www.mimikaki.net/ 記述方法 HTMLタグはすべて小文字… <title></title><head></head> 保存ファイル名の拡張子はhtml… index.html, shop.html この.htmlが拡張子 Friday, June 1, 12
- 17. ツール HTMLを記述するソフトウェア テキストエディタならなんでもよい。フリー（無料では、Windowsなら サクラエディタ、MacならMiなどがある。 - サクラエディタ http://sakura-editor.sourceforge.net/ - Mi http://www.mimikaki.net/ 有料なら選択肢はたくさん WebデザイナーならAdobeから販売されているDreamweaverがスタン ダート。 Friday, June 1, 12
- 18.
- 19. <title></title>タイトルタグ ページのタイトルを記述する ヘッダーの中に記述し、そのページを表すようなタイトル名にする。 <html> ! <head> ! ! <title>ページのタイトル</title> <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ! </body> </html> Friday, June 1, 12
- 20. <meta></meta>メタタグ ページの情報を記述する ヘッダーの中に記述し、そのページの概要を記述する <html> ! <head> ! ! <title>ページのタイトル</title> <meta name=”description” content=”ページの概要”> ! </head> ! <body> ! ! ページ内容 ! </body> </html> Friday, June 1, 12
- 21. タイトルタグとメタタグは重要 検索結果に反映される クリックするかしないかはこの文言で決まるといっていい。 <html> ! <head> ! <title>人気の商品から選ぶ - 母の日2012 - Yahoo!ショッピング</title> <meta name=”description” content=”ショッピングの「母の日2012」…”> ! </head> ! <body> ! ! ページ内容 ! </body> </html> Friday, June 1, 12
- 22.
- 23. その1 ｈタグ（見出しタグ） <h1></h1>から<h6></h6>まである。h1が一番大きな見出し。 <h1>大見出しにする文字</h1> pタグ（段落タグ） 文章のかたまり=段落を囲む時に使用する <p>文章のかたまり</p> strongタグ（強調タグ） 協調したい部分を囲むタグ <strong>強調したい文字</strong> Friday, June 1, 12
- 24. その2 listタグ（リストタグ） 箇条書きの時に使用する <ul>文章のかたまり <li>箇条書きの項目1</li> <li>箇条書きの項目2</li> </ul> imgタグ（画像タグ） HTML文書内に画像を挿入するときに使用する。 <img src=”ファイル名” alt=”画像を表す言葉”> aタグ（リンクタグ） 文書同士をリンクでつなぐ場合に使用される <a href=”リンクさせたいファイル名”>クリックする文字</a> Friday, June 1, 12
- 25. その3 brタグとhrタグ（改行タグ, 水平線タグ） 改行したい場合は<br>を使用し、区切り線を入れたい場合には<hr>使用 する もじもじ<br>もじもじ もじもじ<hr>もじもじ blockquoteタグ（引用タグ） 文章を引用する場合に使用する <blockquote> 引用したい文章</blockquote> Friday, June 1, 12
- 26. 課題 架空のヨーロッパ最大の動物園Zooroppa（ズーロッパ）のトップページ と動物ページを2ページ作りましょう。 ZOOROPPA ライオン 大見出し 画像を挿入 ライオンの習性 ZOOROPPA □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ Welcome to ZOOROPPA ・トップ ・ぞう 中見出し 中見出し ZOOROPPA ZOOROPPA とは 各ページ相互にリンクする ぞう □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ リストとリンク □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ ・ライオン ・ぞう ぞうの習性 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ ・トップ ・ライオン Friday, June 1, 12
- 27. CSSの書き方(入門編) カスケーディングスタイルシート（CSS) Friday, June 1, 12
- 28. CSSとは CSSはページをデザインするために使う 例えば以下のようなHTMLページを index.html lion.html elephant.html ZOOROPPA ZOOROPPA ZOOROPPA ライオン ぞう Welcome to ZOOROPPA ZOOROPPA とは □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性 □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ □□□□□□□□□□□□□□□□□□□□□ ・ぞう ・ライオン ・ライオン ・ぞう Friday, June 1, 12
- 29. CSSとは 大見出し(H1)部分の文字色を赤にできる 文字の色を変える index.html lion.html elephant.html ZOOROPPA ZOOROPPA ZOOROPPA ライオン ぞう Welcome to ZOOROPPA ZOOROPPA とは □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性 □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ □□□□□□□□□□□□□□□□□□□□□ ・ぞう ・ライオン ・ライオン ・ぞう h1タグの部分が赤に style.css なった h1 { h1 { color:#ff0000; color:#ff0000; } } Friday, June 1, 12
- 30. CSSとは 背景色も変えられる 背景の色が変わった index.html lion.html elephant.html ZOOROPPA ZOOROPPA ZOOROPPA ライオン ぞう Welcome to ZOOROPPA ZOOROPPA とは □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ライオンの習性 ぞうの習性 □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□ 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・トップ ・トップ □□□□□□□□□□□□□□□□□□□□□ ・ぞう ・ライオン ・ライオン ・ぞう h1タグの部分が赤に style.css なった h1 { h1 { color:#ff0000; color:#ff0000; } body { } } background:#9999ff; Friday, June 1, 12
- 31. CSSの基本 CSSの基本的な書き方と名称 Friday, June 1, 12
- 32. CSSの基本的な書き方 例えば<h1></h1>に対するCSS 文字のサイズは14ピクセルにする セレクタ プロパティ 値 コロン セミコロン h1 { CSSルールセット ! font-size:14px; } 中括弧で囲む プロパティと値の間にはコロン を、行の最後にはセミコロンを 入れる Friday, June 1, 12
- 33. CSSの基本的な書き方 例えば<h1></h1>に対するCSS プロパティは複数指定可能 複数OK h1 { ! font-size:14px; CSSルールセット ! font-weight:normal; ! color:#ff0000; } Friday, June 1, 12
- 34.
- 35. HTMLとCSSをリンクさせる HTMLに以下を記述 <html> ! <head> ! ! <title></title> <meta name=”description” content=”ページの概要”> <link ref=”stylesheet” href=”style.css”> ! </head> CSSファイル名 ! <body> ! ! ページ内容 ! </body> ヘッダの中にこのタグを入れると </html> 指定したCSSファイルとリンクする Friday, June 1, 12
- 36.
- 37. プロパティの種類 今日覚えるプロパティ font-size font-weight background color border margin padding Friday, June 1, 12
- 38. プロパティの種類 font-size（文字の大きさ） 文字の大きさの指定、ピクセルで指定や％でも指定できる font-size: 12px font-size: 90% font-weight (文字の太さ) ノーマルとボールドを覚えておけば大丈夫 font-weight: normal font-weight: bold Friday, June 1, 12
- 39. プロパティの種類 background(背景) 文字やページの背景の色を変えたり、画像を挿入できる background: #9999ff; background: #9999ff url(“back.jpg”) background: #9999ff url(“back.jpg”) repeat-x; background: #9999ff url(“back.jpg”) repeat-x top center; color (文字色) 色の指定ができる color: #ff0000 color: red Friday, June 1, 12
- 40. プロパティの種類 border(枠線) 文字やページの背景の色を変えたり、画像を挿入できる background: #9999ff; background: #9999ff url(“back.jpg”) background: #9999ff url(“back.jpg”) repeat-x; background: #9999ff url(“back.jpg”) repeat-x top center; Friday, June 1, 12
- 41.
- 42. 基本は四角を配置する 大きさ違う四角を上下左右に配置する 下は典型的なWebページのレイアウト。 Friday, June 1, 12
- 43. 実際のページ 例えばこんなページ Friday, June 1, 12
- 44. 四角く囲まれている 以下のように四角で分けられている Friday, June 1, 12
- 45.
- 46. 簡単なレイアウトをしてみる ヘッダ、サイド、コンテント、フッタというベー シックなレイアウトを作ってみる ヘッダ サイド コンテント フッタ Friday, June 1, 12
- 47. まずは四角を4つ並べる HTMLに<div></div>で四角をつくる index.html <div>四角1</div> <div>四角2</div> <div>四角3</div> 四角1 <div>四角4</div> 四角2 四角3 四角4 Friday, June 1, 12
- 48. CSSで枠線をつける 四角であることが確認できる index.html <div>四角1</div> <div>四角2</div> <div>四角3</div> 四角1 <div>四角4</div> 四角2 四角3 style.css 四角4 div { border:1px solid #ccc; } Friday, June 1, 12
- 49. 四角に名前をつける divタグにそれぞれidで名前をつける index.html <div id=”header”>四角1</div> <div id=”side” >四角2</div> <div id=”content” >四角3</div> 四角1 header <div id=”footer” >四角4</div> 四角2 side 四角3 content 四角4 footer Friday, June 1, 12
- 50. それぞれの色を変える idで名前をつけたことでそれぞれ別の色にできる index.html <div id=”header”>四角1</div> <div id=”side” >四角2</div> <div id=”content” >四角3</div> 四角1 header <div id=”footer” >四角4</div> 四角2 side style.css 四角3 content #header { 四角4 footer background:#ff9999; } #side { background:#9999ff; } Friday, June 1, 12
- 51. 四角の大きさを変える cssで大きさを変える style.css #header { background:#ff9999; 四角1 header width:600px; height:150px; 四角2 } #side { side background:#9999ff; width:150px; 四角3 content height:300px; } 四角4 footer Friday, June 1, 12
- 52. 左右に並べる sideとcontentを横に並べるにはfloatを使う style.css #side { background:#9999ff; width:150px; 四角1 header height:300px; 四角2 四角3 float:left; } side content #content { width:450px; 四角4 footer float:left; } Friday, June 1, 12
- 53. ラッパー(wrapper) 全体を包む(ラップする)四角をラッパーという index.html <div id=”wrapper”> <div id=”header”>四角1</div> <div id=”side” >四角2</div> 四角1 header <div id=”content” >四角3</div> 四角2 四角3 <div id=”footer” >四角4</div> side content wrapper </div> 四角4 footer style.css #wrapper { width:600px; } Friday, June 1, 12
- 54. マージンとパディング 四角どうしの間隔を作る「マージン」 #contentに対して左に20px、下に30pxマージンをとった場合の設定 style.css wrapper #wrapper { width:620px; 四角1 header } 150px 20px 450px #content { 四角2 四角3 width:450px; margin:0px 0px 30px 20px; side content 20px } 上 右 下 左 30px 四角4 footer ※wrapperの幅に注意する 620px Friday, June 1, 12
- 55. マージンとパディング 四角の中に余白を作る「パディング」 #contentに対して上に30px、左に30pxパディングをとった場合の設定 style.css #wrapper { wrapper width:650px; } 四角1 header #content { 四角2 30px width:450px; margin:0px 0px 30px 20px; side content 30px padding:30px 0px 0px 30px; } 150px 20px 30px 450px 上 右 下 左 四角4 footer ※wrapperの幅に注意する 650px Friday, June 1, 12
- 56. 課題 HTMLとCSSを使って、以下を完成させましょう 背景画像 index.html ロゴには任意の色をつ けて、大きさを40px ZOOROPPA ラッパーの Welcome to ZOOROPPA 背景色：白 幅：600px メニュー部分は ・ライオン ・ぞう ZOOROPPA とは □□□□□□□□□□□□□□□□□□□□□□□□□□□□ コンテンツ部分は 右に配置 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ 左に配置 □□□□□□□□□□□□□□□□□□□□□ 幅：150px 動物 □□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□ 幅：450px □□□□□□□□□□□□□□□□□□□□□ Friday, June 1, 12