レジュメ

基礎セミナー
インターネットを使って情報発信しよう
第9回さまざまなサービスの活用
1
中間課題
• 最終課題で作成するWebページに関して，
どのような内容の特集ページにするのかを報告
• 期限：6月17日（第9回）の授業開始前まで
• 電子メールで提出すること
• 宛先：満上 [email protected]
• 件名：基礎セミナ課題＜自分の名前＞
2
【復習】CSS (Cascading Style Sheets)
• Webページのスタイルを指定するための言語
CSS
3
【復習】 CSS文法基本 (1/2)
• 下記の文法が基本
セレクタ { プロパティ: 値; }
• 複数のセレクタに同じ設定を行う
例
h1 {
color: red;
}
セレクタ１, セレクタ2 { プロパティ: 値; }
• 複数のプロパティを設定する
セレクタ {
プロパティ1: 値1;
プロパティ2: 値2;
}
4
【復習】 CSS文法基本 (2/2)
• CSSを使うHTML文章では，下記のように用い
るCSS文章を指定する
<link rel=“stylesheet” type=“text/css” href=“CSS文章名">
• 上記のタグを<head>タグの中に書く
5
アクセスカウンター
• ホームページを見た人の累計を
表示する機能
• これまでに学んだものはすべて
アクセス
カウンター
静的なページに関するものなのだが，
アクセスカウンターは動的な情報
→ CGI (Common Gateway Interface) の知識が必要
• プログラミングの知識が必要
• 外部サービスを利用するのが簡単
• 例）無料アクセスカウンター http://www.rays-counter.com/
• 好きなデザインを選択して「カウンター作成」を押した後に表示される
「アクセスカウンターのタグ」を自分のページにコピー＆ペーストする
6
動画の埋め込み
• YouTubeを使う
• Googleのサービスの一つ
• Googleカレンダー，Googleマップと同様の手順で
埋め込むことができる
• 【参考】
https://support.google.com/youtube/answer/171780?hl=ja
7
動画の埋め込み
(1)動画のアップロード
• YouTubeページ左上のメニューから「マイチャンネル」を選択
クリック
動画ファイルを
ドラッグ＆ドロップ
8
動画の埋め込み
(2)動画の埋め込みコードの取得
左のバーの処理が
済んだら，この
「公開」をクリック
これをコピー＆ペーストして
自分のページに貼り付ける
9
動画の埋め込み
(3)既存の動画の埋め込みコードの取得
「共有」をクリック
これをコピー＆ペーストして
自分のページに貼り付ける
10
SNSとの連携
• Twitter
https://dev.twitter.com/ja/web/embedded-timelines
• Facebook
https://developers.facebook.com/docs/plugins?locale=ja_JP
• LINE
https://media.line.me/howto/ja/
• いずれもGoogleサービスと同様に生成されたタグを
自分のページに貼り付けるだけです
11
今後の予定
日付
2016/06/17 (金)
2016/06/24 (金)
2016/07/01 (金)
2016/07/08 (金)
2016/07/15 (金)
2016/07/22 (金)
2016/07/29 (金)
授業回内容
第 9回さまざまなサービスの活用
第10回
第11回
第12回ホームページ作成実習
第13回
第14回
第15回発表会
12

Download Report