第5章 スタイルシートによる レイアウトデザイン

Slides:



Advertisements
Similar presentations
XML ゼミ 独習 XML ~ 第 6 章 XHTML~ 6.1 XHTML の概要 6.2 XHTML の構造 谷津 哲平.
Advertisements

T2V 技術 Web 製作ラボ 4/ hayashiLabo 3. T2V 技術 HTML まずは.
WEB デザイン基礎実 験 担当:清水,田代 副手:浦辺,石井 ( 1 日目) NC-2 情報通信基礎実験.
コンピュータ基礎実習 ( 上級 ) 第九回 スタイルシート 清水淳紀. はじめに  今回の内容  スタイルシート (CSS) とは何か  CSS の役割  CSS の利点  スタイルシートの基本  CSS の記入方法  基本的な CSS の例.
視覚表現--CSSでwebページを自由にデザイン
情報処理 第8回.
2017/3/2 情報処理 第8回.
第11回JavaScriptゼミ セクション8-2 発表者 直江 宗紀.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
情報処理 第7回.
【2.12】文字装飾機能内部設計書
第12回(1月13日) 文書処理 久野禎子.
2017/3/7 情報処理 第8回.
東広島Event Maps ~サイトデザイン~
HTMLの記述と WWWにおける情報公開 遠藤
売れるためのWEBサイト構築.
CSSを利用したWebデザイン 理工学部 情報学科 3回生 喜多 亮輔.
HTML版パスファインダーの作成 CSSの利用 hp. infoseek. co. jp/cje10
ホームページの作り方.
プレゼンテーション用ソフトウェア Impress
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
見た目を定義する技術 CSS(スタイルシート).
今回学ぶこと ちょっとした復習 基本的な編集機能 一歩進んだ編集機能 画面のロック ウィンドウを並べる フォントについて 文字列の切り貼り
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (1日目) 担当:清水,田代 副手:浦辺,石井.
WebDesigner StartGUide
WebDesigner StartGUide
サイト運営者へむけて、CMS管理画面をつかって サイト運営していく方法を紹介します。
スタイルシート C306 情報発信の基礎【第6回】.
XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕.
Ver HTML概論 Inf. Math. 5.
Ⓒ2008 E.Moriya HTML概論 2018/9/17 Inf.Math.III.
イベント参加者登録用DB.
オープンソースソフトウェア osCommerceにおけるデザイン変更
介護支援システム SYLVIE 頼れる介護のセキュリティ 開発メンバー リーダー 岩本 和磨
※現在辻はAmazonの「この本を買った人はこの本も買っています」
第3章 第2節 ネットワークを活用した 情報の収集・発信(3) 5 表現方法の工夫
プログラミング 設計資料 メンバー:.
介護支援システム SYLVIE 頼れる介護のセキュリティ 開発メンバー リーダー 岩本 和磨
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
情報処理 第8回.
独習XML 第2章 XML文書の構成要素 2.1 XMLの文字と文字列 2.2 コメント
情報スキル活用 第7週 制作技術-1 情報の記述と画面のデザイン.
ネットショップデザイン入門Ⅰ・ⅡSEO 2013/12/18 Webデザイン入門 SEOの基本.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
情報スキル活用 第8週 制作技術-2 画面の分割.
明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11.
第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
テキスト 1 行目 テキスト 2 行目 テキスト 3 行目 (初級) 森の背景の上にフェード インするアニメーション化されたキャプション
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
Htmlの基本.
情報コミュニケーション入門b 第11回 Web入門(2)
HP作成 そろそろまとめ編 担当:TAの人.
コンピュータ プレゼンテーション.
画像を貼る 目標:このようなページを作る.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
Smart Graphic Layout トピック ステートメント 赤色の背景に画像を含む SmartArt グラフィック (中級)
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
情報処理 第13回.
で学ぶ はじめてのプログラミング.
スライドの終わりまでテキストが繰り返しスクロールされます • スライドの終わりまでテキストが繰り返しスクロールされます •
情報スキル活用 第6週 制作技術-1 情報の記述と画面のデザイン.
キャッチコピー Works Blog Profile Works Blog Profile TOPページ 実績 ブログ 人物
Presentation transcript:

第5章 スタイルシートによる レイアウトデザイン 5.1 セレクタの種類 5.2 スタイルシートを用いたレイアウト手順 5.3 floatプロパティ 5.4 positionプロパティ 5.5 positionプロパティ

