Microsoft PowerPoint - css-3days.ppt [互換モード]

Size: px

Start display at page:

Download "Microsoft PowerPoint - css-3days.ppt [互換モード]"

けいしょうあくや
7 years ago
Views:

1 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義するスタイルシートの規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方論理構造 : マークアップ言語 HTML, XHTML, XML などレイアウト ( 見た目 ): スタイルシート言語 CSS など HTML&CSS の経緯 1990 頃 Web 登場 HTMLはWebページの論理構造を記述するものでレイアウトを記述するものではないレイアウトを記述するためのスタイルシート言語は規定されなかった 1993 頃以降ブラウザ普及サイト製作者は見た目をよくしたいブラウザにあわせてレイアウト記述例 ) 文字を大きくしたいときに <h3> を使うブラウザによって異なる独自要素も登場例 )<font> HTMLの混乱と複雑化 HTML&CSS の経緯 1996 レイアウトを記述する枠組としてCSSが規定 (CSS1) 1997 HTML3.2: 折衷的なHTML 暫定的措置としてレイアウトに関する独自要素の取り入れ 1997 HTML4.0: 論理構造とレイアウトの分離 1998 CSS HTML XHTML XHTML CSS /2012 CSS HTML5: 元はWHATWGによる CSS 利用のメリット詳細なレイアウトを記述できる HTML よりレイアウト記述力が高い例 ) テキストや画像を好きな位置に配置できる HTML からレイアウトに関する記述を除去できる HTML がシンプルに文法間違いを減らせる情報を正しく伝達できる表示の間違いを減らせる維持管理が楽にアクセシビリティ向上例 )HTML の table 要素を使ってレイアウトすると音声読み上げソフトを利用して Web ページを聞く視覚障害者に正しく情報が伝わりにくい検索エンジン対策 1

2 CSS 利用のメリットレイアウトに関する記述を外部 CSS ファイルにできるサイトの維持管理が楽に ( 後述 ) ユーザが自分の好きなスタイルシートでページを見ることができる正しい ( 推奨される ) 考え方 CSS のメリットの例 (1) New という文字列の色を赤から黄色にかえたい場合 100 ページ (100 個の HTML ファイル ) の Web サイト HTML のみで記述 HTML ファイル <font color= red >New</font> 100 個の HTML ファイルで red を yellow に変更 HTML+CSS で記述 HTML <span class= attention >New</span> attention( 名前は自由 ) という class を設定 100 個の HTML ファイルは変更不要 CSS( 別ファイル ).attention color: yellow; 1 個の CSS ファイルにおいて attention の色を red から yellow に変更 CSS の基本セレクタ { プロパティ : プロパティ値 ;} 例 p {color: #ff0000; } 課題 1. トップページを CSS を用いて作り直す 2. 二つ以上のブラウザで確認 3. W3C HTML Validator で HTML 文法チェック, W3C CSS Validator で CSS 文法チェック 4. トップページを置き換える 2

3 課題 5. 画像ファイルを images ディレクトリにまとめる 6. 2 ページ目以降も CSS を用いて作り直す文法チェックも忘れずに 7. サイト全体を二つ以上のブラウザで確認スマホを持っている人はスマホでも確認課題 ( 余裕のある人 ) 8. HTML5+CSS3 対応にする ( 最初から HTML5+CSS3 でもよい ) HTML と CSS の組合せ ( 参考 ) HTML と CSS の組合せは自由現在 HTML4.01 Transitional HTML4 + CSS2( 授業ではこれを取り上げる ) HTML4 + CSS3 HTML5 + CSS2 HTML5 + CSS3( 余裕のある人へ ) 課題の目標論理構造 (HTML) とレイアウト (CSS) を分ける HTML からレイアウトに関する記述をなくす文法チェックに合格する (HTML/CSS) ディレクトリ構成を整理する複数ページ ( サイト全体 ) を CSS 化する一般的なディレクトリ構成 public_html( ディレクトリ ) css( ディレクトリ ) index.css( 名前は自由 ) images( ディレクトリ ) index.html 他の HTML ファイル ( 準備 ) 0. 見本の確認 (HTML4.01+CSS2) 以下 index.html, profile.html css/index.css images/photo.gif コピーして使用してもよい 3

4 1. トップページを CSS を用いて作り直す 1.1 css という名前のディレクトリを public_html の下に作成アクセス権を変更 1.2 index.css という名前 ( 名前は自由 ) のファイルを css の下に作成見本の index.css をダウンロード & 保存すると便利アクセス権を変更 1.3 index.html を test.html という名前で保存 ( バックアップのため ) 1.4 test.html から index.css を参照 <link rel= stylesheet type= text/css href= css/index.css > 1. トップページを CSS を用いて作り直す 1.5 test.html からレイアウトに関する記述を取り除く (HTML) 1.6 レイアウトを index.css に記述する (CSS) 注 )1.5, 1.6 は上から順番に少しずつ行う注 ) デザインを変更してもよい Tips 少しずつ簡単なところから上から下へ <h1> の上下の <hr> <h1> <font color= > <span> <body bgcolor= > や <body background= > <body> <center> <div> レイアウト調整に用いた <br>,<pre>, <table> などをなくす 2. 複数のブラウザで確認 3. HTML と CSS の文法チェック 3.1 W3C HTML Validator 3.2 W3C CSS Validator 4. トップページを置き換える test.html が完成したら index.html を index.html.bak などの名前で保存し ( バックアップのため ) test.html を index.html の名前で保存 5. 画像ファイルを images ディレクトリにまとめる 5.1 public_html の下に images ディレクトリを作成 5.2 画像ファイル (.jpg,.gif など ) を images ディレクトリに移動 ( リンク切れが心配な場合はコピーする ) 5.3 HTML と CSS ファイルの中の画像へのパスを変更して保存例 )<img src= photo.gif > を <img src= images/photo.gif > に 4

