Webデザインの基礎01

Size: px

Start display at page:

Download "Webデザインの基礎01"

ありさおおばま
7 years ago
Views:

1 Webデザインと広告広報電子商取引 &ビジネス情報管理 1.Web 社会を知るウェブで私達の生活はどう変わったのか? インターンネットの検索機能を活用した情報収集ソーシャルネットワークによるユーザ同士の情報共有価格ドットコム, 食べログ社会全体の情報の流れが, 個から個へ, 個から多へと交差している Webデザインをするにあたり, 意識をすること情報発信者として意識することは? Webページ作成の基本言語文章構造 HTML 視覚表現スタイルシート(CSSなど) 機能拡張スクリプト(JavaScriptなど) スタイルシート文書の見栄えに関する情報 ( 字体や文字の大きさ色行間の幅修飾など)をひとまとめにしたデータやファイルなどのことスクリプトソースコードを記述したら即座に実行できるようなプログラムのこと HTML Hyper Text Markup Language タグというマーク( 命令 )を使って文書の構造を指定文字の大きさや色の変化画像を表示等ができる 1

タグ <タグ名 >の記号で囲まれた半角の英数字のことでこのタグを使ってWebページは作られている <HTML>~</HTML> HTML 文書の始めに<HTML>タグを記入し HTML 文書の終わりに</HTML> タグを記入して HTML 文書全体をこのタグで囲みますブラウザに把握させるために必ず記

してタイトルをつけますここで付けたタイトルはブラウザのタイトルバーに表示されるほか履歴に残ったりお気に入りに登録するときのタイトルとなります <BODY>~< BODY> このタグの範囲内に記入された内容がブラウザ( 画面上に)に表示されますこの中にいろいろなタグを使いながら本文を記入していきます

2 タグ <タグ名 >の記号で囲まれた半角の英数字のことでこのタグを使ってWebページは作られている <HTML>~</HTML> HTML 文書の始めに<HTML>タグを記入し HTML 文書の終わりに</HTML> タグを記入して HTML 文書全体をこのタグで囲みますブラウザに把握させるために必ず記入します <HEAD>~</HEAD> <HEAD>~</HEAD>を記入してこの中にヘッダー情報を記入しますここには Webページを作成すための準備をする場基本的には<TITLE>タグ以外の情報はブラウザ上には表示されません <TITLE>~</TITLE> <HEAD>~< HEAD>の中に記入してタイトルをつけますここで付けたタイトルはブラウザのタイトルバーに表示されるほか履歴に残ったりお気に入りに登録するときのタイトルとなります <BODY>~< BODY> このタグの範囲内に記入された内容がブラウザ( 画面上に)に表示されますこの中にいろいろなタグを使いながら本文を記入していきます画像を表示する<IMG>タグやリンクを貼る<A>タグなどをこの中に記入し表示させたい内容を作っていきます <b> ~ </b> 文字を太字にするタグ <i> ~ </i> 文字を斜体にするタグ <s> ~ </s> 文字に取り消し線を引くタグ <u> ~ </u> 文字に下線を引くタグ <br> 改行を行なうタグ <hr> 水平線を引く例 :<hr size="10" color="#0000ff" noshade> <hr width="90%" color="#ff0000" align="center"> <html> <head> HTML 練習その1 <title> HTML 練習 </title> </head> <body> <h1> 釧路の観光 </h1> <h2> 釧路という異国を旅する</h2> </body> </html> 保存方法ファイル名に注意する! 拡張子を.html にする 2

3 <h1> 釧路の観光 </h1> <h2> 釧路という異国を旅する</h2> <p> 北海道の東南部に位置する釧路には広大な釧路湿原がありますその湿原により独特の風土文化が培われてきたように感じますどこか遠くの国を連想させてくれる釧路は日本の中の異国かもしれません </p> <p> 釧路は夏は涼しく空気も水も海産物農産物も安全安心です </p> <br /> <h2> 釧路食べる観る遊ぶ</h2> <p> 釧路には,4 大グルメがあります </p> 色についてディスプレイで見ている色と, 実際に印刷した際の色が若干違うことがあるそれはなぜか? </body> </html> ディスプレイは, 光の三原色を用いる印刷は色の三原色を用いる光と色の基準となる三原色がことなるため,ディスプレイと印刷したものが異なることがある光の三原色を混ぜると白色の三原色を混ぜると黒プリンタには CMYのほかに黒があるのはなぜか CMYだけでは純粋な黒ができないため別に黒を用意している全体の配色の決定 <body bgcolor="" text="" link="" alink="" vlink=""> </body> 3