5.1 セレクタの種類 5.1.1 IDセレクタ 5.1.2 セレクタの名前の付け方 5.1.3 クラスセレクタ 5.1.4 子孫セレクタ 5.1.5 擬似クラス

5.1.1 IDセレクタ (1)IDセレクタとは ■ HTML文書とスタイルシートを接続するための オリジナルのシンボルを定義 スタイルシートファイル HTML文書 #content{ <div id=“content”> } </div>

(2)使用例 ■ 指定前 <div id="content"> <h3>ひよの山</h3> ■ 指定前 <div id="content"> <h3>ひよの山</h3> <p>日本相撲協会のWeb上で物語が紹介されている 「ハッケヨイ!せきトリくん」の主人公。 日本相撲協会の公式キャラクタ。</p> </div>

使用例 ■ 指定後 <div id="content"> <h3>ひよの山</h3> ■ 指定後 <div id="content"> <h3>ひよの山</h3> <p>日本相撲協会のWeb上で物語が紹介されている 「ハッケヨイ!せきトリくん」の主人公。 日本相撲協会の公式キャラクタ。</p> </div> #content{ margin: 20px; padding: 30px; background-color: #FFFF00; }

5.1.2 セレクタの名前の付け方 ■ 自由だが,スタイルや書式に関する名前よりも,HTMLの内容や文書の構造に関する名前にしよう!! 【よく使われるIDセレクタ名】 IDセレクタ名 用途 wrapper body要素の中身丸ごとを指すとき。 containerという名前も用いられる。 header HTML上部の部分 content コンテンツ部分 footer HTML文書の最後の部分 nav ナビゲーションをデザインする場合。 menuと記述されることも多い。 sidebar コンテンツ部分に付属した要素。 subと名付けられることも多い。

5.1.3 クラスセレクタ (1)指定方法 ■ 複数個所を同一のスタイルにするときに使用する。 ■ 複数個所を同一のスタイルにするときに使用する。 クラスの呼び出しのときはドット(.)を先頭に付ける。 スタイルシートファイル HTML文書 .style1 { <div id=“style1”> } </div>

■ 例題とするHTML 【<h3 class="style1">行列式の解法(直接法)</h3> <p>直接法には,以下のような方法があります。</p> <ol><li>ガウス(Gauss)の消去法</li> <li>ガウス・ジョルダン(Gauss-Jordan)法(別名:掃出し法)</li> <li>LU分解法</li> </ol> <p class="style1">--ガウスってどんな人?--</p> <p style="float:right; margin-right: 10px;"> <img src=”img001.jpg" alt="ガウスの写真"> <p class="style2"> 連立方程式の解法でよく出てくるJohann Carl Friedrich Gaussは, 煉瓦職人の子としてドイツのブラウンシュバイクに生まれました。 幼い頃から明敏な子で,教師から1から100までの 数字すべてを足す課題が出されたとき </p> <blockquote> <p class="style1">1+100=101,99+2=101,98+3=101,…</p> </blockquote> となるから,答えは「101×50 = 5050だ」と即座に解答したそうです。 14歳のとき領主の援助でゲッチンゲン大学に入学し, 電気や数学の分野で主に活躍しました。 -------(後略)--------------

(2)例題 ■ 複数個所を同一のスタイルにするときに使用する。 クラスの呼び出しのときはドット(.)を先頭に付ける。 ■ 複数個所を同一のスタイルにするときに使用する。 クラスの呼び出しのときはドット(.)を先頭に付ける。 body { font-size: 80%; color: green; } .style1 { color: red;} .style2 { color: blue;} ol li { list-style-type:   lower-roman;}

(3) クラス名の名前の付け方 ■ 自由だが,スタイルや書式に関する名前よりも,HTMLの内容や文書の構造に関する名前にしよう!! 【クラス名はマチマチ。しかし参考例】 クラス名 用途 block 文書構造上,ひとまとまりにしたいとき article 記事全体をひとまとまりにしたいとき list 同じリストをデザインするとき link 同じ種類のリンクをデザインするとき section 見出しとその見出しに含まれる要素を ひとまとまりにしたいとき date 日付の文字列をデザインしたいとき style 同一のスタイルをまとめたいとき

<h3 class=“style1”>h3要素</h3> (4)要素を特定してスタイルを指定 ■ IDセレクタやクラスセレクタは,そのスタイルを指定したい 要素を特定することができる。 【HTML】 <h3 class=“style1”>h3要素</h3> <p class=“style1”>p要素</p> 【CSS】 h3.style1{ color: red; }