5 6. 2 ページ目以降も CSS を利用して書き直す手順は 1. と同じ 7. サイト全体を二つ以上のブラウザで確認スマホを持っている人はスマホでも確認ブロックレベル要素とインライン要素ブロックレベル要素文書や段落を構成する基本要素例 ) 見出し要素 div 要素インライン要素特定の部分に何らかの役割を持たせる要素中にブロック要素を含むことができない例 ) アンカー要素 span 要素 id と class 見本の基本レイアウト ( トップページ ) wrapper id 要素に固有の ( 一つしかない )identifier( 名前 ) をつける class 要素にクラス ( 分類 ) をつける photo menu description header footer 見本の基本レイアウト (2 ページ目 ) wrapper header menu2 margin と padding page footer padding border margin 要素の中身 5

6 margin と padding の記述方法 margin: 0; 上下左右が 0 margin: 0 auto; 上下が 0 左右は中央揃え margin: ; 上右下左が 0 CSS ファイルの見方 HTML: ブラウザでドキュメントのソースを表示 CSS:HTML を見て CSS ファイルの URL をブラウザで入力個別に指定するときは margin-left, margin-right, margin-top, margin-bottom 例 ) margin-left: 100; Web における絶対パスと相対パス絶対パスファイルの URL 例 ) 学籍番号 / 例 ) 学籍番号 /index.html 学籍番号 /profile.html 例 ) 学籍番号 /css/index.css 例 ) 学籍番号 /images/photo.gif Web における絶対パスと相対パス相対パス自分の位置から見た相手の位置自分. 自分の上.. ( ただし./ は省略可能 ) 例 )index.html から profile.html を見る場合 :./profile.html または profile.html 例 )index.html から index.css を見る場合 :./css/index.css または css/index.css 例 )index.css から photo.gif を見る場合 :../images/photo.gif パーミッションディレクトリやファイルのアクセス権 d: directory; r: readable; w: writable; x: executable d r w x r w x r w x Owner Group Other - r w - r - - r - - ( 例 ) このファイルは自分 ( オーナー ) は読み書き可能他人は読むことができるだけファイル等が表示できないときファイル名空白を含むファイル名日本語等のファイル名は画像ファイルの形式 (PNG, JPG, GIF) ファイルが壊れていないかパス名 file: ではファイルの置き場所 public_htmlに下にあるか指定された場所にあるかパーミッションが読めない設定になっていないか 6

7 ファイル等が表示できないとき ( 文字化け ) <meta> で指定された文字コードと実際のファイルの文字コードが合っているかファイルを文字化け状態で保存していないか他の見本 HTML5+CSS2 以下 index5.html, profile5.html css/index2.css images/photo.gif コピーして使用してもよい注 )HTML5 の IE 対策はしていない他の見本 HTML5+CSS3 以下 index.html css/css3.css images/photo jpg, photo jpg scrollsmoothly.js コピーして使用してもよい CSS 利用の問題 HTMLより仕様が複雑ユーザがスタイルシートを利用しないことがあるブラウザによってCSSの対応が異なるブラウザのバグもある CSSの文法通りに記述しても正しく表示されないことがあるブラウザの対応度合いの差はHTMLのより大きい複数のブラウザで美しく正しく表示させるためには多くの手間と時間とノウハウが必要 7

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えようスタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので表示はブラウザ次第であることを強調してきましたあるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると他の環境では意味が通じにくい相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなくスタイルシートという別の機能をもちいます