0
(x)html,css 勉強会
大まかな流れ <ul><li>なぜ勉強をするのか  16:00 ~ 16:05 </li></ul><ul><li>目標を具体的にする  16:05 ~ 16:10  </li></ul><ul><li>ブラウザについて  16:10 ~ 16...
<ul><li>1.なぜ勉強をするのか </li></ul>
<ul><li>1.なぜ勉強をするのか </li></ul>当然ながら、将来働く時の為に勉強をする。 しかし、本人に学ぼうという意識がなければ勉強しても身に付かない。 例えば、学校に来てちゃんと授業に出ていたとしても、ゲームをやってるような人は...
<ul><li>1.なぜ勉強をするのか </li></ul>「それが将来自分にとってどう役立つのか」 とは言っても、職種によって必要とされる技術・知識は様々。 パっと思いつくだけでこんなにある。 C,C++,JAVA,PHP,RoR,Perl,...
<ul><li>1.なぜ勉強をするのか </li></ul>そんな中からなぜ (X)HTML,CSS コーディングなのか。 (x)html 、 css はブラウザが窓口となる web 絡みの仕事ならば必ず使う事になる。 さらに、色々な開発環境が...
<ul><li>2.目標を具体的にする </li></ul>
<ul><li>2.目標を具体的にする </li></ul>コーディングが将来自分にとって必要な事は理解した。 =「じゃあ勉強しよう」となるわけではない。 自主的に毎日家で勉強を続けるのは大変な事。 将来何になりたいかを具体的なイメージで持つ事...
<ul><li>2.目標を具体的にする </li></ul>肝心の「将来何になりたいのか」。 オススメなのははてなのホットエントリーをチェックする事。 ( ソーシャルブックマークサービス ) 業界の流行の技術や、ギークの存在を知る事が出来る。 ...
<ul><li>2.目標を具体的にする </li></ul>肝心の「将来何になりたいのか」。その2 web 専攻なので「 web デザイナー」と「 web プログラマー」を紹介。( web プログラマーといっても様々だけど) 一番大事なのはその...
web デザイナー CSS を変えるだけでデザインがまるで違うものに変わる所など( ZEN GARDEN 参照)、他のプログラミング言語には無い「見てすぐわかる」という面白さがある。 必要なのはメモ帳とブラウザだけ。 簡単なので敷居も低い。
web デザイナー 簡単とは言いましたが、 web デザインには装飾という意味のデザインだけでなく、設計としてのデザインもある。 色彩やレイアウトもしっかりと意味のある物にし、ユーザビリティも考慮して作る。 情報デザインにも通じる所がある。 コ...
Web サイトの種類 ・ブランディング 会社やビジネスの顔として信頼・イメージを売る ・プロモーション 商品やサービスの特徴や優位性をアピール ・インフォメーション 商品やサービスの詳細情報などの情報伝達
プロのサイト紹介 Nutspress,DWalker,DD,DWorks,RedLine 日本人 web デザイナーのサイト Web デザインデータベース 国内ギャラリーサイト CSS Mania 海外ギャラリーサイト
web プログラマー 普通の PG がやるような社内の基幹システム作りと違って、個人レベルでも作れてたくさんの人に見て触ってもらえる。 ( mixi やニコニコ動画なども少人数制作)
web プログラマー Mixi は衛藤バタラが一人で制作。 衛藤バタラ氏は、 2004 年 2 月に SNS (ソーシャル・ネットワーキング サービス)の「 mixi 」を立ち上げた人物。現在は、運営会社であるミクシィで取締役最高技術責任者を務...
web プログラミング 海外の SNS の myspace や facebook 、一言日記(?)の twitter や写真共有の flickr 、日本の mixi や pixiv やブクログなど。 個人で十分作れるレベルでも、ユーザーの共感を...
プログラマーの種類(追加) 一般的にはプログラマーと言っても様々です システムを構築したりする SE (システムエンジニア) PC ソフトやゲームソフトの開発を行うソフトプログラマー、ゲームプログラマー WEB 上でのシステムなどを構築する W...
まとめ 良い面ばかり紹介してきたが、正直な話、 html と css すらわからないようでは何も作れない。 Html と css は抑えた上で(これは前提条件のレベル)、 Flash なりグラフィックデザインなりを勉強して web デザイナーに...
<ul><li>3.ブラウザについて </li></ul>
3.ブラウザについて コーディングした物を表示するのはブラウザ。 なのでまずはブラウザから学ぶ。
<ul><li>3.ブラウザについて </li></ul>ブラウザといえば IE IE6 のバグ ・ xml 宣言を入れると後方互換モードになる ・透過 PNG をサポートしていない ・ margin,padding が2倍になるバグ ・背景色...
<ul><li>3.ブラウザについて </li></ul>Ie の弊害 シェア率 No.1 だった =作る方も見る方も皆 IE =バグだらけの CSS 実装に合わせた形でサイトが作られる =その結果 FF など他の正しく CSS 実装されたブラ...
<ul><li>3.ブラウザについて </li></ul><ul><li>表示確認の手順 </li></ul><ul><li>FF に合わせてコーディングをする </li></ul><ul><li>( IE 以外は FF も Opera も S...
<ul><li>3.ブラウザについて </li></ul>注意点 Ie は6と7で表示確認をする (multiple IE) 昔は FF で作って IE 6のバグを直して終わりだったが、今は IE 6と IE7 それぞれのバグを直さないといけない。
4. (X)HTML,CSS の基礎
(X)HTML,CSS の基礎 <doctype> とか <html> <head> サイトの情報 </head> <body> ブラウザに表示されるサイトの中身 </body> </html>
XHTML とは DOCTYPE が違う。 その他 xml 宣言や meta 周りに色々増えている。 空タグは「  / 」をつける。 (例: <br> は <br /> になる、 meta も。) 全部小文字で。 (<BR> とか書かない ) ...
html のヘッダー部分 <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loo...
xhtml のヘッダー部分 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xht...
xhtml のヘッダー部分 <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> Xml 宣言。 ie6 で後方互換モードになってしまうので書かない方がいい。
DOCTYPE の種類 Document Type Definition (文書型定義) この HTML のこのバージョンを使いますよという宣言。 無くても一応動く。 strict,transitional,frameset の3種類。 <!D...
DOCTYPE の種類 HTML 4.01 Strict DTD ( 厳密な ) [1999 年 12 月の W3C 勧告 ] <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot...
MIME TYPE <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;> <meta http-equiv=&quot;c...
残りの meta <meta http-equiv=&quot;content-style-type&quot; content=&quot;text/css&quot;> Css 使う時は書く。 <meta http-equiv=&quot;...
なぜ CSS は外部ファイルにするのか 1ページのサイトならば直接 CSS を書いてもあまり問題はない。 (ソースが長くなり見難いが) HTML がいくつもある場合、外部の CSS を参照していればその1つを直せば全ての HTML のデザインを...
<body> 以下のタグ Block p div table dl ul ol form  h1 h2 h3 h4 h5 h6 など勝手に改行される要素 Inline a  b  br code span strong img small  な...
5.コーディングのポイント
コーディングのポイント (X)HTML は文章構造のみを定義 CSS で装飾する ( JavaScript で動きをつける) 一番上の見出しに文字の大きさが丁度いいからと h3 や h4 を使わない。 html は見た目ではなく意味を考えて使う。
コーディングのポイント 
 html はあくまで文章の構造化に使用する。 <h1> タグは見出し、 <blockquote> タグは引用文等。 レイアウトに関しては全て CSS で定義する事が W3C に推奨されている。   <br> <h3>...
コーディングのポイント table レイアウト、フレームは絶対に使わない。 Table はコードが長くなる。 フレームはファイルが無駄に増える、 SEO 的にも宜しくない。 両方ともアクセシビリティ的に駄目。 音声読み上げブラウザで正しい順序で...
コーディングのポイント インデントをする、コメントを入れる。 (コメント位置に注意) コーディングから見る SEO 。 (body 直下に h1,h2 でキーワード ) h3,h4 や strong 、 em もキーワード強調。 やり過ぎはスパ...
コーディングのポイント 構文チェッカー CSS (本家日本語) http://jigsaw.w3.org/css-validator/ HTML( 本家だけど英語 ) http://validator.w3.org/ Another HTML-...
コーディングのポイント <ul><li>レイアウトの基本は DIV 。 </li></ul><ul><li>全体枠 </li></ul><ul><li>ヘッダー </li></ul><ul><li>サイドメニュー </li></ul><ul><...
コーディングのポイント DIV はできるだけ少なく。 H1 や ul だけで配置が出来ればわざわざそれを DIV で囲む必要はない。 ( IE6 は文法的には正しく書いてもきちんと表示されないので表示確認を怠らない。)
6.実習
サイトの型を作る index.html を作成。 文字コードは UTF-8 で。 テキストエディタの保存設定にも気をつける。
全体像 <html> <head> サイトの情報 </head> <body> サイトのコンテンツ </body> </html> これはうたなくていい。
ヘッダーをつくる <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-s...
ボディをつくる <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-st...
見出しを作る h1,h2,h3 を使う。 H1 は1ページに1つだけ。 それ以外はいくつ使ってもいい。 ただし、数字の順番を守る。
テキストをうつ <br> で改行、 <p> で段落 <br> 連発でスペースを作らない
リストを作る Ol は順番の決まっているリスト Ul は順不同リスト 先頭に出て来る記号は CSS で変更出来る (消す事も出来る)
CSS を追加する <link rel=&quot;stylesheet&quot; href=&quot;base.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /> ba...
背景色をつける Body{ background-color:#cccccc; } Body タグで囲まれた範囲の背景色を指定。 R:G:B が2桁ずつ。16進数。 0 から f まで。 0 は光らないので、 000000 だと黒、 fffff...
div で囲んでグループ化 <div></div> で囲み、それを CSS で指定する事によってレイアウトする。 Div{ width:800px; background-color:#ffffff; }
余白をリセットする Block 要素の多くにはデフォルトで余白が設定されている。 Margin と padding で余白を指定できる h1,h2,h3{ Margin:0; Padding:0; }
レイアウトしなおす Div に margin-left:auto; margin-right:auto; padding:10px; を追加。
h3 を整える H3{ margin-top:20px; border-bottom:1px solid #dddddd; } さらに、 border-left:3px solid #ffcc00; で横にライン。 padding-left:5...
div に id と class をつける 全体の div に id:wrap 、 CSS の div を div#wrap に。 大まかな流れを div class menu 課題と感想を div class contents Div cla...
float で左右に割り振る <ul><li>Div.menu, div.contents に float:left; を追加。 </li></ul><ul><li>2つの問題が起こる。 </li></ul><ul><li>float:left...
<ul><li>float:left したのに位置が変わらない。 </li></ul>div#wrap 全体が 800px 。 Menu と contents がそれぞれ 400 でぴったりおさまるはず。 余白の 20px や border の...
<ul><li>背景の高さが縮まる。 </li></ul>Float は要素を浮かして配置を変更するプロパティ。 div.menu と div.contents が wrap の中から高さを支えていたが、 float で浮いたため wrap が...
float で位置を変える width を 400 から 390 に減らす。
float を clear する <div id=&quot;footer&quot;> コピーライト </div> div#footer{clear:left;} both だと right も clear 出来る。
clearfix div#header:after{ content: &quot;.&quot;; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; li...
menu と contents の css をわける div.menu{ width:240px; border:1px solid #ddd; float:left; margin-top:10px; padding:0 10px 10px ...
スマートなコードを書く div.box{ border:1px solid #ddd; float:left; margin-top:10px; padding:0 10px 10px 10px; } <div class=&quot;box ...
グローバルメニューを追加 <ul id=”gmenu”> <li>HTML</li> <li>XHTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> </ul>
グローバルメニュー CSS ul#gmenu li{ width:100px; height:30px; float:left; border:1px solid #ff8800; list-style:none; text-align:cen...
左側の余白を消す h1,h2,h3{ margin:0; padding:0; } に ul#gmenu も追加。 ul#gmenu に clearfix を使う。 Gmenu li の width を 157px に。
仕上げ H2 の font-size を小さく。 h2{font-size:10px;} Gmenu の上下に余白を。 ul#gmenu{ margin:10px 0 10px 0; }
まとめ とにかく数をこなして下さい。 コードをうった分だけ力になります。 今日紹介出来たのはコーディングの基礎だけです。 自分でサイトを作るなり勉強ブログを開設するなりして勉強を続けて下さい。 お疲れ様でした。
Upcoming SlideShare
Loading in...5
×

勉強会スライド2

2,410

Published on

2008/12に行われた校内勉強会の資料。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,410
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "勉強会スライド2"

  1. 1. (x)html,css 勉強会
  2. 2. 大まかな流れ <ul><li>なぜ勉強をするのか 16:00 ~ 16:05 </li></ul><ul><li>目標を具体的にする 16:05 ~ 16:10 </li></ul><ul><li>ブラウザについて 16:10 ~ 16:15 </li></ul><ul><li>(X)HTML,CSS の基礎 16:15 ~ 16:25 </li></ul><ul><li>コーディングのポイント 16:25 ~ 16:35 </li></ul><ul><li>休憩 16:35 ~ 16:50 </li></ul><ul><li>実習 16:50 ~ 17:40 </li></ul><ul><li>休憩 17:40 ~ 17:55 </li></ul><ul><li>実習続き 17:55 ~ </li></ul>
  3. 3. <ul><li>1.なぜ勉強をするのか </li></ul>
  4. 4. <ul><li>1.なぜ勉強をするのか </li></ul>当然ながら、将来働く時の為に勉強をする。 しかし、本人に学ぼうという意識がなければ勉強しても身に付かない。 例えば、学校に来てちゃんと授業に出ていたとしても、ゲームをやってるような人は何も身に付かない。 来ないのは論外。 一番大事なのはやる気があるかどうかだが、「それが将来自分にとってどう役立つのか」を理解しない事にはやる気も出ない。
  5. 5. <ul><li>1.なぜ勉強をするのか </li></ul>「それが将来自分にとってどう役立つのか」 とは言っても、職種によって必要とされる技術・知識は様々。 パっと思いつくだけでこんなにある。 C,C++,JAVA,PHP,RoR,Perl,Python,XML,JS,AS,(X)HTML,CSS,web ライティング、プレゼン、ロゴデザイン、 DTP 、 web デザイン、情報デザイン、色彩、ユーザビリティ、アクセシビリティ、タイポグラフィ、 linux 、データベース、ネットワーク、セキュリティ
  6. 6. <ul><li>1.なぜ勉強をするのか </li></ul>そんな中からなぜ (X)HTML,CSS コーディングなのか。 (x)html 、 css はブラウザが窓口となる web 絡みの仕事ならば必ず使う事になる。 さらに、色々な開発環境があるので、オーサリングソフトを使わない「手打ち」のスキルが求められる。 (メモ帳、 DW 、 CMS 、 Eclipse など) コーディングレスキュー ( http://coding-rescue.com/ ) コーディングが出来れば一応職にはつける。
  7. 7. <ul><li>2.目標を具体的にする </li></ul>
  8. 8. <ul><li>2.目標を具体的にする </li></ul>コーディングが将来自分にとって必要な事は理解した。 =「じゃあ勉強しよう」となるわけではない。 自主的に毎日家で勉強を続けるのは大変な事。 将来何になりたいかを具体的なイメージで持つ事によって、 自分のやりたい事が見えて来て勉強がしやすくなる。 (今までやってきた国語数学理科社会と違って、将来仕事という形で実生活に直結する事だとわかれば勉強する気も起きる) プロのスポーツ選手になりたいと思って練習する人はいない また、自分に足りないもの、必要なものがわかってきて「焦り」もあって勉強するようになる。
  9. 9. <ul><li>2.目標を具体的にする </li></ul>肝心の「将来何になりたいのか」。 オススメなのははてなのホットエントリーをチェックする事。 ( ソーシャルブックマークサービス ) 業界の流行の技術や、ギークの存在を知る事が出来る。 凄い人を見ていると刺激になる。 なによりも、自分より凄い人なんて腐る程いるという事がわかる。 ここで勉強会用 .txt ギーク=コンピュータやインターネットに関する深い知識を持った技術者への尊称
  10. 10. <ul><li>2.目標を具体的にする </li></ul>肝心の「将来何になりたいのか」。その2 web 専攻なので「 web デザイナー」と「 web プログラマー」を紹介。( web プログラマーといっても様々だけど) 一番大事なのはその事(技術なり職業なり)を好きになる事。 そうすればいちいち周りから言われなくても自主的に勉強するようになる。
  11. 11. web デザイナー CSS を変えるだけでデザインがまるで違うものに変わる所など( ZEN GARDEN 参照)、他のプログラミング言語には無い「見てすぐわかる」という面白さがある。 必要なのはメモ帳とブラウザだけ。 簡単なので敷居も低い。
  12. 12. web デザイナー 簡単とは言いましたが、 web デザインには装飾という意味のデザインだけでなく、設計としてのデザインもある。 色彩やレイアウトもしっかりと意味のある物にし、ユーザビリティも考慮して作る。 情報デザインにも通じる所がある。 コーディングにも汚いコードと美しいコードがある。
  13. 13. Web サイトの種類 ・ブランディング 会社やビジネスの顔として信頼・イメージを売る ・プロモーション 商品やサービスの特徴や優位性をアピール ・インフォメーション 商品やサービスの詳細情報などの情報伝達
  14. 14. プロのサイト紹介 Nutspress,DWalker,DD,DWorks,RedLine 日本人 web デザイナーのサイト Web デザインデータベース 国内ギャラリーサイト CSS Mania 海外ギャラリーサイト
  15. 15. web プログラマー 普通の PG がやるような社内の基幹システム作りと違って、個人レベルでも作れてたくさんの人に見て触ってもらえる。 ( mixi やニコニコ動画なども少人数制作)
  16. 16. web プログラマー Mixi は衛藤バタラが一人で制作。 衛藤バタラ氏は、 2004 年 2 月に SNS (ソーシャル・ネットワーキング サービス)の「 mixi 」を立ち上げた人物。現在は、運営会社であるミクシィで取締役最高技術責任者を務める。 衛藤氏は、無料のオープンソースソフトウエア(具体的には LAMP = Linux 、 Apache 、 MySQL 、 Perl )を駆使して mixi のシステムを 1 人で開発し、サーバーの設置などもこなしたという。 ちなみに去年退社して新サービスに取組み中。 http://itpro.nikkeibp.co.jp/article/COLUMN/20070831/280837/
  17. 17. web プログラミング 海外の SNS の myspace や facebook 、一言日記(?)の twitter や写真共有の flickr 、日本の mixi や pixiv やブクログなど。 個人で十分作れるレベルでも、ユーザーの共感を得られれば大ヒットして一攫千金のチャンスがある。
  18. 18. プログラマーの種類(追加) 一般的にはプログラマーと言っても様々です システムを構築したりする SE (システムエンジニア) PC ソフトやゲームソフトの開発を行うソフトプログラマー、ゲームプログラマー WEB 上でのシステムなどを構築する WEB プログラマーなど また、業種が違えば使用する言語も違います システム系なら C 、 D など ソフト開発では C 、 VB など WEB 系では JAVA 、 Perl 、 PHP 、 HTML 、 CSS 、 XML さらにグラフィックなども関係します また、最近ではデザイナーやグラフィッカーなどもプログラミングを行います いわゆる CG などで作られたキャラクターを自在に動かすのもプログラムです ですからグラフィックなどとも密接な関係にあります
  19. 19. まとめ 良い面ばかり紹介してきたが、正直な話、 html と css すらわからないようでは何も作れない。 Html と css は抑えた上で(これは前提条件のレベル)、 Flash なりグラフィックデザインなりを勉強して web デザイナーに。 もしくは PHP なり RoR なりを勉強して、 web プログラマーに。 学校はあくまで知識を広める所であって、深めるには独学でやるしかない。 アイデア発想法だのプレゼンだのもしっかりとした技術・知識の土台があってこその物。 技術・知識のない人のアイデアやプレゼンは予想にすぎない。
  20. 20. <ul><li>3.ブラウザについて </li></ul>
  21. 21. 3.ブラウザについて コーディングした物を表示するのはブラウザ。 なのでまずはブラウザから学ぶ。
  22. 22. <ul><li>3.ブラウザについて </li></ul>ブラウザといえば IE IE6 のバグ ・ xml 宣言を入れると後方互換モードになる ・透過 PNG をサポートしていない ・ margin,padding が2倍になるバグ ・背景色が指定された要素内にフロートがあるときに要素内の文字が消える 等々。 そんなブラウザがシェア No.1 なので合わせないといけなかった。 今は IE7 が1位だが、 IE6 も未だに3、4割は居る。 しかも IE7 もまだまだ CSS 実装がいい加減、バグだらけ。
  23. 23. <ul><li>3.ブラウザについて </li></ul>Ie の弊害 シェア率 No.1 だった =作る方も見る方も皆 IE =バグだらけの CSS 実装に合わせた形でサイトが作られる =その結果 FF など他の正しく CSS 実装されたブラウザできちんと表示されなくなる = FF は駄目なブラウザだと誤解が広がる
  24. 24. <ul><li>3.ブラウザについて </li></ul><ul><li>表示確認の手順 </li></ul><ul><li>FF に合わせてコーディングをする </li></ul><ul><li>( IE 以外は FF も Opera も Safari も css 実装がちゃんとしているので、 FF で OK なら OK だと思っていい) </li></ul><ul><li>Ie で表示確認をするとかなりの確立で崩れているのでハックなりなんなりで直す(ベストなのはハックを使わないバグ回避のコーディング) </li></ul><ul><li>最後に FF と IE でまた確認をする </li></ul>
  25. 25. <ul><li>3.ブラウザについて </li></ul>注意点 Ie は6と7で表示確認をする (multiple IE) 昔は FF で作って IE 6のバグを直して終わりだったが、今は IE 6と IE7 それぞれのバグを直さないといけない。
  26. 26. 4. (X)HTML,CSS の基礎
  27. 27. (X)HTML,CSS の基礎 <doctype> とか <html> <head> サイトの情報 </head> <body> ブラウザに表示されるサイトの中身 </body> </html>
  28. 28. XHTML とは DOCTYPE が違う。 その他 xml 宣言や meta 周りに色々増えている。 空タグは「 / 」をつける。 (例: <br> は <br /> になる、 meta も。) 全部小文字で。 (<BR> とか書かない ) 基本的に色々と口うるさくなってる。
  29. 29. html のヘッダー部分 <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> <html lang=&quot;ja&quot;> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;> <meta http-equiv=&quot;content-style-type&quot; content=&quot;text/css&quot;> <meta http-equiv=&quot;content-script-type&quot; content=&quot;text/javascript&quot;> <meta name=&quot;description&quot; content=&quot; 日本最大級のポータルサイト。 &quot;> <title>HTML ヘッダー </title> <link rel=&quot;stylesheet&quot; href=&quot;default.css&quot; type=&quot;text/css&quot; media=&quot;all&quot;> <link rel=&quot;stylesheet&quot; href=“print.css&quot; type=&quot;text/css&quot; media=“print&quot;> </head>
  30. 30. xhtml のヘッダー部分 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;ja&quot; lang=&quot;ja&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=“text/html; charset=utf-8&quot; /> <meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /> <meta http-equiv=&quot;Content-Script-Type&quot; content=&quot;text/javascript&quot; /> <title>XHTML ヘッダー </title> <link rel=&quot;stylesheet&quot; href=&quot;default.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /> </head>
  31. 31. xhtml のヘッダー部分 <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> Xml 宣言。 ie6 で後方互換モードになってしまうので書かない方がいい。
  32. 32. DOCTYPE の種類 Document Type Definition (文書型定義) この HTML のこのバージョンを使いますよという宣言。 無くても一応動く。 strict,transitional,frameset の3種類。 <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot;>
  33. 33. DOCTYPE の種類 HTML 4.01 Strict DTD ( 厳密な ) [1999 年 12 月の W3C 勧告 ] <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> HTML 4.01 Transitional DTD ( 移行期 ) <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> HTML 4.01 Frameset DTD ( フレームセット用 ) <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot;> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot;http://www.w3.org/TR/html4/frameset.dtd&quot;> XHTML 1.0 Strict DTD [2000 年 1 月 26 日の W3C 勧告 ] <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> XHTML 1.0 Transitional DTD [2000 年 1 月 26 日の W3C 勧告 ] <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> XHTML 1.0 Frameset DTD [2000 年 1 月 26 日の W3C 勧告 ] <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> XHTML 1.1 Strict DTD <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;>
  34. 34. MIME TYPE <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;> <meta http-equiv=&quot;content-type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot; /> HTML ならば content=”text/html; XHTML は application/xhtml+xml; IE が対応していないので今はまだ XHTML でも text/html を使うべき。
  35. 35. 残りの meta <meta http-equiv=&quot;content-style-type&quot; content=&quot;text/css&quot;> Css 使う時は書く。 <meta http-equiv=&quot;content-script-type&quot; content=&quot;text/javascript&quot;> js 使う時は書く。
  36. 36. なぜ CSS は外部ファイルにするのか 1ページのサイトならば直接 CSS を書いてもあまり問題はない。 (ソースが長くなり見難いが) HTML がいくつもある場合、外部の CSS を参照していればその1つを直せば全ての HTML のデザインを修正出来る。 全ての HTML 内に CSS が書いてあると全ての HTML の CSS を直さなくてはならない。
  37. 37. <body> 以下のタグ Block p div table dl ul ol form h1 h2 h3 h4 h5 h6 など勝手に改行される要素 Inline a b br code span strong img small など改行されない要素 display:○○; で変更可。 none を指定すると消える。
  38. 38. 5.コーディングのポイント
  39. 39. コーディングのポイント (X)HTML は文章構造のみを定義 CSS で装飾する ( JavaScript で動きをつける) 一番上の見出しに文字の大きさが丁度いいからと h3 や h4 を使わない。 html は見た目ではなく意味を考えて使う。
  40. 40. コーディングのポイント 
 html はあくまで文章の構造化に使用する。 <h1> タグは見出し、 <blockquote> タグは引用文等。 レイアウトに関しては全て CSS で定義する事が W3C に推奨されている。   <br> <h3><b> みだし </b></h3> <br> で上に余白を作り <b> で太字にしている。 CSS を使うと、 <h3 class=&quot;board&quot;> みだし </h3> このようにコードを減らす事が出来る。   解説: h3 に board クラスを設定。 CSS の board クラスに margin-top:○○px; を記述、 <br> の代わりに上に余白を空ける。
そして font-weight:bold; で <b> タグと同じ太字にする。 (この段階で理解度をチェック)
  41. 41. コーディングのポイント table レイアウト、フレームは絶対に使わない。 Table はコードが長くなる。 フレームはファイルが無駄に増える、 SEO 的にも宜しくない。 両方ともアクセシビリティ的に駄目。 音声読み上げブラウザで正しい順序で読まれない可能性がある。 ただし、レイアウトでなく表を作るのは table で 。
  42. 42. コーディングのポイント インデントをする、コメントを入れる。 (コメント位置に注意) コーディングから見る SEO 。 (body 直下に h1,h2 でキーワード ) h3,h4 や strong 、 em もキーワード強調。 やり過ぎはスパム扱いされる。
  43. 43. コーディングのポイント 構文チェッカー CSS (本家日本語) http://jigsaw.w3.org/css-validator/ HTML( 本家だけど英語 ) http://validator.w3.org/ Another HTML-lint (本家関係ないけど日本語) http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
  44. 44. コーディングのポイント <ul><li>レイアウトの基本は DIV 。 </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>
  45. 45. コーディングのポイント DIV はできるだけ少なく。 H1 や ul だけで配置が出来ればわざわざそれを DIV で囲む必要はない。 ( IE6 は文法的には正しく書いてもきちんと表示されないので表示確認を怠らない。)
  46. 46. 6.実習
  47. 47. サイトの型を作る index.html を作成。 文字コードは UTF-8 で。 テキストエディタの保存設定にも気をつける。
  48. 48. 全体像 <html> <head> サイトの情報 </head> <body> サイトのコンテンツ </body> </html> これはうたなくていい。
  49. 49. ヘッダーをつくる <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;ja&quot; lang=&quot;ja&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /> <title> 勉強会 </title> <link rel=&quot;stylesheet&quot; href=&quot;base.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /> </head>
  50. 50. ボディをつくる <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;ja&quot; lang=&quot;ja&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /> <title> 勉強会 </title> <link rel=&quot;stylesheet&quot; href=&quot;base.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /> </head> <body> </body> </html>
  51. 51. 見出しを作る h1,h2,h3 を使う。 H1 は1ページに1つだけ。 それ以外はいくつ使ってもいい。 ただし、数字の順番を守る。
  52. 52. テキストをうつ <br> で改行、 <p> で段落 <br> 連発でスペースを作らない
  53. 53. リストを作る Ol は順番の決まっているリスト Ul は順不同リスト 先頭に出て来る記号は CSS で変更出来る (消す事も出来る)
  54. 54. CSS を追加する <link rel=&quot;stylesheet&quot; href=&quot;base.css&quot; type=&quot;text/css&quot; media=&quot;all&quot; /> base.css を作成。
  55. 55. 背景色をつける Body{ background-color:#cccccc; } Body タグで囲まれた範囲の背景色を指定。 R:G:B が2桁ずつ。16進数。 0 から f まで。 0 は光らないので、 000000 だと黒、 ffffff だと白。 Ff0000 は R がまぶしく他は光らないので真っ赤になる。
  56. 56. div で囲んでグループ化 <div></div> で囲み、それを CSS で指定する事によってレイアウトする。 Div{ width:800px; background-color:#ffffff; }
  57. 57. 余白をリセットする Block 要素の多くにはデフォルトで余白が設定されている。 Margin と padding で余白を指定できる h1,h2,h3{ Margin:0; Padding:0; }
  58. 58. レイアウトしなおす Div に margin-left:auto; margin-right:auto; padding:10px; を追加。
  59. 59. h3 を整える H3{ margin-top:20px; border-bottom:1px solid #dddddd; } さらに、 border-left:3px solid #ffcc00; で横にライン。 padding-left:5px; で余白を調整。 休憩を入れる
  60. 60. div に id と class をつける 全体の div に id:wrap 、 CSS の div を div#wrap に。 大まかな流れを div class menu 課題と感想を div class contents Div class menu と contents にボーダー追加。 Div.menu, div.contents{ width:400px; border:1px solid #ddd; }
  61. 61. float で左右に割り振る <ul><li>Div.menu, div.contents に float:left; を追加。 </li></ul><ul><li>2つの問題が起こる。 </li></ul><ul><li>float:left したのに位置が変わらない。 </li></ul><ul><li>背景の高さが縮まる。 </li></ul>
  62. 62. <ul><li>float:left したのに位置が変わらない。 </li></ul>div#wrap 全体が 800px 。 Menu と contents がそれぞれ 400 でぴったりおさまるはず。 余白の 20px や border の 4px があるためカラム落ちをしている。
  63. 63. <ul><li>背景の高さが縮まる。 </li></ul>Float は要素を浮かして配置を変更するプロパティ。 div.menu と div.contents が wrap の中から高さを支えていたが、 float で浮いたため wrap が潰れた状態。
  64. 64. float で位置を変える width を 400 から 390 に減らす。
  65. 65. float を clear する <div id=&quot;footer&quot;> コピーライト </div> div#footer{clear:left;} both だと right も clear 出来る。
  66. 66. clearfix div#header:after{ content: &quot;.&quot;; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } ピリオドを :after で要素の後に追加するという意味。 新たに div を追加してから clear しなくても clear 出来る。
  67. 67. menu と contents の css をわける div.menu{ width:240px; border:1px solid #ddd; float:left; margin-top:10px; padding:0 10px 10px 10px; } div.contents{ width:500px; border:1px solid #ddd; float:left; margin-left:10px; margin-top:10px; padding:0 10px 10px 10px; }
  68. 68. スマートなコードを書く div.box{ border:1px solid #ddd; float:left; margin-top:10px; padding:0 10px 10px 10px; } <div class=&quot;box menu&quot;> <div class=&quot;box contents&quot;> で複数呼び出し。
  69. 69. グローバルメニューを追加 <ul id=”gmenu”> <li>HTML</li> <li>XHTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> </ul>
  70. 70. グローバルメニュー CSS ul#gmenu li{ width:100px; height:30px; float:left; border:1px solid #ff8800; list-style:none; text-align:center; background:#ffcc00; line-height:200%; }
  71. 71. 左側の余白を消す h1,h2,h3{ margin:0; padding:0; } に ul#gmenu も追加。 ul#gmenu に clearfix を使う。 Gmenu li の width を 157px に。
  72. 72. 仕上げ H2 の font-size を小さく。 h2{font-size:10px;} Gmenu の上下に余白を。 ul#gmenu{ margin:10px 0 10px 0; }
  73. 73. まとめ とにかく数をこなして下さい。 コードをうった分だけ力になります。 今日紹介出来たのはコーディングの基礎だけです。 自分でサイトを作るなり勉強ブログを開設するなりして勉強を続けて下さい。 お疲れ様でした。
  1. A particular slide catching your eye?

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

×