IT研修講座 NPO 法人全国女性シェルターネット企画講座 WEBサイト作成
ホームページの構成要素 <ul><li>HTML  </li></ul><ul><ul><li>.html .htm  (.cgi .php .jsp) </li></ul></ul><ul><li>CSS </li></ul><ul><ul>...
URLと絶対パスと相対パス <ul><li>URL </li></ul><ul><ul><li>http://annulus.jp/temp/index.html </li></ul></ul><ul><li>絶対パス </li></ul><u...
HTMLの基本構成要素 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><...
タグの基本ルール <ul><li><p class=“velue”> 内容がここに入ります </p> </li></ul>要素名 属性名 値 属性 開始タグ 終了タグ 要素
タグの基本ルール2 <ul><li>開始タグと終了タグ  <p>~</p> <br /> <img src=“~” /> </li></ul><ul><li>属性と値 </li></ul><ul><li>値は「“」で囲む </li></ul><...
DOCTYPE宣言 <ul><li>DOCTYPE宣言 </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li...
W3C <ul><li>World Wide Web Consortium (ワールド・ワイド・ウェブ・コンソーシアムは World Wide Web で使用される各種技術の標準化を推進する為に設立された 標準化団体 、 非営利団体 。略称は ...
XHTMLとは <ul><li>2000 年 1 月 26 日に W3C の勧告となった XHTML ( Extensible HyperText Markup Language ) [XHTML10] は、素朴な文書構造記述言語として発展して...
文章を構成する基本のタグ <ul><li>見出し </li></ul><ul><li><h1>~</h1> </li></ul><ul><li><h2>~</h2> </li></ul><ul><li><h3>~</h3> </li></ul>...
文章を構成する基本のタグ3 <ul><li>リスト </li></ul><ul><ul><li><ul><li>~</li> <li>~</li> </ul> </li></ul></ul><ul><li>定義リスト </li></ul><ul...
文章を構成する基本のタグ2 <ul><li>段落 </li></ul><ul><ul><li><p>~</p> </li></ul></ul><ul><li>改行 </li></ul><ul><ul><li><br /> </li></ul><...
課題1 <ul><li>次の文章を以下の DOCTYPE と、 meta タグ、基本のタグを使用して HTML にしてください。 </li></ul><ul><li>  </li></ul><ul><li>鎌倉の隠れカフェ   大佛次郎茶亭  ...
CSS  カスケーディングスタイルシート <ul><li>CSS を HTML ファイルに組み込む方法は 3 種類 </li></ul><ul><li>1.Style 要素を使って head 内に指定する </li></ul><ul><li>2...
1.Style 要素を使って head 内に指定する <ul><li>HTMLファイル内の head 内のソース </li></ul><ul><li><head> </li></ul><ul><li><style type=“text/css”...
2.Style 属性を使って要素に直接指定する <ul><li>HTML ファイル内の body 内のソース </li></ul><ul><li><body> </li></ul><ul><li><h1 style=“color:#ff0000...
3.Link 要素で外部の css ファイルをリンクさせる <ul><li>HTML </li></ul><ul><li><head> </li></ul><ul><li><link href=“style.css” rel=“styleshe...
CSSの基本 <ul><li>要素名{プロパティ:値;} </li></ul><ul><ul><li>h1{ </li></ul></ul><ul><ul><ul><li>color:blue; </li></ul></ul></ul><ul>...
複数のプロパティをまとめる定義方法 <ul><li>h1{ </li></ul><ul><li>color:blue; </li></ul><ul><li>font-size:14px; </li></ul><ul><li>} </li></u...
セレクタの種類 <ul><li>基本セレクタ ( div や p などの HTML 要素に) </li></ul><ul><ul><li>p{font-size:14px;} </li></ul></ul><ul><li>クラスセレクタ  ( ...
セレクタの種類2 <ul><li>IDセレクタ(一つの要素だけに) </li></ul><ul><ul><li>CSS </li></ul></ul><ul><li>#main{ </li></ul><ul><li>width:300px;bo...
セレクタの種類3 <ul><li>擬似クラス </li></ul><ul><ul><li>クラスやIDでは表現できない性質について設定できるセレクタ </li></ul></ul><ul><ul><li>擬似クラスは「 : 」にあらかじめ決めら...
セレクタの種類4 <ul><li>子孫セレクタ </li></ul><ul><ul><li>特定の要素の子要素、または子孫の要素にスタイルを適用させます。要素との間には半角スペースで区切って指定する。 </li></ul></ul><ul><u...
課題2 <ul><li>テキストを装飾しましょう。 </li></ul><ul><li>CSS ファイルを作成して、さきほど作成した HTML ファイルからリンクをはってください。 </li></ul><ul><li>CSS は以下を参考にして...
余白 <ul><li>margin(マージン) </li></ul><ul><ul><li>マージンとは、要素を囲む領域(ボックス)の外側の余白のことをいいます。 </li></ul></ul><ul><li>padding(パディング) </...
マージン <ul><li>margin:0 10px 0 20px; </li></ul><ul><li>margin:0 auto; </li></ul><ul><li>margin:15px; </li></ul><ul><li>margi...
パディング <ul><li>padding:0 10px 0 20px; </li></ul><ul><li>padding :0 auto; </li></ul><ul><li>padding :15px; </li></ul><ul><li...
課題3 <ul><li>テキストの余白を調整してみましょう。 </li></ul><ul><li>さきほどの HTML を使用して、ページ全体と見出しとフッター(コピーライト)に余白をいれてみましょう。 </li></ul><ul><li>パデ...
ボックスの構造 <ul><li>ボックスモデル </li></ul>高さ height 幅  width 内容を表示する領域 padding border margin
課題4 <ul><li>「大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。~アクセス鎌倉駅から徒歩 10 分」までを大きな ひとつのボックスで囲って、背景色を入れて、余白をいれてみましょう。 ボックスの設定は ID セレクタ で con...
課題5 <ul><li>画像を加工してみましょう </li></ul><ul><li>http:// www.picnik.com /   </li></ul><ul><li>image.jpg を 幅 327px  高さ 327px にトリミ...
画像について <ul><li>jpg </li></ul><ul><li>gif </li></ul><ul><li>png </li></ul>
画像の張り込み <ul><li><img src=“URL” width=“—px” height=“—px” alt=“ 画像の説明”  /> </li></ul>
回り込み <ul><li>回り込みを指定 </li></ul><ul><ul><li>float:left; </li></ul></ul><ul><ul><li>float:right; </li></ul></ul><ul><li>回り込み...
課題6 <ul><li>画像を貼り付けて、文字を回り込みさせましょう。 </li></ul><ul><li>メニューより下は回りこみを解除させましょう。 </li></ul><ul><li>画像には border をつけてください。色は白で、幅...
リンクをはる <ul><li>リンクをはる </li></ul><ul><li>< a href=“URL”> テキスト </a> </li></ul><ul><li>メーラーを起動するリンク </li></ul><ul><li><a href...
課題7 <ul><li>ページ内リンクをはってみましょう。 </li></ul><ul><li>コピーライトの上、 #cont ボックス内に「▲ページトップに戻る」というテキストをいれて、ページ上部に移動するようにリンクをつけてください。 </...
2段組レイアウト <ul><li>div(ボックス)をfloatで並べる </li></ul>float:left; width:400px; margin:0 10px 0 0; float:right; width:200px; width...
課題8 <ul><li>課題 7 で使用した </li></ul><ul><li>最終デザイン .jpg のようなページを作成しましょう。   </li></ul>
Upcoming SlideShare
Loading in...5
×

it研修講座

396

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
396
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

it研修講座

  1. 1. IT研修講座 NPO 法人全国女性シェルターネット企画講座 WEBサイト作成
  2. 2. ホームページの構成要素 <ul><li>HTML  </li></ul><ul><ul><li>.html .htm (.cgi .php .jsp) </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>.css </li></ul></ul><ul><li>画像ファイル </li></ul><ul><ul><li>.jpg .gif .png </li></ul></ul><ul><li>javascript </li></ul><ul><ul><li>.js </li></ul></ul>css img js index.html layout.css side.css image01.gif image02.gif rollover.js iepngfix.js / inquiry about index.html index.html root
  3. 3. URLと絶対パスと相対パス <ul><li>URL </li></ul><ul><ul><li>http://annulus.jp/temp/index.html </li></ul></ul><ul><li>絶対パス </li></ul><ul><ul><li>/var/www/vhosts/greenapple.jp/httpdocs/ </li></ul></ul><ul><li>相対パス </li></ul><ul><ul><li>./index.html ../temp/index.html </li></ul></ul>
  4. 4. HTMLの基本構成要素 <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>HTML HTMLで記述されたドキュメントであることを宣言 head HTMLファイルの情報を記述 body ブラウザに表示する内容
  5. 5. タグの基本ルール <ul><li><p class=“velue”> 内容がここに入ります </p> </li></ul>要素名 属性名 値 属性 開始タグ 終了タグ 要素
  6. 6. タグの基本ルール2 <ul><li>開始タグと終了タグ  <p>~</p> <br /> <img src=“~” /> </li></ul><ul><li>属性と値 </li></ul><ul><li>値は「“」で囲む </li></ul><ul><li>ファイル名は半角英数で。記号は「 - 」か「 _ 」が使えます </li></ul><ul><li>ソースは小文字で記述する </li></ul><ul><li>タグはまたがない  × <p> 今日は <b> いい </p></b> てんきです。 </li></ul><ul><li>コメントは <!-- このように書く --> </li></ul><ul><li>ブロック要素とインライン要素 </li></ul>
  7. 7. DOCTYPE宣言 <ul><li>DOCTYPE宣言 </li></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;jp&quot; lang=&quot;jp&quot;> </li></ul><ul><li>バージョン </li></ul><ul><li>HTML4.01 Strict/HTML4.01 Transitional/HTML4.01 Frameset </li></ul><ul><li>XHTML1.0 Strict/XHTML1.0 Transitional/XHTML1.0 Frameset/ </li></ul><ul><li>XHTML1.1 </li></ul><ul><li>標準準拠モードと過去互換(後方互換)モード </li></ul><ul><li>http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=3 </li></ul><ul><li>タイトル </li></ul><ul><li><title> ~ </title> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> </li></ul><ul><li>キーワード </li></ul><ul><li><meta name=“keywords” content=“ ー , ー , ー” /> </li></ul><ul><li><meta name=“description” content=“ ~ &quot; /> </li></ul>
  8. 8. W3C <ul><li>World Wide Web Consortium (ワールド・ワイド・ウェブ・コンソーシアムは World Wide Web で使用される各種技術の標準化を推進する為に設立された 標準化団体 、 非営利団体 。略称は W3C (ダブリュースリーシー)。 MIT や CERN が中心となって 1994年 10月1日 発足。2007年現在、MIT/LCS、 ERCIM 、 慶應義塾大学 が中心となって活動している。 </li></ul>
  9. 9. XHTMLとは <ul><li>2000 年 1 月 26 日に W3C の勧告となった XHTML ( Extensible HyperText Markup Language ) [XHTML10] は、素朴な文書構造記述言語として発展してきた(あるいは混乱してきた) HTML に、 XML[XML1] の持つ柔軟性、拡張性を取り入れたものです。 HTML は SGML の実装の一つで、書式にそれなりに自由度がありましたが、 XHTML は XML の実装であるため、書式が厳密になっています( XML は、 SGML の書法をシンプルで厳密なものにすることで、アプリケーションの開発や互換性をとりやすくした)。 </li></ul>
  10. 10. 文章を構成する基本のタグ <ul><li>見出し </li></ul><ul><li><h1>~</h1> </li></ul><ul><li><h2>~</h2> </li></ul><ul><li><h3>~</h3> </li></ul><ul><li><h4>~</h4> </li></ul><ul><li><h5>~</h5> </li></ul><ul><li><h6>~</h6> </li></ul>
  11. 11. 文章を構成する基本のタグ3 <ul><li>リスト </li></ul><ul><ul><li><ul><li>~</li> <li>~</li> </ul> </li></ul></ul><ul><li>定義リスト </li></ul><ul><ul><li><dl><dt> ~ </dt><dd> ~ </dd></dl> </li></ul></ul><ul><li>表 </li></ul><ul><ul><li><table><tr><th></th><td></td></tr></table> </li></ul></ul>
  12. 12. 文章を構成する基本のタグ2 <ul><li>段落 </li></ul><ul><ul><li><p>~</p> </li></ul></ul><ul><li>改行 </li></ul><ul><ul><li><br /> </li></ul></ul><ul><li>ブロック </li></ul><ul><ul><li><div>~</div> </li></ul></ul>
  13. 13. 課題1 <ul><li>次の文章を以下の DOCTYPE と、 meta タグ、基本のタグを使用して HTML にしてください。 </li></ul><ul><li>  </li></ul><ul><li>鎌倉の隠れカフェ 大佛次郎茶亭  </li></ul><ul><li>大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。 </li></ul><ul><li>作家、大佛次郎氏の書斎兼茶亭、大正 9 年に建てられた茅葺きの木造平屋建で昭和 27 年に大佛氏が購入。通常は土日・祝日だけカフェとして営業。 </li></ul><ul><li>メニュー </li></ul><ul><li>コーヒー </li></ul><ul><li>紅茶 </li></ul><ul><li>チーズケーキ </li></ul><ul><li>あんみつ </li></ul><ul><li>インフォメーション </li></ul><ul><li>住所 鎌倉市雪ノ下 1-11-22 アクセス 鎌倉駅から徒歩 10 分 </li></ul><ul><li>copy right(c)2008 osaragi café. All Rights Reserved. </li></ul>
  14. 14. CSS  カスケーディングスタイルシート <ul><li>CSS を HTML ファイルに組み込む方法は 3 種類 </li></ul><ul><li>1.Style 要素を使って head 内に指定する </li></ul><ul><li>2.Style 属性を使って要素に直接指定する </li></ul><ul><li>3.Link 要素で外部の css ファイルをリンクさせる </li></ul>
  15. 15. 1.Style 要素を使って head 内に指定する <ul><li>HTMLファイル内の head 内のソース </li></ul><ul><li><head> </li></ul><ul><li><style type=“text/css”> </li></ul><ul><li><!-- </li></ul><ul><li>h1{ </li></ul><ul><li>color:#66cc66; </li></ul><ul><li>} </li></ul><ul><li>--> </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul>
  16. 16. 2.Style 属性を使って要素に直接指定する <ul><li>HTML ファイル内の body 内のソース </li></ul><ul><li><body> </li></ul><ul><li><h1 style=“color:#ff0000”>見出し</h1> </li></ul><ul><li><p>このように<span style=“color:#ffff00”>HTML要素に直接スタイルを定義</span>します。</p> </li></ul><ul><li></body> </li></ul>
  17. 17. 3.Link 要素で外部の css ファイルをリンクさせる <ul><li>HTML </li></ul><ul><li><head> </li></ul><ul><li><link href=“style.css” rel=“stylesheet” type=“text/css” /> </li></ul><ul><li></head> </li></ul><ul><li>CSS </li></ul><ul><li>h1{ color:#ff0000;} </li></ul>
  18. 18. CSSの基本 <ul><li>要素名{プロパティ:値;} </li></ul><ul><ul><li>h1{ </li></ul></ul><ul><ul><ul><li>color:blue; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><li>コメント </li></ul><ul><ul><li>   /* コメント */ </li></ul></ul><ul><ul><li>※ ソースを記述する際、スペースはいれないように </li></ul></ul><ul><ul><li>( css html とも) </li></ul></ul>セレクタ
  19. 19. 複数のプロパティをまとめる定義方法 <ul><li>h1{ </li></ul><ul><li>color:blue; </li></ul><ul><li>font-size:14px; </li></ul><ul><li>} </li></ul><ul><li>h1,h2{ </li></ul><ul><li>margin-bottom:30px; </li></ul><ul><li>} </li></ul>
  20. 20. セレクタの種類 <ul><li>基本セレクタ ( div や p などの HTML 要素に) </li></ul><ul><ul><li>p{font-size:14px;} </li></ul></ul><ul><li>クラスセレクタ ( 複数要素に ) </li></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>p.blue{color:blue;} .red{color:red;} </li></ul></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li><p class=“blue”> 青 </p> </li></ul></ul><ul><ul><li><p class=“red”> 赤 </p> </li></ul></ul>
  21. 21. セレクタの種類2 <ul><li>IDセレクタ(一つの要素だけに) </li></ul><ul><ul><li>CSS </li></ul></ul><ul><li>#main{ </li></ul><ul><li>width:300px;border:1px solid #ccc; </li></ul><ul><li>} </li></ul><ul><ul><li>HTML </li></ul></ul><ul><li><div id=“main”> </li></ul><ul><li>グレーの枠がついた 300 pxの箱です。 </li></ul><ul><li></div> </li></ul>
  22. 22. セレクタの種類3 <ul><li>擬似クラス </li></ul><ul><ul><li>クラスやIDでは表現できない性質について設定できるセレクタ </li></ul></ul><ul><ul><li>擬似クラスは「 : 」にあらかじめ決められた予約語を組み合わせて定義します。 </li></ul></ul><ul><li>-CSS </li></ul><ul><li>a:link{color:red;} </li></ul><ul><li>a:visited{color:green;} </li></ul><ul><li>a:hover{color:yellow;} </li></ul><ul><li>a:active{color:blue;} </li></ul><ul><li>-HTML </li></ul><ul><li><a href=“#”> リンク </a> </li></ul>
  23. 23. セレクタの種類4 <ul><li>子孫セレクタ </li></ul><ul><ul><li>特定の要素の子要素、または子孫の要素にスタイルを適用させます。要素との間には半角スペースで区切って指定する。 </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>p span{color:#fff0000;} </li></ul></ul><ul><ul><li>p .red{color:#ff0000;} </li></ul></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li><p> 入れ子になった <span> ところが </span> 子孫です </p> </li></ul></ul><ul><ul><li><p> 重なっているところが <strong class=“red”> 子孫 </strong> なわけです。 </p> </li></ul></ul>
  24. 24. 課題2 <ul><li>テキストを装飾しましょう。 </li></ul><ul><li>CSS ファイルを作成して、さきほど作成した HTML ファイルからリンクをはってください。 </li></ul><ul><li>CSS は以下を参考にして記述してみましょう。 </li></ul><ul><li>見出しを工夫して目立たせてください。 </li></ul><ul><li>メニューとインフォメーションには別々のクラスセレクタを設定してください。 </li></ul><ul><li>ページ全体の背景にも色をつけてください。 </li></ul>
  25. 25. 余白 <ul><li>margin(マージン) </li></ul><ul><ul><li>マージンとは、要素を囲む領域(ボックス)の外側の余白のことをいいます。 </li></ul></ul><ul><li>padding(パディング) </li></ul><ul><ul><li>パディングは、要素を囲む領域(ボックス)の内側の余白のことで、その要素の内容とボーダーとの余白のことをいいます。 </li></ul></ul>
  26. 26. マージン <ul><li>margin:0 10px 0 20px; </li></ul><ul><li>margin:0 auto; </li></ul><ul><li>margin:15px; </li></ul><ul><li>margin-top:10px; </li></ul><ul><li>margin-bottom:0; </li></ul><ul><li>margin-left:20px; </li></ul><ul><li>margin-right:5px; </li></ul>
  27. 27. パディング <ul><li>padding:0 10px 0 20px; </li></ul><ul><li>padding :0 auto; </li></ul><ul><li>padding :15px; </li></ul><ul><li>padding -top:10px; </li></ul><ul><li>padding -bottom:0; </li></ul><ul><li>padding -left:20px; </li></ul><ul><li>padding -right:5px; </li></ul>
  28. 28. 課題3 <ul><li>テキストの余白を調整してみましょう。 </li></ul><ul><li>さきほどの HTML を使用して、ページ全体と見出しとフッター(コピーライト)に余白をいれてみましょう。 </li></ul><ul><li>パディングとマージンの違いに注意してください。 </li></ul>
  29. 29. ボックスの構造 <ul><li>ボックスモデル </li></ul>高さ height 幅 width 内容を表示する領域 padding border margin
  30. 30. 課題4 <ul><li>「大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。~アクセス鎌倉駅から徒歩 10 分」までを大きな ひとつのボックスで囲って、背景色を入れて、余白をいれてみましょう。 ボックスの設定は ID セレクタ で cont という名称にしてください。ボックスは margin を使用して中央寄せにしてください。 </li></ul><ul><li>また、「メニュー コーヒー 紅茶 チーズケーキ あんみつ」と「インフォメーション 住所 鎌倉市雪ノ下 1-11-22  アクセス 鎌倉駅から徒歩 10 分」もそれぞれボックスで囲って、それぞれ背景色をいれて、余白をつけましょう。ボックスの設定は ID セレクタでメニューは menu 、インフォメーションは info としてください。 </li></ul>
  31. 31. 課題5 <ul><li>画像を加工してみましょう </li></ul><ul><li>http:// www.picnik.com / </li></ul><ul><li>image.jpg を 幅 327px  高さ 327px にトリミング(カット)して、 image02.jpg で保存してください。 </li></ul><ul><li>画像は img フォルダを作成して、そこに入れてください。 </li></ul>
  32. 32. 画像について <ul><li>jpg </li></ul><ul><li>gif </li></ul><ul><li>png </li></ul>
  33. 33. 画像の張り込み <ul><li><img src=“URL” width=“—px” height=“—px” alt=“ 画像の説明” /> </li></ul>
  34. 34. 回り込み <ul><li>回り込みを指定 </li></ul><ul><ul><li>float:left; </li></ul></ul><ul><ul><li>float:right; </li></ul></ul><ul><li>回り込みを解除 </li></ul><ul><ul><li>clear:left; </li></ul></ul><ul><ul><li>clear:right; </li></ul></ul><ul><ul><li>clear:both; </li></ul></ul>
  35. 35. 課題6 <ul><li>画像を貼り付けて、文字を回り込みさせましょう。 </li></ul><ul><li>メニューより下は回りこみを解除させましょう。 </li></ul><ul><li>画像には border をつけてください。色は白で、幅は 10px です。 </li></ul><ul><li>背景に画像をいれてみましょう。 </li></ul><ul><li>「インフォメーション」から class=”type02” をはずして、「インフォメーション」のみに css を反映させる仕方を考えましょう。( 子孫セレクタ を利用しましょう) </li></ul>
  36. 36. リンクをはる <ul><li>リンクをはる </li></ul><ul><li>< a href=“URL”> テキスト </a> </li></ul><ul><li>メーラーを起動するリンク </li></ul><ul><li><a href=“mailto: メールアドレス” >address</a> </li></ul><ul><li>サイト内リンク </li></ul><ul><li><a name=“ ~ &quot; id=“ ~ &quot;></a> </li></ul><ul><li><a href=“# ~” > テキスト </a> </li></ul>
  37. 37. 課題7 <ul><li>ページ内リンクをはってみましょう。 </li></ul><ul><li>コピーライトの上、 #cont ボックス内に「▲ページトップに戻る」というテキストをいれて、ページ上部に移動するようにリンクをつけてください。 </li></ul><ul><li>リンク名は「 top 」としてください。 </li></ul>
  38. 38. 2段組レイアウト <ul><li>div(ボックス)をfloatで並べる </li></ul>float:left; width:400px; margin:0 10px 0 0; float:right; width:200px; width:630px; padding:10px;
  39. 39. 課題8 <ul><li>課題 7 で使用した </li></ul><ul><li>最終デザイン .jpg のようなページを作成しましょう。 </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×