4 HTMLの色について色の数値は, 16 進数を用いる ,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F # R G B #000000= 黒, #FFFFFF= 白, #FF0000= 赤 #00FF00= 緑, #0000FF= 青 <font > ~ </font> 書式を設定するタグ例 : <font size= 5"> ~ </font> <font color="#000000"> ~ </font> size="サイズ" サイズのところに1~7を入れて指定します color="#000000" 色は,6 桁の16 進数で指定します 2.ソーシャルメディアを知るソーシャルメディアとは誰もが参加できるスケーラブルな情報発信技術を用いて, 社会的インタラクションを通じて広がっていくように設計されたメディアスケーラブルリソースの量に比例して全体の処理能力が増す SNSの目的ソーシャルネットワーキングサービスの主目的は, 人と人とのコミュニケーションにある友人知人間のコミュニケーションを促進する手段や場, あるいは趣味や嗜好, 居住地域, 出身校, 友人の友人といった自身と直接関係のない他人との繋がりを通じて新たな人間関係を構築する場を提供している SNS 上では, 企業とユーザは対等の立場にある代表的なソーシャルメディア Facebook Google+ LINE Instagram Vine Twitter Pinterest Snapchat 4

5 SNSによるビジネスの広がり Webの標準化技術 SNSを活用して個人やグループの好みに合わせた広告配信など関連ビジネスが広がっている例 :FacebookをCRM 施策に展開するソーシャルリスニングツール emsocial 1Webページの作成で使われる技術 Webの標準化技術は, W3C(ウエブ技術の標準化を推進する組織 ) によって決められている HTML HyperText Markup Languageは,ウェブページを作成するために開発された言語 W3Cによって標準化が行われており, 大半のWebブラウザは標準で HTML 文書の解釈表示が行える CSS Cascading Style Sheet(カスケーディングスタイルシート)の略で,スタイルシート言語の1つ Web ページのデザインやレイアウトを定義するもの Java プログラミング言語およびコンピューティングプラットフォームユーティリティ,ゲーム,ビジネスアプリケーションなど, 最先端のプログラムの基礎となっている PHP Hypertext Preprocessorは,Webページを記述することに特化したサーバーサイドスクリプト言語 Web 上で動く掲示板やチャットなどを作成するのに便利なプログラム言語 Perl Common Gateway Interface の略で,WWW サーバの中で外部プログラムを実行するための仕組み Flash 声や動画,ベクターグラフィックスのアニメーションを組み合わせてWebコンテンツを作成するソフトまた,それによって作成されたコンテンツ < 箇条書きを設定するタグ> <ul> ~ </ul> 番号の無いリストを作るためのタグ <li> ~ </li> リストの項目それぞれの頭につけるタグこれが無いと次の記号がつきません例 :<ul> <li> 私は </li> <li>あなたは </li> </ul> 5

6 <ol> ~ </ol> 番号つきのリストを作るためのタグ <li> ~ </li> リストの項目それぞれの頭につけるタグですこれが無いと次の数字がつきません例 :<ol> <li> 私は </li> <li>あなたは </li> </ol> <h2> 釧路食べる観る遊ぶ</h2> <p> 釧路には,4 大グルメがあります </p> <ul> <li> 釧路ラーメン</li> <li> 釧路の蕎麦 </li> <li> 炉端焼き</li> <li> 寿司さんま</li> </ul> <p> 釧路人気ランキング</p> <ol> <li> 勝手丼 </li> <li>ザンギ</li> <li> 地酒 </li> </ol> <br /> <HR size="3" color="red" width="80%" align="center"> <MARQUEE direction= left behavior= scroll > 美味しい釧路味三昧 </MARQUEE> </body> </html> 画像の挿入画像名は, 拡張子まで入力するファイル名は, 半角英数字にするファイルサイズを小さくおさえるリサイズするソフトウエア等があるので活用する Webページで使用できる画像ファイル jpg gif png 画像の挿入のタグ <img src="img/kushiro01.jpg width="320" height="240" alt="kushiro01"> 画像の場所幅高さ表示されない場合の文字列 <div align="center">センターに表示します</div> 位置を指定する align=" " アラインは水平方向 valign=" " は垂直方向の指定を行うブイアライン 6

7 背景に画像! <background = 表示したい画像の名前. 拡張子 > 背景に画像を表示する <br /> <HR size="3" color="red" width="80%" align="center"> <MARQUEE direction="left" behavior="scroll"> 美味しい釧路味三昧 </MARQUEE> <br /> <HR size="3" color="red" width="80%" align="center"> <p> <div align="center" valign="middle"> 釧路市 <br /> <img src="img/kushiro01.jpg" width="320" height="240" alt="kushiro01"> </div> </p> 表作成列を増やす <table> タグを使用する行 <td> Table Data <tr> Table Row 列行を増やす列と行 7

