Chapter5 step3 CSS を記述する (129 頁 ) [1] CSS フアイィル確認 HTML フアィル new.html に関連づけた CSS フアィル mystayle.css をクリックして開く [2] 項目名のスタイル (129 頁 ) 項目名に文字の色背景の色セルの中での

Size: px

Start display at page:

Download "Chapter5 step3 CSS を記述する (129 頁 ) [1] CSS フアイィル確認 HTML フアィル new.html に関連づけた CSS フアィル mystayle.css をクリックして開く [2] 項目名のスタイル (129 頁 ) 項目名に文字の色背景の色セルの中での"

ひろじささおか
5 years ago
Views:

1 平成 26 年 5 月度活動報告平成 26 年 6 月 05 日リーダー八田崇史平成 26 年 5 月 24 日 ( 土 ) 参加者 5 名午前の部ホームページ作成講座 (10 回目 ) 10:30~12:00 90 分 5 月は教科書 124 ページの Chapter5 章表の利用の [8] 表のタイトルから始めました [8] 表のタイトル (124 頁 ) 表にタイトルを表示するとその表の内容がすぐにわかります表のタイトルを表すには caption 要素で記述します <caption> 内容 </caption> HTML フアィル new.html の表のタイトル 4 月の催しの前に画像を挿入し表のタイトルを表示する 1. New.html のメモ帳に切り替えて <table border="1" cellspacing="0" cellpadding="5"> の下の行に次のように入力して編集する <caption><img src="image/mark.gif" alt=""width="32"height="31"> 4 月の催し </caption> と入力編集して上書き保存し Internet Explorer をクリックして確認をする (Width は幅 height は高さ傘の画像は image フォルタに mark.gif で保存されている ) [9] 表の要約 (126 頁 ) 表の要約を指定すると要約はブラウザに表示されないが音声ブラウザ等に表のタイトルだけでは足りない情報を提供できる表の要約を指定します summary= 要約 HTML フアィル new.html の表に京都の 4 月の催しについて催しの名称日にち場所内容を示した表と要約を指定するタスクバーボタンをクリックして new.html のメモ帳に切り替えをして <table border= 1 = 5 の後ろに次のように入力編集する Summary= 京都の 4 月の催しについて催しの名称日にち場所内容を示した表 > 上書き保存して IEで確認する [10] 上下のセルの結合 (127 頁 ) rowspan 属性を使うと隣り合った複数のセルを結合して上下方向に結合できる下方向のセルの結合 rowspan= 結合するセルの数都おどりと京おどりの内容が同じなので HTML フアィル new.html のメモ帳を開いて都おどりと京おどりの内容のセルの結合の入力編集をする祇園甲部歌舞練場の下の行の <td> 舞妓たちが優雅な舞を披露します </td> の中に <.td rowsoan= 2 > 舞妓たち <td> 宮川町歌舞練場 </td> <td> 舞妓たちが優雅な舞を披露します </td> は祇園甲部と同じ文句で結合するので削除する上書き保存して IEで編集結果を確認する 1

