スタイルシート C306 情報発信の基礎【第6回】.

Slides:



Advertisements
Similar presentations
1 第 3 章 第 2 節 ネットワークを活用した 情報の収集・発信 5 さまざまな表現方法の工夫 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開 情報 C プレゼン用資料(座学 34 ) 担当 早苗雅史.
Advertisements

WEB デザイン基礎実 験 担当:清水,田代 副手:浦辺,石井 ( 1 日目) NC-2 情報通信基礎実験.
コンピュータ基礎実習 ( 上級 ) 第九回 スタイルシート 清水淳紀. はじめに  今回の内容  スタイルシート (CSS) とは何か  CSS の役割  CSS の利点  スタイルシートの基本  CSS の記入方法  基本的な CSS の例.
視覚表現--CSSでwebページを自由にデザイン
情報処理 第8回.
2017/3/2 情報処理 第8回.
第11回JavaScriptゼミ セクション8-2 発表者 直江 宗紀.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
情報処理 第7回.
情報処理入門A・B 第7回 ワープロソフト入門(2)
HTMLの基礎知識.
【2.12】文字装飾機能内部設計書
第12回(1月13日) 文書処理 久野禎子.
タグの直接入力によるウェブページの制作 練習課題1~3
2017/3/7 情報処理 第8回.
CEC公開授業 Webサイト制作にチャレンジ! 2007年11月20日 於:東京都立板橋有徳高校 学校インターネット教育推進協会.
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
東広島Event Maps ~サイトデザイン~
HTMLの記述と WWWにおける情報公開 遠藤
売れるためのWEBサイト構築.
CSSを利用したWebデザイン 理工学部 情報学科 3回生 喜多 亮輔.
Microsoft Office 2010 クイックガイド ~PowerPoint編~
HTML版パスファインダーの作成 CSSの利用 hp. infoseek. co. jp/cje10
ホームページの作り方.
Microsoft Office クイックガイド ~PowerPoint 2013~
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
第1回 JavaScriptゼミ ・ scriptエレメント ・ 記述における諸注意 ・ 古いブラウザへの対応方法
見た目を定義する技術 CSS(スタイルシート).
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (1日目) 担当:清水,田代 副手:浦辺,石井.
WebDesigner StartGUide
ネットワーク de 情報発信 - コンテンツ作りのはじめの一歩 - 城西国際大学薬学部 二村 典行.
第3章 第2節 ネットワークを活用した情報の収集・発信(4) 情報Cプレゼン用資料(座学35) 担当 早苗雅史
XMLゼミ 5.1 XML文書と表示 5.2 CSS 5.3 XMLとXSL 高橋 辰裕.
イベント参加者登録用DB.
コンピュータ プレゼンテーション.
オープンソースソフトウェア osCommerceにおけるデザイン変更
※現在辻はAmazonの「この本を買った人はこの本も買っています」
第3章 第2節 ネットワークを活用した 情報の収集・発信(3) 5 表現方法の工夫
プログラミング 設計資料 メンバー:.
経営工学基礎演習a PowerPointの利用.
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報処理 第8回.
情報スキル活用 第7週 制作技術-1 情報の記述と画面のデザイン.
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
スマホ追従バナー スクロールしてもついてくる! スマートフォンでの回遊性アーップ★.
第3章 第2節 ネットワークを活用した 情報の収集・発信(2) 4 文書の構造と表現
情報スキル活用 第8週 制作技術-2 画面の分割.
明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
T2V技術 Web製作ラボ 5/9, 2012 hayashiLabo 11.
第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
PowerPoint 2007 のご紹介 新しい機能について.
Microsoft Office クイックガイド ~PowerPoint 2013~
XMLゼミ 1.3 XML文書の表示 1.4 XMLの役割 1.5 XMLとプログラミング M2 正木 裕一.
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
Htmlの基本.
HP作成 そろそろまとめ編 担当:TAの人.
コンピュータ プレゼンテーション.
画像を貼る 目標:このようなページを作る.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
で学ぶ はじめてのプログラミング.
情報スキル活用 第6週 制作技術-1 情報の記述と画面のデザイン.
第5章 スタイルシートによる レイアウトデザイン
Microsoft Office 2010 クイックガイド ~PowerPoint編~
キャッチコピー Works Blog Profile Works Blog Profile TOPページ 実績 ブログ 人物
Presentation transcript:

スタイルシート C306 情報発信の基礎【第6回】

みんなが自分と同じ条件でWebページを見るとは限らない 表現方法の工夫 スタイルの統一 要素によって異なるスタイル 表現方法の工夫 部分的に文字色を変える 下線をつけ重要な部分を強調する 文字の大きさや色使い 画像のサイズや表示範囲に配慮する みんなが自分と同じ条件でWebページを見るとは限らない

HTMLとスタイルシート スタイルシート 文字の大きさや色などをまとめて指定する方法 CSS(Cascading Style Sheet)

スタイルシートの記述 内部スタイルシート headの中に<style>・・・</style>で指定 外部スタイルシート <LINK rel="stylesheet" href="style01.css" type="text/css">

スタイルシートの表現 スタイルシートの表現方法     セレクタ { 種別 : 指定値 ; } 何に対してスタイルを設定できるか  タグ,クラス,ID

スタイルシートの利点 凝ったレイアウトの作成 スタイルシートを変えるだけで見栄えを変化 共通のスタイルシートを使った,複数HTML ファイルに統一したデザインの適用

スタイルシート① body{ background-color : #baf0fe; } h1{ color : #0000ff; padding : 5px; background-color : #4de88e; border : solid #9888d7 5px; 背景色 内のり幅 太線枠の色と幅

スタイルシート② h2{ color : #cc00ff; border-bottom : double #ffc0c0 5px; } p{ margin-left : 30px; color : #8000ff; 二重線枠の色と幅 右マージン幅

スタイルシート③ img{ margin-right : 40px; float : right; } 左寄せ