(5)セレクタをグループ化する div, .article { line-height: 120%; ■ セレクタをカンマ(,)で区切ることで,複数のセレクタに同じスタイルを割り当てることができる。 div, .article { line-height: 120%; border 1px solid #7777CC; }

5.1.4 子孫セレクタ (1)指定方法 ■ 複数個所を同一のスタイルにするときに使用する。 ■ 複数個所を同一のスタイルにするときに使用する。 クラスの呼び出しのときはドット(.)を先頭に付ける。 スタイルシートファイル HTML文書 <div id=“content”> #contents p { <p> </p> 半角スペース } </div>

(2)指定例 ■ contentのp要素を特定する例 <div id="content"> <p>青森の「味噌カレー牛乳ラーメン」ってちょっと不思議な味・・・。青森行ったら,食べてみる価値あるかも</p></div> <div id="footer"> <p>Copyright © 2010 Yutaka Shirai All Right Reserved.</p> #content p { background: #FFFF00; padding : 20px; }

5.1.5 擬似セレクタ (1)指定方法 ■ a要素に擬似クラスを設定することで,リンクの色を変えたり,背景色を変えたり,アンダーラインを引いたりする。 擬似クラス    説  明 link リンク先をまだ訪問していないときのデザイン visited 一度でもリンク先を訪問したときのデザイン hover マウスカーソルがa要素の領域内にあるときのデザイン active ブラウザがアクセスしているときのデザイン (必ず上記の順に指定する)

(2)指定例 ■ a要素に擬似クラスを設定することで,リンクの色を変えたり,背景色を変えたり,アンダーラインを引いたりする。 <p><a href="050103.html"> 味噌カレー牛乳ラーメン</a></p> a { text-decoration: none;} a:link { color: #000077;} a:visited{ color: #007700;} a:active,a:hover{ color: #FF0000; text-decoration: underline; }

(3)もうひとつの例 ■アンダーラインがないとリンクがないと思われてしまう。 a:link { color: #000077;} <p>ゆとり教育の学力観</p> <ul> <li><a href="#link1">自ら考える力</a></li> <li><a href="#link1">自ら判断する力</a></li> <li><a href="#link1">自ら表現する力</a></li> </ul> a:link { color: #000077;} a:visited{ color: #007700;} a:active,a:hover{ color: #FF0000; background-color: #FFFF00; } リンクが開かれたら色が変わっていることに注意

5.2スタイルシートを用いた レイアウト手順 5.2.1 手順概要 5.2.2 ブロック分け 5.2.3 idセレクタの決定 5.2.4 スタイルの選定 5.2.5 構造化するブロック要素を決定 5.2.6 スタイルの指定,クラス指定

5.2.1 手順概要 ■できるだけ,以下のように段階を追って記述しよう。 ① ブロック分け ② idセレクタの決定 ③ スタイルの選定 ④ 構造化するブロック要素を決定 ⑤ スタイルの指定,クラス指定 ■カスケーディング・スタイルシート(Cascading Style Sheets)の名前のとおり「段階的に連結(cascade)」させながら決めていくこと。

5.2.2 ブロック分け ■記事ができたら,ページに載せる情報をどのようにまとめるかを考える。 ■ひとつのまとまりをボックスとして,どのように配置するかを考える。

5.2.3 idセレクタの決定 ■決定したブロックに対してidセレクタ名を決める。 ■複数個所を同じような書式にする場合,クラスの利用を考える。 ■ヘッダ,フッタ,コンテンツ,ナビゲーションなど決まりきったブロックには,普通に使われる名前を使おう。

5.2.4 スタイルの選定 ■ レイアウトを決めるスタイルを選択する。 ■ レイアウトを決めるスタイルを選択する。 ■ 位置決めは,floatプロパティとpositionプロパティを使う。 ■ 表現したいレイアウトに応じて,臨機応変に位置決めの方法を選択する。 ■ マージンや枠線などは,ピクセル単位で大きさを決めておく。

5.2.5 構造化するブロック要素を決定 ■ 文章構造を明示するタグ,ナビゲーションを作るリストタグ,表組みのためのテーブルタグ等を決める。 ■ 文章構造を明示するタグ,ナビゲーションを作るリストタグ,表組みのためのテーブルタグ等を決める。 ■ ブロックをどのようにマークアップするかを考える。

5.2.6 各要素のスタイル指定,クラス指定 ■ ブロック内の情報に対して詳細なスタイルを決める。 ■ ブロック内の情報に対して詳細なスタイルを決める。 ■ なるべく見やすいスタイルにすることに気をつける。 ■ 記事本文等のフォントサイズ等については,ユーザが決められるように相対的に指定することに心がける。

5.3 floatプロパティ 5.3.1 ボックスによるレイアウト 5.3.2 ID属性の記述 5.3.3 flatプロパティで段組レイアウト 5.3.4 ナビゲーションスタイル 5.3.5 displayプロパティを用いたリンク

5.3.1 ボックスによるレイアウト ■スタイルシートを使う場合,コンテンツをそのものをひとまとまりの四角い箱(ボックス)として扱う。 wrapper wrapper header header nav nav content content col1 col1 col2 col2 footer footer

5.3.2 ID属性の記述 ■HTMLにID属性を挿入します。 <div id="wrapper"> <div id="header"> <h3><img src=”img001.jpg" alt="ガウスの写真"> <p>--ガウスってどんな人?--<p></h3> </div> <div id="nav"> <p>menu <ul> <li><a href="#Gauss">ガウス</a></li> <li><a href="#Newton">ニュートン</a></li> <li><a href="#Jacobi">ヤコビ</a></li> </ul> </p> <div id="content"> <div id=”col1"><p> 連立方程式の解法でよく出てくるJohann Carl Friedrich Gaussは, 煉瓦職人の子としてドイツのブラウンシュバイクに生まれました。 幼い頃から明敏な子で,教師から1から100までの 数字すべてを足す課題が出されたとき

ID属性の記述(その2) ■(前頁から続く) <blockquote>   1+100=101,99+2=101,98+3=101,… </blockquote> となるから,答えは「101×50 = 5050だ」と即座に解答したそうです。 14歳のとき領主の援助でゲッチンゲン大学に入学し, 電気や数学の分野で主に活躍しました。 </p></div> <div id="col2"><p> 1801年には“数論研究”を発刊しました。 1829年には,ガウスの線束定理を発表し, 電気力線、磁力線の発源点からの総湧出量を 表面積分により求める式を導き, 1832年には,磁界の絶対測定法をあみ出し, 電気史にも多大な貢献をしています。 </div> <div id="footer"> <p>Copyright &copy Yutaka Shirai All Rights Reserved.</p>

5.3.3 floatプロパティで段組レイアウト ■navとcontentを段組で body  { font-size: 80%; width:678px;} #header { color: red; border-bottom: 1px solid #777777;} #nav  { background-color:#FFFF77; width:150px; float: left;} #content{ color: blue; width:500px; float: right; padding-left: 25px;} #footer { clear:both; border-top: 1px solid #777777;} }

5.3.4 ナビゲーションスタイル (1)横に並ぶナビゲーションスタイル ■横に並ぶナビゲーションのスタイル #nav li { float:left;width:118px;border:1px solid black; margin-right:5px; margin-left:0px; font-size:12px; text-align:center; background-color:#CCCCCC; }

(2)ナビゲーションスタイルと段組の組み合わせ ■col1とcol2を横に並ばせる body{ width:550px;} #header { color: red; border-bottom: 1px solid #777777;} #nav li{ float:left;width:118px;border:1px solid black; margin-right:5px; margin-left:0px; font-size:12px; text-align:center; background-color:#CCCCCC; } #content{clear: both; border-top: 1px solid #777777;} #col1{ width:250px; float:left;} #col2{ width:250px; float:right;} #footer{ clear:both; border-top: 1px solid #777777;

(3)全体表示 #col1と#col2が 左右に並ぶ。

5.3.5 displayプロパティを使ったリンク ■displayプロパティを使って,ブロックレベルに変換 #nav li { float:left;width:118px;border:1px solid black;  margin-right:5px; margin-left:0px; text-align:center;  background-color:#CCCCCC; text-decoration:none; } #nav a{display: block; width:118px;height:20px;color:black;    text-decoration:none;} #nav a:hover{ display: block; color: #FFFFCC;        background-color:#FF00FF; text-decoration:none;

5.4 positionプロパティ 5.4.1 positionプロパティとは 5.4.2 positionプロパティを使ったレイアウト 5.4.3 スクロールバーを使う 5.4.4 ボックスの重ね順

5.4.1 positionプロパティとは (1)プロパティの種類 ■ウィンドウ内のボックスの表示位置を詳細にレイアウトするためのプロパティ プロパティ 値 position 配置のルールを指定するキーワード top 基点となる位置上端から,ボックス上端までの距離 left 基点となる位置左端から,ボックス左端までの距離 right 基点となる位置右端から,ボックス右端までの距離 bottom 基点となる位置下端から,ボックス下端までの距離

(2)positionプロパティで指定するキーワード ■ 4種類のキーワードを使って指定する プロパティ 値 absolute 基点の位置からの絶対位置(基点が指定されていなければ表示領域の左上隅) relative positionが指定されていなければ配置される位置からの図る。 fixed absoluteと同じだがスクロールしても配置位置を固定 static positionが指定されていない場合と同じ位置に配置

(3)基本とするHTML文書とスタイルシート 【指定なし】 HTML <div id="box1"> </div> <div id="box2"> </div> CSS #box1 { background-color: #CCCCCC; width: 250px; border: 1px solid black; padding: 20px; } #box2 { background-color: #FFCCFF;

absolute #box2のみのcss #box2 { position: absolute; top: 50px; left:100px; background-color: #FFCCFF; width: 250px; border: 1px solid black; padding: 20px; } 100px 50px

relative #box2のみのcss #box2 { position: relative; top: 50px; left:100px; background-color: #FFCCFF; width: 250px; border: 1px solid black; padding: 20px; } 100px 50px

fixed #box1, boc2のcss #box1 { background-color: #CCCCCC; width: 250px; height: 500px; border: 1px solid black; padding: 20px; } #box2 { position: fixed; top: 50px; left:100px; background-color: #FFCCFF; Absoluteと同じだが, スクロールしても box2の位置が変わらない

5.4.1 positionプロパティを使ったレイアウト (1)HTMLでIDを指定する HTML <div id="wrapper"> <div id="dragon"> <img src="image/DragonCurve.jpg” alt="ドラゴンカーブ" width=100 height=80> </div> <div id="julia"><img src="image/julia.jpg” alt="充填ジュリア集合" width=100 height=100> </div> <div id="mandelbro"><img src="image/mandelbro.jpg” alt="マンデルブロー集合" width=100 height=100></div> <div id="mengar"><img src="image/Mengar.jpg” alt="メンガーのスポンジ" width=100 height=100></div> </div>

(2)スタイルシートで正確に位置を指定する CSS #wrapper { width:500; margin: 20px;} #dragon { position: absolute; top: 20px; left: 40px;} #julia { position: absolute; top: 10px; left:160px;} #mandelbro { position: absolute; top: 120px; left: 40px;} #mengar { position: absolute; top: 120px; left:160px;}

5.4.3 スクロールバーを使う (1)指定方法 ■overflowプロパティを使うとスクロールバー付きのボックスを作成することができる。  値 説明 visible オーパフローしたときボックスからはみ出して表示される。ブラウザによってはボックス自体も大きくなる(デフォルト) scroll スクロールバーが表示されてボックス内に収められる。 Hiden はみ出た部分は見えなくなる。

(1)HTML <div id="wrapper"> <div id="header"><p>--ガウスってどんな人?--</p></h3></div> <div id="content"><p> 連立方程式の解法でよく出てくるJohann Carl Friedrich Gaussは, 煉瓦職人の子としてドイツのブラウンシュバイクに生まれました。 幼い頃から明敏な子で,教師から1から100までの 数字すべてを足す課題が出されたとき <blockquote>1+100=101,99+2=101,98+3=101,…</blockquote> となるから,答えは「101×50 = 5050だ」と即座に解答したそうです。 14歳のとき領主の援助でゲッチンゲン大学に入学し, 電気や数学の分野で主に活躍しました。 </p><p> 1801年には“数論研究”を発刊しました。1829年には,ガウスの線束定理を発表し, 電気力線、磁力線の発源点からの総湧出量を表面積分により求める式を導き, 1832年には,磁界の絶対測定法をあみ出し,電気史にも多大な貢献をしています。 </p></div></div> <div id="footer"> <p>Copyright &copy Yutaka Shirai All Rights Reserved.</p> </div>

(2)スタイルシートと表示結果 #wrapper { width : 500px; margin : 20px; } #content { height : 200px; padding : 10px; border : 1px solid black; overflow: scroll;

5.4.4 ボックスの重ね順 z-indexを使う ■値が大きいほど前に表示される #wrapper {width:500; margin: 20px;} #dragon { position: absolute; top: 20px; left: 40px; z-index: 1;} #julia { position: absolute; top: 80px; left:100px; z-index: 2;} #mandelbro { position: absolute; top: 160px; left:150px; z-index: 3;} #mengar { position: absolute; top: 240px; left:200px; z-index: 4;}