1 平成２６年６月度活動報告 平成２６年７月１０日 リーダー 八田 崇史 平成２６年６月２８日（土） ●午前の部「ホームページ作成」講座（１１回目） １０：３０～１２：００ ９０分 参加者 ５名 ６月は教科書１４０ページのChapter５章 STEP3 CSS を記述する の［５］指定 するリンクの確認 から始めました。 ［５］指定するリンクの確認（１４０頁） リンクは次のように指定をする。 ・aji.html 味紀行 ■湯豆腐 ■おばんざい ■京懐石 ページの先頭にリンク ■京漬物 湯豆腐 核見出しにリンク このページの先頭へ おばんざい このページの先頭へ 京懐石 このページの先頭へ 京漬物 このページの先頭へ 上記を学習して、 [６] HTML フアイルを確認（１４１ページ） タスクバーボタンから「index.html」のメモ帳を開き、目次の中の「味紀行」をク リックと Web ページの「aji.html」を表示しておく。 [７] 特定の場所へのリンク 特定の場所へリンクする場合は、特定の場所に目印となるアンカーを記述する。 Name 属性 name＝”アンカー名” １ アンカーの指定 HTML フアィル「aji.html」のレベル１とレベル２の見出しに次のようなアンカ ーを指定する
2 見出し アンカー名 味紀行 pagetop 湯豆腐 yudofu おばんざい obannzai 京懐石 kaiseki 京漬物 tukemono １．「aji.html」のメモ帳に切り替えて、上記のアンカーを入力編集する
<h1><a name="pagetop"><img src="image/title_aji.gif" alt="味紀行"
width="565" height="65"></a></h1> <h2><a name="yudofu"><img src="image/mark.gif" alt="" width="32"
height="31">湯豆</a>腐</h2> <h2><a name="obanzai"><img src="image/mark.gif" alt="" width="32"
height="31">おばんざい</a></h2> <h2><a name="kaiseki"><img src="image/mark.gif" alt="" width="32"
height="31">京懐石</a></h2> <h2><a name="tukemono"><img src="image/mark.gif" alt="" width="32"
height="31">京漬物</a></h2> 2 特定の場所へのリンクの指定（１４４ページ～１４５ページ） HTML フアィル「aji.html」のリストに下記のリンク先を編集入力する。 リンク元 リンク先 湯豆腐 #yudofu おばんざい #obanzai 京懐石 #kaiseki 京漬物 #tukemono <ul>
<li><a href="#yudofu">湯豆腐</a></li> <li><a href="#obanzai">おばんざい</a></li> <li><a href="#kaiseki">京懐石</a></li> <li><a href="#tukemono">京漬物</a></li> </ul>
上書き保存して、ブラウザをクリックして編集結果を確認する。
見出しの「湯豆腐」をクリックすると、→Web ページの湯豆腐がリンク表示できた。 ２ －① 別の Web ページの特定の場所へのリンク
3 うなアンカーを指定する。 見出し アンカー名 歳時記 pagetop レベル１ h1 春（３月～５月） haru 夏（６月～８月） natu レベル２ h2 秋（９月～１１月） aki 冬（１２月～２月） fuyu 「saijiki.html」を開いて次のように入力編集する。
<h1><a name="pagetop"><img src="image/title_sai.gif" alt="歳時記" width="565" height="64"></a></h1> <h2><a name="haru"><img src="image/mark.gif" alt="" width="32"
height="31">春（3 月～5 月）</a></h2> <h2><a name="natu"><img src="image/mark.gif" alt="" width="32"
height="31">夏（6 月～8 月）</a></h2> <h2><a name="aki"><img src="image/mark.gif" alt="" width="32"
height="31">秋（9 月～11 月）</a></h2> <h2><a name="fuyu"><img src="image/mark.gif" alt="" width="32"
height="31">冬（12 月～2 月）</a></h2> 入力後上書き保存してブラウザを開いて確認する。 ２－②－１HTML フアィル「saijiki.html」のリストに、次のようなリンクを指定す る。（１４６ページ） リンク元 リンク先 春（３月～５月） #haru 夏（６月～８月） #natu 秋（９月～１１月） #aki 冬（１２月～２月） #fuyu 編集入力 <ul>
<li><a href="#haru">春（３月～５月）</a></li> <li><a href="#natu">夏（６月～８月）</a></li> <li><a href="#aki">秋（９月～11 月）</a></li> <li><a href="#fuyu">冬（１２月～２月）</a></li> </ul> 上書き保存する。 ２－②－２ 「saijiki.html」のリストに「このページの先頭へ」の段落４か所に 「#pagetop」のリンク指定する入力編集をする。（１４７ページ） <dd>5 月第三日曜 車折神社<dd> </dl>
4 <dt>五山送り火</dt>
<dd>8 月 16 日 大文字山など五山</dd> </dl>
<p class="top"><a href="#pagetop">このページの先頭へ</a></p> <dt>秋の一般公開</dt>
<dd>11 月上旬頃 5 日間 京都御所</dd> </dl>
<p class="top"><a href="#pagetop">このページの先頭へ</a></p> <dt>初弘法</dt
<dd>1 月 21 日 東寺</dd> </dl>
<p class="top"><href="#pagetop">このページの先頭へ</a></p> 上書き保存する。 ２－③ HTML フアィル「saijiki.html」「aji.html」「new.html」の署名の「京都 物語トップページへ」のリンクと、「中原佐紀」と手紙の画像に電子メー ルアドレス「[email protected]」へのリンクを指定する編集入力をす る。（１４８ページ） ヒント リンク先の指定は href=”リンク先” 電子メールの指定は Href=mailto: の後にアドレスを入れる。 編集内容「saijiki.html」 <address>
<a href="index.html">京都物語トップページへ</a><br>
管理人：<a href="mailto:[email protected]">中原佐紀
<img src="image/mail.gif" alt="（電子メール）" width="20" height="13"></a>
上書き保存してブラウザをクリックで結果を確認する。 編集内容「aji.html」
<address>
<a href="#index.html">京都物語トップページへ</a><br> 管理人：<a href="mailto:abc [email protected]">中原佐紀
<img src="image/mail.gif" alt="（電子メール）" width="20" height="13"></a> 上書き保存してブラウザをクリックで結果を確認する。
編集内容「new.html」
<a href="index.html">京都物語トップページへ</a><br> 管理人：<a href="mailto:[email protected]">中原佐紀
<img src="image/mail.gif" alt="（電子メール）" width="20" height="13"></a>
上書き保存してブラウザをクリックで結果を確認する。 Chapter6 STEP3 CSS を記述する
5 １ CSS フアィルの確認（１５０ページ） HTML フアィル「aji.html」に関連付けられた、CSS フアィル「mystyle.css」 をメモ帳で確認するために、「mystyle.css」を開く。 ２ リンクのスタイル（１５０～１５１ページ） リンクの様々な状態にスタイルを指定できる。セレクタの「a」の後ろに、リン クの状態を表す「模擬クラス」を付けて記述します。 リンクの状態を表す疑似クラスには次のようなものがある。 疑似クラス 説 明 :link 来訪者の状態を表す :visited 訪問済みの状態を表す :hover マウスでポイントした状態を表す :active クリックしている間を表します （hover とはマウスでポイントすると色が変わること） CSS フアィルの「mystyle.css」を開き、a 要素の文書の色を「＃336699」（水色） に指定し、カーソルがポイントで合わさっている時は、文字の色を「#cc6699」（赤 紫色）に下記の様に指定し編集入力する。 Caption{font…………の下の行に a{color:#336699} a:hover{color:#cc6699} a img{border:0px} .intro{color:#336699} と入力編集して上書き保存し、ブラウザに切り替えてマウスポイントして色が変 わることを確認する。 ３ 特定の場所へのリンクのスタイル（１５２ページ） リンクの下線を非表示にするときは「text.decoration プロパティ」を使います。 text-decoration:装飾 文字への装飾を指定するプロパティですが、装飾なしにすることで、リンクの下線 を非表示にできる。 text-decoration:none 「このページの先頭へ」には、ボーダー（下線）が指定されています。 こ の 下 線 が 表 示 さ れ る と 見 栄 え の バ ラ ン ス が 悪 い た め 、CSS フ ア ィ ル 「mystyle.css」を開き編集してリンクの下線を非表示にする。 「mystyle.css」を開いて、border-bottom-color:#336699 の下の行に .top a{text-decoration:none} と入力編集して、上書き保存しブラウザに切り替えて確認する。 ４ リンク画像のスタイル（１５４ページ～１５５ページ） 署名の手紙の画像の様に、リンクが指定された画像の周りには、リンクであるこ とがわかるように、ボーダー（下線）が表示される。 CSS フアィル「mystyle.css」を編集して、リンクが設定されている画像のボー ダーを非表示に指定する。
6
セレクタに「a img」と記述すると、「a 要素の子要素の img 要素」にスタイルが 適用できる。 「mystyle.css」を開いて、a:hover{color:#336699}の下の行に A img{dorderr:0px} と入力編集し、上書き保存してブラウザに切り替えて確認 する。 以上１５５ページで、ホームページ作成講座を終了した。 テキストの中の下記の部分は、今回の講習では取り上げず独自の学習となった。 第１章 ホームページ作成の準備 STEP２ Web サイトを開設する １３頁 STEP３ web サイトの作成準備をする １４頁～２２頁 STEP４ Web ページを作成する ２３頁～２５頁 第７章 制作の仕上げ １５７頁～１６１頁 参考学習 フレームの利用 １６２頁 STEP1 フレームの概要 １６３頁 STEP2 作成する Web ページを確認する １６４頁 STEP3 フレーム設定文書を作成する １６５頁～１７３頁 STEP4 リンクを指定する １７４頁～１７７頁 ●午後の部 通常の月例会６月２８日（土）（第１９４回目）１３：３０～１６：３０ 参加者１３名 ◆１時間目 学習コーナー １：３０～３：００ ９０分 テキスト Windows7 毎日使う便利技 の３回目で今月は第３章入力５２頁～６６頁 まで（１５枚）を予定通り全部行いました。 第３章 入力 日本語入力オン ０４１ 日本語入力を手軽にオンにする 文節の区切り ０４２ 変換する語句の区切りを変える 変換ミス ０４３ 返還後に変換ミスに気付いたら？ 再変換 ０４４ 確定した文字を再変換する 顔文字 ０４５ (^○^)文字を入力したい 人名・地名の入力 ０４６ 難しい地名を入力したい 一気にカタカナ ０４７ 一気にカタカナに変換したい 郵便番号→住所 ０４８ 郵便番号から住所に変換する 最新の郵便番号辞書 ０４９ 自動で最新の郵便番号辞書に更新する 漢字の検索 ０５０ 読みのわからない漢字を入力したい 漢字の検索 ０５１ 部首や画数から読みの分からない漢字を入力する かな→英語 ０５２ かな から英語に変換したい 入力モードと変換モード０５３ 入力モード？っ変換モード？ [言語バー]のアイコン ０５４ [言語バー]のアイコンの意味を知りたい [言語バー]を隠す ０５５ [言語バー]が邪魔だけどどうしたらいい？ 単語登録 ０５６ 単語登録で長い文章を一発で入力する 単語登録を取り出す ０５７ 前のパソコンだと文字が入力しやすかったけど？ 英太文字の入力 ０５８ 突然太文字しか入力できなくなった 記号の入力 ０５９ 「～」「：」「；」「’」「”」「，」「@」「*」「_」「．」
7 はどうやって入力するの？ ローマ字入力 ０６０ [A]キーを押すと[ち]と入力されてしまう ひらがな入力モード ０６１ カタカナ入力しかできないときは？ [NumLK]キー ０６２ 文字キーを押しているのに数字が出てくる 上書き入力 ０６３ 文字を挿入したいのに上書きになってしまう 各自持ち込みのパソコンで入力操作確認して進めた。 ７月度は第４章フアィルとフォルダの０６４からです。 ５分休憩 ◆２時間目 スキルアップコーナー ３：０５～３：４５ ４０分 「お答えします」の５２回目の講座 Ｑ＆Ａ №９０ アプリケーションの起動を簡単にしたい。 答え アプリケーションを手軽に起動する手段として、タスクバーにドラッグ&ドロッ プして登録をしたり、「クイック起動バー」（Win7）の方法があるが、別の２方法 を紹介する。 １の方法． デスクトップに横長のバー画面を常駐させて、このバーに起動フアィルやアプリ ケーションのショートカットをドラグ＆ドロップしておく。 （http://www.winstep.net/を開いて「Products」のページから→Winstep Nexsus をダウンロードする。） ２の方法． 「フアィル名を指定して実行」にフアィル名を入力して、アプリケーションを起 動する方法。 方法 １．ドライブの適当な場所に新規に「C:¥shortcut」のフォルダを作り、ドラ グ＆ドロップしたAdobe Reader XI アプリに PDF と名前を付ける。 ２．[Windows]+[R]キーで「フアィル名を指定して実行」の画面を出す。 ３．名前（o）欄に「sysdm.cp」と入力して→「OK」をクリックしてシステム のプロパティを表示さす。 ４．「詳細設定」タブの「環境変数」をクリック。 ５．ユーザ環境変数の「新規（N）」をクリックする。 ６．表示された「新しいユーザ変数」の画面の 変数名（N）に [ path ] と入力 変数値（V）に [%PATH%;c:¥shortcut;] と入力。 ７．「OK」を押す。 （２．～7．までの作業は最初の時だけでよい。） ８．ドロップしたアプリが多数の時、 ２．の[Windows]+[R]キーで「フアィル名を指定して実行」の画面を出す。 ９．フアィル名を指定して実行の画面に、「PDF」と入力して「OK」を押すと Adobe Reader XI が起動する。 ※私の場合、 ２のようなややこしい方法でなく、１の方法とタスクトレーに常時使う４程 度のアイコンが入れてあり、時たま使うのはデスクトップ上に「隠しフォル ダ」の名前のアイコンを置いておき、この中に３０位のアプリをドラグ＆ド ロップしてあるので必要時にはこれを開いて起動させている。
8 ◆３時間目パソコン全般コーナー ３：４５～４：２０ ３５分 新年度からの「Windows8.1 講座」の３回目。 教材は「Windouws8.1 らくらく操作事典」で、第１章～第６章までの２０３頁を１ 年かけて学習することになり、６月はその第二回目。 第一章 基本ワザ編 （このワザでスムーズに使い始められる） ⑪ ３８ｐ・３９Ｐ ソフトキーボードを表示する ⑫ ４０Ｐ・４１Ｐ 音量を調節する ⑬ ４２Ｐ・４３Ｐ ディスプレィの明るさや回転の有無を設定する ⑭ ４４Ｐ・４５Ｐ Wi・Fi の接続先を変更する ⑮ ４６Ｐ・４７Ｐ バッテリーの残量を確認する ⑯ ４８Ｐ・５０Ｐ コンピューターの情報を捧持する 各自持ち込みのWin8.1 ノートパソコンで１０項目の操作を行った。 次回７月は、第２章スタート画面編５２頁からです。 ※１．３時間目で予定していた質問コーナーは質問者が欠席なので来月へ繰り越した。 ※２．３時間目学習のテキスト「Win8.1 らくらく操作辞典」の最初のページ～２１ペ ージまでは送信除外としていたが、冊子として欠落となるので６月度に３回に分 けての分割送信をした。 ―以上―
