はじめての Web サイト Sushi Web ページの編集 Card 1 of 10 1 これから新しい Web ページを作ります! 今回は本のリストを作りますが HTML を使えば何でも好きな Web ページが作れます! まず http://coderdojo-hiroshima.com/my-first-website-ja.zip から HTML のソースファイルをダウンロードします my-first-website のフォルダに移動して about-me.html のファイルを開きます web ページがブラウザで表示されます このファイルを開く 2 次に 同じファイルをテキストエディタで開きます ブラウザ テキストエディタ
Sushi Web ページの編集 Card 1 of 10 3 パソコンの画面上で ブラウザとテキストエディタを横に並べます ブラウザ テキストエディタ 4 5 テキストエディタで 自分の自己紹介になるように変更します 変更したらテキストを保存します ( ファイル > 保存 ) 保存したら F5 を押してブラウザの画面を再読み込みします 再読み込みボタン 何が起きましたか? 6 7 新しい段落を追加してみましょう 段落は <p> と </p> で囲みます 例えば <p> 私は Web ページの作り方を勉強しています </p> のように使います <p> は段落の始まりのタグで </p> は終わりのタグです 変更したらもう一度保存して再読み込みします このように Web ページはテキストで作られています テキストの表示方法はタグでコントロールされています p の代わりに h1 や h2 のタグで囲んだらどうなりますか? 次のように strong で囲んだらどうなりますか?: <p> 私の名前は <strong>ling Ling</strong> です </p>
はじめての Web サイト Sushi 新しい Web ページ Card 2of 10 1 2 my-first-website のフォルダに移動して blank.html のファイルをコピーします C コピーするには CTRL とを同時に押します コピーしたファイルを同じフォルダに貼り付けます ファイルを貼り付けるには CTRL と V を同時に押します ファイルを貼り付けると 以下のようになります 3 4 blank.html のコピーは blank - コピー.html というファイル名になります コピーされたファイルを使って 好きな本を紹介する Web ページを作りましょう ファイルを選択して F2 を押します blank - コピーのファイル名がハ イライトされます ファイル名をbooks.htmlに変更します books.html に変更
Sushi 新しい Web ページ Card 2of 10 ファイル名を変更すると以下のようになります 5 これで books.html. の Web ページができました この時点では 中身は blank.html と同じです Web ページで好きな本を紹介できるように books.html を変更しましょう 以下の例を参考にして テキストを編集します 画像をダウンロードして Web ページに貼り付ける方法はわかりますか? 変更を反映したいときは必ず保存します 保存するには CTRL と S を同時に押します こまめに保存することで パソコンが突然落ちても途中から続けることができます 保存した内容を反映するためには 更新ボタンを押してブラウザを更新します リストの作り方はわかりましたか? リストは ul 要素の中に li タグで記述します ul の代わりに ol を使うとどうなりますか?
はじめての Web サイト Sushi ホームページ Card 3of 10 1 my-first-website のフォルダに移動して もう一度 blank.html をコピーして ファイル名を index.html にします index.html が最初に開くページ ( ホームページ ) になります ホームページのファイル名には index.html という名前がよく使われます ファイルのコピーは Card2 で説明しています! コピーしてファイル名を変更すると以下のようになります 2 以下を参考にして index.html を変更します "Ling Ling" のところは自分の名前に変えてください
Sushi ホームページ Card 3of 10 index.html のページには 2 つのリンクがあります リンクをクリックすると 先ほど作ったページに移動するようにします <a href="books.html"> 私の好きな本 </a> 移動したいページのファイル名 <a href="books.html"> 好きな本 </a> Web ページに表示するテキスト 文字の打ち間違いに気をつけましょう 書き方を少しでも間違えると コンピュータは正しく理解してくれなくなります aタグで囲みます : <a href=" ファイル名 "> テキスト </a> hrefを書きます : <a href=" ファイル名 "> テキスト </a> ファイル名を書きます : <a href=" ファイル名 "> テキスト </a> リンクのテキストを書きます : <a href=" ファイル名 "> テキスト </a> hrefの要素はダブルクォーテーション " " で囲うことに注意してください ダブルクォーテーションはaタグの中に入れます やってみよう! 以下の例を参考に ページを3つ増やしてみましょう. 例に無いページを作っても構いません ( 例 ) タイトルファイル名 Q. What happens? 私の家族私のペット好きな音楽好きな映画趣味尊敬する人 family.html pets.html songs.html movies.html hobbies.html heroes.html tags instead of p?
はじめての Web サイト Sushi スタイルの追加 Card 4of 10 index.html のページが少しシンプルです CSS を使って見た目を変えてみよう! 1 このページが CSS を使うとこうなります! CSS ファイルは Web ページの見た目に関する情報が書かれています HTML ファイルとは別になっていて 次のように HTML ファイルにリンクされています <link type="text/css" rel="stylesheet" href="css/home.css" /> index.html をテキストエディタで開くと 5 行目に CSS のリンクが書かれています これは css フォルダの home.css によってページの見た目がコントロールされていることを表しています 2 css のフォルダに移動すると home.css が置いてあります
Sushi スタイルの追加 Card 4of 10 3 index.html をブラウザで開いて home.css をテキストエディタで開き 2 つを横に並べます home.css のファイルの中には次のように書かれています body { font-family: sans-serif; これは HTML ファイルの body 要素をどのように修飾するかを指示しています ここでは 全ての body 要素のフォントを sans-serif にしなさい と言っています 4 5 body 要素に背景画像を追加します また h1 要素にも新しい見た目のルールを追加します home.css の中身が以下のようになるように修正してください body { font-family: sans-serif; background-image: url('../images/ling-ling.png'); h1 { padding: 12px; background-color: black; color: white; border-radius: 10px; ルールを一つ追加するごとにファイルを保存してください 追加したルールがどのように見た目を変えるのか分かるように ルールを追加する度にブラウザを更新してみましょう 一つの要素が複数のルールを持っていることに注意してください ルールは全て プロパティ ( 例えば color など ) コロン (:) 値 ( 例えば white など ) の順で書かれて 最後にセミコロン (;) で終わります ルールはカッコ ({ と ) で囲まれていることにも注意してください.
はじめての Web サイト Sushi ページのリンク Card 5of 10 全てのページにリンクを貼り付けてみましょう そうすることで Web サイトのどのページにいても 好きなページに移動できるようになります 現時点では リンクは index.html にだけ書かれています index.html を開いて リンクの HTML のコードをコピーし 他のページ (aboutme.html, books.html, family.html など ) に貼り付けます ホームページへ戻るリンクも追加します 1 index.html を開いて リンクの HTML コードを選択します コードを選択するには 始めの ul タグの前をクリックします マウスをクリックしたまま 選択したいところまでドラッグします 終わりの ul ボタンまでドラッグしたら クリックボタンの指を放します 2 選択したときに すべての ul 要素を選択できているか確認してください 以下の 2 つの例を確認してみましょう うまく選択できてない! OK! CTRL と C を押してコピーします
Sushi ページのリンク Card 5of 10 4 5 これまで作った Web ページをどれか一つ開いてください ここでは自己紹介のページ (about-me.html) を使って説明します h1 タグの前をクリックして CTRL V で貼り付けます ここをクリック 貼り付けたら以下のようになります リンクのコードがどこに貼り付けられたか分かりますか? コードが見づらかったら リターンキー を押して h1 タグの前で改行するとコードが見やすくなります ( コードを改行してもブラウザには反映されません!) 6 CTRL S を押して保存して ブラウザで開いてみます そうすると h1 要素の上にリンクが縦に並んでいるのが確認できます 次回はリンクをメニューバーのように表示する方法を勉強します 事前にやっておくこと about-meのリンクの上にホームページへのリンクを追加します そのあと 他のページにも同じリンクを貼り付けます 他のページも h1の前にリンクを貼り付けるようにしてください 追加したリンク
はじめての Web サイト Sushi トップメニュー Card 6of 10 この状態から こうなる CSS 使用後 1 simple.css を編集します CSS の働きが分かるように ワンステップずつ保存してブラウザで確認してください 1 ピクセルの太さの外枠の線を追加します body { font-family: sans-serif; ul { 2 3 リストの項目を 1 ピクセルの赤い線で囲みます 黒丸を消去します ( デフォルトの状態では リストは黒丸が表示されます ) ul { ul li { border-color: red; ul li { border-color: red; list-style-type: none;
Sushi トップメニュー Card 6of 10 4 5 6 7 8 リストアイテムが横に並ぶようにします デフォルトの状態では リストはブロック要素 ( 改行されて表示される要素 ) です リスト全体の上下左右に 10 ピクセルの隙間をあけます リストアイテムの左右に 10 ピクセルの間隔をあけます border-radius を使って リストの外枠の角を丸くします 背景色を黒色にします 赤い枠を削除して 文字を白色にします ul li { border-color: red; list-style-type: none; display: inline; ul { padding: 10px; ul li { border-color: red; list-style-type: none; display: inline; margin-right: 10px; margin-left: 10px; ul { padding: 10px; border-radius: 10px; background-color: black; ul li { border-color: red; list-style-type: none; display: inline; margin-right: 10px; margin-left: 10px; ul li a { color: white;
はじめての Web サイト Sushi メニューリンク Card 7 of 10 アンダーラインを消す マウスオーバーしたとき 青文字にしてアンダーラインをつける 表示しているページを黄色にするクリックできないようにする 上の図のように変更するには HTML と CSS のファイルを書き換えます 1 HTML ファイルで 同じページのリンクの a タグを削除します 例えば about-me.html では <a href="about-me.html"> を books.html では <a href="books.html"> を削除します ファイル about-me.html 変更前 <ul> <li><a href="about-me.html"> 自己紹介 </a></li> <li><a href="books.html"> 好きな本 </a></li> <li><a href="family.html"> 私の家族 </a></li> <li><a href="pets.html"> 私のペット </a></li> </ul> 変更後 <ul> <li> 自己紹介 </li> <li><a href="books.html"> 好きな本 </a></li> <li><a href="family.html"> 私の家族 </a></li> <li><a href="pets.html"> 私のペット </a></li> </ul> books.html <li><a href="books.html"> 好きな本 </a></li> <li> 好きな本 </li> 他のページでも同じ変更をします ( 例えば family.html や pets.html など ) a タグを削除したリンクはクリックできなくなります
Sushi メニューリンク Card 7 of 10 2 リンクを削除した li タグに selected のクラスを追加します ファイル about-me.html 変更前 <ul> <li> 自己紹介 </li> <li><a href="books.html"> 好きな本 </a></li> <li><a href="family.html"> 私の家族 </a></li> <li><a href="pets.html"> 私のペット </a></li> </ul> 変更後 <ul> <li class="selected"> 自己紹介 </li> <li><a href="books.html"> 好きな本 </a></li> <li><a href="family.html"> 私の家族 </a></li> <li><a href="pets.html"> 私のペット </a></li> </ul> selected を書いただけでは見た目に何も影響しません ( ブラウザを更新しても何も変わっていません ) しかし こうすることで CSS で識別できるようになり 次のように変更することでリンクを黄色にできます ファイル simple.css 変更前 ( 無 ) 変更後 ul li.selected { color: yellow; 3 4 ブラウザを更新するとリンクが黄色になります li 要素の selected クラスに新しいルールを追加したためです li ではなく li.selected とすることで 特定の li 要素を指定することができます メニューのリンクのアンダーラインを削除します ファイル simple.css 変更前 ul li a { color: white; 変更後 ul li a { color: white; text-decoration: none; 5 マウスオーバーしたときにリンクが青色になりアンダーラインが表示されるようにします #99DDFF は 16 進数で青色を表しています ul li a:hover { color: #99DDFF; text-decoration:underline;
はじめての Web サイト Sushi メニューの識別 Card 8of 10 ページにもう一つリストを追加したとき 特に何も区別しなければ メニューと同じ見た目になってしまいます 以下の例では もう一つのリストがメニューと同じ見た目になっています ul 要素のルール ul ul ul
Sushi メニューの識別 Card 8of 10 見た目が同じになることを避けるために クラスで識別する必要があります <ul class="menu">... </ul> HTML が修正できたら CSS も修正します menu クラスの ul にだけメニューの見た目が反映されるように変更しましょう ul.menu ul ul.menu に反映されるルール ul.menu ul
はじめての Web サイト Sushi レスポンシブデザイン Card 9of 10 レスポンシブデザインは デスクトップ PC ノートパソコン タブレット スマートフォンのどのデバイスでもきれいに表示できるデザインです 表示画面の幅に合わせて コンテンツのサイズや配置を最適化します Web サイトをレスポンシブデザインにするため 今回は float プロパティを勉強します まず ペットのページで ペットを飼うコツのリストを追加します 情報は aside タグに入れてください また 買っているペットの情報は article タグに入れてください
Sushi レスポンシブデザイン Card 9of 10 CSS ファイルに次のコードを追加します article { float: left; margin-right: 1em; margin-bottom: 1em; padding: 1em; aside { float: left; padding: 1em; border-radius: 1em; background-color: #FFFFC0; 幅を広くしたとき やってみよう! CSS を修正して以下のような見た目にしてください 幅を狭くしたとき ヒント box-shadow: 10px 10px 5px gray; color: #2F5670; list-style-type: square; font-size: 14px; 他のプロパティも試してみよう opacity: 0.5; transform: rotate(30deg); aside:hover { transition: 1s ease-in-out; border-style:dotted;
はじめての Web サイト Sushi テーブル Card 10 of 10 好きな本のページで 本を 5 冊紹介して それぞれの本に 10 点満点の点数をつけます 今回はテーブルタグを使ってリストにします 1 simple.css のファイルに以下のコードを追加します table, th, td { border: 1px solid white; border-collapse: collapse; tr { background-color:silver; th, td { vertical-align: top; padding: 0.5em; text-align: left; 2 books.html のページにテーブルタグを追加します 以下の例を参考にしてください : <h2> トップ 3</h2> <table> <tr> <th> ランキング </th> <th> タイトル </th> <th> 点数 </th> </tr> <tr> <td>1</td> <td> ハリーポッター </td> <td>9/10</td> </tr> [ ここに残りの行を書きます ] </table> tr,th,td の意味 tr はテーブルの行 th はヘッダーの行 td はテーブルのデータ 残りのコードは書けましたか? 余裕があればさらに 3 行以上追加してみてください
Sushi テーブル Card 10 of 10 やってみよう! 1 2 本の画像を表示する列を追加します 画像は次の URL からダウンロードできます : www.googlejunior.com 本の名前に 購入サイトのリンクを追加します One more tag! marquee タグを使うと文字が画面を横切るようになります <marquee> 一番好きな本 </marquee> おめでとう! はじめての Web サイトが完成しました!