8 CSSの基本 CSS (Cascading Style Sheets カスケーディングスタイルシート) ウェブページのスタイルを指定するための言語ワープロソフトなどで作成される文書も含めて文書のスタイルを指定する技術全般をスタイルシートという CSS 基本書式どこのどこのどうするセレクタ { プロパティ : 値 ; } 例 :h1{color : #FF0000 ;} CSSで,<h1>のフォントカラーを #FF00FFにするには,どのように記述するのか答えなさい < 解答群 > { } color h1 #FF00FF : ; CSSによる色表現書式 #FF0000 #F00 rgb(255,0,0) rgb(100%,0%,0%) 赤を表している 8

メディア(screen,print,handheld,tv) 次の1~4にあてはまるものを解答群から選び, 答えなさい <link 1 ="style.

9 外部 CSSのファイルへリンク <link href="style.css" rel="stylesheet" type="text/css" media= all /> href: 外部参照するCSSファイルパスを記述する rel/type: 外部参照するファイルの種類 media: 対象メディア(screen,print,handheld,tv) 次の1~4にあてはまるものを解答群から選び, 答えなさい <link 1 ="style.css" 2 ="stylesheet" 3 ="text/css" 4 = all /> < 解答群 > media rel href type この記述は HTML 内に記入する! フェイクアウト CSS 作成のボックスの最大幅と最小幅を指定するもの SIMについて SIMとは電話会社の通信回線を使い通話やデータ通信を行うのに必要なICカードのこと SIMロック SIMフリー端末 SIMロック端末 NTTドコモソフトバンク au の特定のSIMカードのみ使える端末 SIMロックフリー端末 SIMロックがかかっておらずどこの携帯電話会社のSIM カードでも利用できる端末 9

10 格安 SIMとは? MVNOとは MVNO( 仮想移動体通信事業者 Mobile Virtual Network Operator)という事業者が大手通信キャリアに比べて低価格で提供しているSIMカード携帯電話回線などの無線通信基盤を他の通信事業者から借り受け独自のサービスをくわえて提供する企業回線をまとめ借りしその範囲内でどれだけのユーザーにどの程度の容量と速度で通信させるかを調整することで成り立っているなぜ格安 SIMは安いのか? (1) 回線をまとめて借りている (2) 販売にかかわる様々なコストを削減 (3)データ通信量や通信速度を制限している月額料金が安くなるプランを柔軟に選べる 2 年縛りがない格安 SIMのメリット初期費用 (SIMカード代 ) 3,000 円 ( 税込 3,240 円 ) 110MB/ 日コース 1,600 円 ( 税込 1,728 円 ) 170MB/ 日コース 2,080 円 ( 税込 2,246.4 円 ) 3GB/ 月コース 1,800 円 ( 税込 1,944 円 ) 5GB/ 月コース 2,150 円 ( 税込 2,322 円 ) ナンバーポータビリティが可能速度は,150mbps 通信容量使用後は,200kbps 格安 SIMのデメリットキャリアメールとWebメールキャリア関連サービスができない(キャリアメールキャリア決済 ) キャリアによる端末価格の割引を受けられないテザリングを利用できないケースありデータ通信の制限が厳しい話料は20 円 ( 税抜 )/30 秒で基本的に無料通話分はない通信キャリアから提供されていたキャリアメールができなくなるといったアドレスで使用する携帯電話キャリアが提供するメールサービスのこと Webメール Googleが提供するGmail Yahooが提供するYahoo!メール MicroSoftが提供するOutlook.comなどインターネットに接続してWebメールサイトやアプリからアドレスとパスワードを設定すれば誰でも簡単に利用することができる 10

11 SIMフリー端末を用いて, 格安 SIMを使用する際のメリットやディメリットを述べ,どのように活用するべきか, 格安 SIMを提供する会社の営業担当になったつもりで述べなさいどこのSIMとプランがお薦めか? 11

Lecture/CompPracR2003/12th

Lecture/CompPracR2003/12th 2016 年 7 月 17 日コンピュータ演習 ( 再 ) 第 12 回 (1) Webページの作成 (1) Webページを作成する道具 (1) テキストエディタを使うメリットデメリット (2) HTML (2) HTMLとは (2) HTMLの書き方 (3) HTMLファイルの構造 (3) 空白と改行