2 Chapter5 step3 CSS を記述する (129 頁 ) [1] CSS フアイィル確認 HTML フアィル new.html に関連づけた CSS フアィル mystayle.css をクリックして開く [2] 項目名のスタイル (129 頁 ) 項目名に文字の色背景の色セルの中での文字の位置決めの入力編集をする dd{text-indent:1em} の下の 11 行目に th{color:ffffff;background-color:#333366;padding:3px} と入力編集し上書き保存して I Eで編集結果を確認したパデイングとはセル内での文字の上下左右の隙間 [3] タイトルのスタイル (130 頁 ) タスクバーのボタンをクリックして mystyle.css のメモ帳に切り替えて項目のスタイルをフオントサイズフオントの太さ文字の色行揃えを左詰にする為に下記の様に caption{font-saize:150%;font-weight:bold;color:#336699;text-align:left} 編集入力して上書き保存し IEで編集結果を確認した第 6 章リンクの利用 STEP1 リンクの概要 [1] リンクとアンカー (133 頁 ) リンク = 文字や画像をクリックするとジャンプする仕組みリンク元である起点とリンク先の終点側をアンカーといいアンカーは画像や W ebページや電子メールアドレス等 STEP2 HTML を記述する (134 頁 ) [1] 指定するリンクの確認次のようにリンクを指定する new.html What s New Index.html 京都物語京都物語トップページヘ What s New 味紀行 aji.html 歳時記味紀行中原佐紀京都物語トップページヘ電子メールが起動 saijiki.html 歳時記京都物語トップページへ 2

3 [2] HTML ファイルの確認 (135 頁 ) メモ帳を起動して index.html を開きブラウザで確認する [3] 別のWeb ページへのリンクの指定 (135 頁 ) リンクを指定するにはアンカーを表す a 要素を記述してリンク先を href 属性で指定する A 要素アンカーを表す Href 属性リンク先を指定する <a> 内容 </a> href= リンク先 HTML ファイル indez.html の What s New 味紀行歳時記に次の様にリンクさせるリンク元リンク先 What. s New New.html 味紀行 aji.html 歳時記 Saijiki.html 上記を学習して index.html の <h2><img src の下行の 17 行目から次の様に入力編集する (137 頁 ) <p><a href= new.html >What s New</a> 今月の京都の情報を紹介します </p> <p><a href= aji.html > 味紀行 </a> 京都ならではのおいしい味覚をご紹介します </p> <p><a href= saijiki.html > 歳時記 </a> 京都の年中行事を紹介します </a> タスクバーボタンをクリックして IEに切り替えて編集結果を表示させるそして What s New をクリックするとリンク先の Web ページ New.html が表示できた同じ様に味紀行歳時記も確認した [4] 電子メールアドレスへのリンク指定 (138 頁 ) リンク先には Web ページ以外に電子メールアドレスを指定できる電子メールアドレスの URL 電子メールアドレスを表す URL は電子メールアドレスの前に mailto: を付ける以上を学習して HTML ファイル index.html の中原佐紀の手紙と画像に電子メールアドレス abc12345@nifty.com へのリンクを指定する入力編集をする 23 行目に管理人 :<a href= mailto:abc12345@nifty.com > 中原佐紀 24 行目の最後に </a> と入力編集して上書き保存タスクバーのボタンをクリックして IEに切り替えると編集結果が表示される中原佐紀をクリックすると電子メールが起動してメールが表示されたこのIE 表示の時に中原佐紀のハイパーリンク時の色を任意に変更が出来るその方法は IE 画面でツールインターネットオフション全般タブ色 (O) をクリック Windows の色のチエックを外して指定する 6 月は140 頁の [5] 指定するリンクの確認からです 5 分休憩午後の部通常の月例会 5 月 24 日 ( 土 )( 第 193 回目 ) 1:30~4: 分クラウドについて 1:30~1:50 20 分 3

4 今年度から教材資料の配布が多量でしかも Win8.1 教材は 4 倍率での拡大作業が必要で時間がかかる 6 月配布からはクラウドに上げて各自がクラウドから資料をコピーする様にしたい但しクラウドアップに問題が出て何故か全データがアップになるこれを解決してからクラウド利用となる問題の原因がはっきりしないがマイクロソフトからデスクトップアプリをダウンロードしてテスクトレーに入れたら問題が解決するかもとの意見が出たので一度トライしてみることにした 1 時間目学習コーナー 1:50~3:10 分 80 分教材の Win7 毎日使う便利技の 2 回目で今月は第 2 章 026 項 (40 頁 )~040 項 (5 0 頁 ) まで11 枚全部を予定通り終了した第 2 章ソフトの起動と終了保存 026 作成した文章を保存するフアイル名に使えない文字 027 フアィル名に使えない文字があるの? 上書き保存 028 一度保存した文書を上書き保存する文書を閉じる 029 保存した文書を閉じる画面を閉じる 030 複数起動している画面をタスクバーで一気に閉じる文書を開く 031 閉じた文書を開いて続きを作業するには? 文書の印刷 032 文書を印刷する印刷の中止 033 印刷を中止する新規作成 034 新しい文書を作成する保存するたびハックアッフ 035 保存するたびハックアッフフフアィルを作るフリーズ 036 アプリケーションソフトが反応しなくなったらメモ帳 037 文字入力ソフトメモ帳を起動する電卓 038 電卓を起動して計算する拡大鏡 039 画面の文字が見えにくい時は拡大鏡を起動する付箋 040 付箋を使ってメモ帳をデスクトップに貼り付ける各項目の操作は各自が持ち込みの Win7 掲載パソコンで実際に入力操作で進めた第 2 時間目スキルアップコーナー 3:15~3:42 27 分お答えしますの 51 回目の講座 Q&A 89 Win8.1 update 用のアカウントが必要種類を知りたいが? 答え Win8 8.1 を利用するには Microsoft アカウントかローカルアカウントが必要ローカルアカウント = 従来の Win7 Vista XP でユーザーアカウントと呼ばれていたものでパソコンにユーザ名とアカウントを登録して管理するログオンログオフという用語が使われていた Microsoft アカウント = 以前は {Windows Live ID} と呼ばれていたものでマイクロソフトの各種オンラインサービスを利用するために使う現在 Win8 8.1 のマイクロソフトアカウントはサインインサインアウトと呼ばれている月から SkyDrive は One Drive の名称に変わった 2.Win8 8.1 でアカウントを調べるにはチャーム設定 PC 設定の変更ユーサを選択 4

5 3 時間目パソコン全般コーナー 3:45~4:25 新年度からの Windows8.1 講座の 2 回目教材は Windouws8.1 らくらく操作事典で第 1 章 ~ 第 6 章までの 203 頁を1 年かけて学習することになり 5 月はその第一回目第一章基本ワザ編 ( このワザでスムーズに使い始められる ) 1 18p 19P 電源を入れてサインインする 2 20P 21P ストアアプリやデスクトップアプリを起動する 3 22P 23P アプリを切り替える 4 24P 25P アプリを終了する 5 26P 27P スタート画面とテスクトッフを切り替える 6 28P 29P スタート画面とアプリビューを切り替える 7 30P 31P パソコンをシャットダウンする 8 32P 33P パソコンの各種設定画面を開く 9 34P 35P コントロールパネルを表示する 10 36P 37P エクスプローラーを表示する各自持ち込みの Win8.1 ノートパソコンで 10 項目の操作を行った次回 6 月はソフトキーボードを表示する (38 ページ ) からです以上 5

見出し味紀行湯豆腐おばんざい京懐石京漬物アンカー名 pagetop yudofu obannzai kaiseki tukemono 1. aji.html のメモ帳に切り替えて上記のアンカーを入力編集する <h1><a name="pagetop"><img src="image/title_

見出し味紀行湯豆腐おばんざい京懐石京漬物アンカー名 pagetop yudofu obannzai kaiseki tukemono 1. aji.html のメモ帳に切り替えて上記のアンカーを入力編集する <h1><a name=pagetop><img src=image/title_ 平成 26 年 6 月度活動報告平成 26 年 7 月 10 日リーダー八田崇史平成 26 年 6 月 28 日 ( 土 ) 午前の部ホームページ作成講座 (11 回目 ) 10:30~12:00 90 分参加者 5 名 6 月は教科書 140ページの Chapter5 章 STEP3 CSS を記述するの [5] 指定するリンクの確認から始めました [5] 指定するリンクの確認 (140 頁

Chapter5 step3 CSS を記述する (129 頁 ) [1] CSS フアイィル確認 HTML フアィル new.html に関連づけた CSS フアィル mystayle.css をクリックして開く [2] 項目名のスタイル (129 頁 ) 項目名に文字の色 背景の色 セルの中での

Chapter5 step3 CSS を記述する (129 頁 ) [1] CSS フアイィル確認 HTML フアィル new.html に関連づけた CSS フアィル mystayle.css をクリックして開く [2] 項目名のスタイル (129 頁 ) 項目名に文字の色背景の色セルの中での