ａ） 写真・イラストのファイルを 用意する。 フリーイラストサイト
いらすとや イラストレイン ガーリー素材（かわいいイラスト） Print Out Factory（総合） みさきのイラスト素材
フリー写真サイト
ぱくたそ Pixabay GIRLY DROP（美容・かわいい素材） Foodiesfeed （食物） ＜検索＞ タダピク O-DAN
ｂ） ファイルを「index.html」と同じ場所に保存する。その際、ファイル名を拡張子（.以下）を含めて確認する。
のファイル名は 「eto_tora_banzai.png」
画像の拡張子には、 jpeg/jpg/png/gif/bmp などがある。
ｃ） 表示するには「html」ファイルで
<img src = "ファイル名">
例）<img src = "eto_tora_banzai.png">２文字を拡大する【width height】
<img src = "ファイル名" width="横幅" height="高さ"> で大きさを変える
例）<img src = "eto_tora_banzai.png" width="300" height="300"> <img src = "eto_tora_banzai.png" width="600" height="200">
３文字を横に styleで【float:left】
例）図の右側に文字を表示する。
|
<div style = "float:left;"> <img src="eto_tora_banzai.png" $gt; </div> あああああああ<br> いいいいいいい<br> ううううううう<br> | いいいいいいい ううううううう |
【２】音楽・映像などの表示
１ 音楽を演奏するには
ａ） 音楽ファイルを ダウロードし、index.htmlと同じ場所に置く。
フリー音楽サイト 甘茶の音楽工房 H/MIX GALLERY DOVA-SYNDROME
ｂ） 「html」の表示したい場所に <audio src="ファイル名" controls > と記述する。
controls ： 開始・ストップ・音量など調整ボタンが表示される。
autoplay ： 自動実行される
loop ： ループ再生（何度も繰り返す）
２ 映像を再生するには
ａ） 映像ファイルを ダウロードし、index.htmlと同じ場所に置く。
フリー映像サイト NHKクリエイティブ Pexels
ｂ） 表示したい場所に <video src="ファイル名" controls > と記述する。
controls ： 開始・ストップ・音量など調整ボタンが表示される。
autoplay ： 自動実行される
loop ： ループ再生（何度も繰り返す）
ａ） 音楽ファイルを ダウロードし、index.htmlと同じ場所に置く。
フリー音楽サイト 甘茶の音楽工房 H/MIX GALLERY DOVA-SYNDROME
ｂ） 「html」の表示したい場所に <audio src="ファイル名" controls > と記述する。
controls ： 開始・ストップ・音量など調整ボタンが表示される。
autoplay ： 自動実行される
loop ： ループ再生（何度も繰り返す）
２ 映像を再生するには
ａ） 映像ファイルを ダウロードし、index.htmlと同じ場所に置く。
フリー映像サイト NHKクリエイティブ Pexels
ｂ） 表示したい場所に <video src="ファイル名" controls > と記述する。
controls ： 開始・ストップ・音量など調整ボタンが表示される。
autoplay ： 自動実行される
loop ： ループ再生（何度も繰り返す）
【３】リンクをつける
文字やイラストなどの上をマウスでクリックしたり、タップすることによって、別のURLに移る機能をリンクという
１ リンクのつけ方
例１）トップページから、趣味のページ（ファイル名hobby.html）に飛ぶリンク
<a href = "hobby.html">趣味のページへ</a>
趣味のページへ
例２）私は園田学園女子大学に通っています。 で 「園田学園女子大学」に大学のホームページへのリンクをつける。
私は<a href = "https://www.sonoda-u.ac.jp">園田学園女子大学</a>に通っています。
私は園田学園女子大学に通っています。
１ リンクのつけ方
<a href = "リンク先のURL">リンクを張る文字</a>
ここで、<a は アンカー（碇）タグという。リンクが２つのURLを繋ぐもので、これが船と海底を繋ぐ碇と同じイメージで名づけられた。例１）トップページから、趣味のページ（ファイル名hobby.html）に飛ぶリンク
<a href = "hobby.html">趣味のページへ</a>
趣味のページへ
例２）私は園田学園女子大学に通っています。 で 「園田学園女子大学」に大学のホームページへのリンクをつける。
私は<a href = "https://www.sonoda-u.ac.jp">園田学園女子大学</a>に通っています。
私は園田学園女子大学に通っています。
【４】作成計画
「index.html」 を最初の目次として、他に３ページ以上作成する。
１ どんなページを作るか
簡単に考えつくものとして、「自己紹介」（例えばファイル名 introduction.html以下同様),「趣味」(hobby.html)
「部活動」(club.html),「地元](local.html),「好きな食べ物」(food.html)，「行きたい場所」(trip.html），
「将来の夢](dream.html), 「アルバイト」(job.html),「ファッション」（fashion.html） などから選ぶ
２ 共通のひな形ページを作る
ひな形ページを作成しておくと、統一したデザインになり、効率的に作成できる
【ひな形ページの例】
xドライブ 難波 基礎情報 Unit30関連 の main.css を 自分のZドライブ WWW にコピーする。
注 *2 このようにすると背景色を決定できる。 background-image とすると背景画像を入れることができる
注 *3 div や spam の指定場所のスタイルを書く。
注 *4 T0? の?は 1から４までの数字 あらかじめ設定したスタイルを使う。【６】参照
１ どんなページを作るか
簡単に考えつくものとして、「自己紹介」（例えばファイル名 introduction.html以下同様),「趣味」(hobby.html)
「部活動」(club.html),「地元](local.html),「好きな食べ物」(food.html)，「行きたい場所」(trip.html），
「将来の夢](dream.html), 「アルバイト」(job.html),「ファッション」（fashion.html） などから選ぶ
２ 共通のひな形ページを作る
ひな形ページを作成しておくと、統一したデザインになり、効率的に作成できる
【ひな形ページの例】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>○○のページ</title>
<link rel="stylesheet" type="text/css" href="main.css"> *1
<style>
body{background-color:(全体の背景色名);} *2
div.(){(スタイル);} *3
</style>
</head>
<body>
<div class = "T0?"> *4
ここにタイトル（私の趣味 など) を入れる。
</div>
<div class = "MainA">
（ここに本文を書く 改行は<br> を入れる
</div>
<div> ・・・ リンクの場所
<a href = "index.html">トップページに戻る</a>
</div>
<div class = "footer"> ・・・ 著作権表示
Copyright 2021,【自分の名前】
</div>
</body>
</html>
注 *1 あらかじめ用意されたスタイルシートを使う宣言。用意されたスタイルシートは<html>
<head>
<meta charset="utf-8"/>
<title>○○のページ</title>
<link rel="stylesheet" type="text/css" href="main.css"> *1
<style>
body{background-color:(全体の背景色名);} *2
div.(){(スタイル);} *3
</style>
</head>
<body>
<div class = "T0?"> *4
ここにタイトル（私の趣味 など) を入れる。
</div>
<div class = "MainA">
（ここに本文を書く 改行は<br> を入れる
</div>
<div> ・・・ リンクの場所
<a href = "index.html">トップページに戻る</a>
</div>
<div class = "footer"> ・・・ 著作権表示
Copyright 2021,【自分の名前】
</div>
</body>
</html>
xドライブ 難波 基礎情報 Unit30関連 の main.css を 自分のZドライブ WWW にコピーする。
注 *2 このようにすると背景色を決定できる。 background-image とすると背景画像を入れることができる
注 *3 div や spam の指定場所のスタイルを書く。
注 *4 T0? の?は 1から４までの数字 あらかじめ設定したスタイルを使う。【６】参照
【５】公開（Webサーバへのアップ)
本学にある、Ｗｅｂサーバ（「kaki」）に自分のコンピュータをネットワークを経由して接続する。
【接続手順】
１）ＰＣ を表示する
スタートメニュー → Windowsシステムツール → PC
２）コンピュータタブ から 「ネットワークドライブの割り当て」をクリック
３）① ドライブに R: を指定
② 指定されたフォルダー名は
\\kaki\ 自分のID（gxxxxxxx）＄
③ 入力が終わると 下部の 「完了」をクリック
【接続手順】
１）ＰＣ を表示する
スタートメニュー → Windowsシステムツール → PC
２）コンピュータタブ から 「ネットワークドライブの割り当て」をクリック
３）① ドライブに R: を指定
② 指定されたフォルダー名は
\\kaki\ 自分のID（gxxxxxxx）＄
③ 入力が終わると 下部の 「完了」をクリック
【６】あらかじめ用意したスタイルシート
１タイトルデザイン
【表示・変更方法】 <div class = "T0*" > で T0* の部分を変更する。 【class = "T01" のサンプル】
【スタイルシートの変更】
（例）T04 を見る
.T04 {border: solid 3px green; border-radius: 10px; background-color:plum; width:500px; margin-left: auto; margin-right: auto; text-align:center;}
○border：線を引く（線で囲む）[参考]スタイルシートリファレンスｂorder
線の種類 solid:一本線 double：二本線 groove：窪んだ立体線 ridge:隆起した立体線 dashed:破線 dotted:点線 inset：窪む outset：隆起
3px :線の太さ green:線の色 [参考] 色の名前
○border-radius:ボーダの角を丸める。10pxなどの数値は角丸の半径 [参考]スタイルシートリファレンスborder-radius:
○background-color：背景色 [参考] 色の名前
○width：横幅 縦の高さは height [参考]スタイルシートリファレンスWidth
○margin-left: auto; margin-right ：ボックス（四角の枠）をウィンドウの中央に配置 marginだけでもよい。 [参考]スタイルシートリファレンスmargin
○text-align:center：ボックス内の文字を中央揃え[参考]スタイルシートリファレンスｔext-align
T04から背景色がmistyrose で浮きあがっった線 文字の大きさ32pxの T05 を作る。
.T05 {border: ridge 5px green; border-radius: 10px; background-color:mistyrose; width:500px; margin: auto; text-align:center; font-size:32px;} <div class = "T05">これはT05です。</div>
【表示・変更方法】 <img src="ファイル名" class = "S**" > で S*** の部分を変更する。
【class = "S03" の画像】 横にスクロール
記述 例 <img src="chick.png" class = "S01" width=200 height =200>
【スタイルシートの変更】
（例）S03 を見る
.S03 {display :inline-block; padding-left: 100%; animation :S03Anime 3s linear infinite;} @keyframes S03Anime{ 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } 3 端から端までの時間 X を Yに変えると縦方向にスライド
0% と -100% を入れかえると 反対方向に移動。 ３文字デザイン
【表示・変更方法】 <span class = "F**" > で F*** の部分を変更する。
＊＊ は表示する文字
【スタイルシートの設定】main.css を編集する
基本の設定
.F01 {font-style: italic; font-weight:bold; font-size: 24px; font-family:serif; }
font-style: 斜体文字（italic） font-weight:太字(bold) font-size:文字の大きさ pxで指定 or xx-small、x-small、small、medium、large、x-large、xx-large で指定 font-family：フォントの指定 sans-serif（ゴシック体） serif（明朝体） のどちらか または固有も設定できる。
【表示・変更方法】 <div class = "T0*" > で T0* の部分を変更する。 【class = "T01" のサンプル】
これはサンプル T01 です
【class = "T02" のサンプル】これはサンプル T02 です
【class = "T03" のサンプル】これはサンプル T03 です
【class = "T04" のサンプル】これはサンプル T04 です
【スタイルシートの変更】
（例）T04 を見る
.T04 {border: solid 3px green; border-radius: 10px; background-color:plum; width:500px; margin-left: auto; margin-right: auto; text-align:center;}
○border：線を引く（線で囲む）[参考]スタイルシートリファレンスｂorder
線の種類 solid:一本線 double：二本線 groove：窪んだ立体線 ridge:隆起した立体線 dashed:破線 dotted:点線 inset：窪む outset：隆起
3px :線の太さ green:線の色 [参考] 色の名前
○border-radius:ボーダの角を丸める。10pxなどの数値は角丸の半径 [参考]スタイルシートリファレンスborder-radius:
○background-color：背景色 [参考] 色の名前
○width：横幅 縦の高さは height [参考]スタイルシートリファレンスWidth
○margin-left: auto; margin-right ：ボックス（四角の枠）をウィンドウの中央に配置 marginだけでもよい。 [参考]スタイルシートリファレンスmargin
○text-align:center：ボックス内の文字を中央揃え[参考]スタイルシートリファレンスｔext-align
T04から背景色がmistyrose で浮きあがっった線 文字の大きさ32pxの T05 を作る。
.T05 {border: ridge 5px green; border-radius: 10px; background-color:mistyrose; width:500px; margin: auto; text-align:center; font-size:32px;} <div class = "T05">これはT05です。</div>
これはT05です。
２写真等デザイン【表示・変更方法】 <img src="ファイル名" class = "S**" > で S*** の部分を変更する。
| 【class = "S11" の画像】 |
【class = "S12" の画像】 |
【class = "S13" の画像】 |
【class = "S14" の画像】 |
| 【class = "S01" の画像】 |
【class = "S02" の画像】 |
【class = "S05" の画像】 |
【class = "S04" の画像】 二つの画像のスライド  |
記述 例 <img src="chick.png" class = "S01" width=200 height =200>
【スタイルシートの変更】
（例）S03 を見る
.S03 {display :inline-block; padding-left: 100%; animation :S03Anime 3s linear infinite;} @keyframes S03Anime{ 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } 3 端から端までの時間 X を Yに変えると縦方向にスライド
0% と -100% を入れかえると 反対方向に移動。 ３文字デザイン
【表示・変更方法】 <span class = "F**" > で F*** の部分を変更する。
| 【囲み文字】 <span class="F11">＊＊</span> Ｆ１１サンプル |
【影文字】 <span class="F12">＊＊</span> Ｆ１２サンプル |
【縁取り】 <span class="F13">＊＊</span> Ｆ１３サンプル |
【浮き上がった文字】 <span class="F14">＊＊</span> Ｆ１４サンプル |
| 【下線】 <span class="F15">＊＊</span> Ｆ１５サンプル |
【マーカ】 <span class="F16">＊＊</span> Ｆ１６サンプル |
【反転文字】 <span class="F17">＊＊</span> Ｆ１７サンプル |
【点滅】 <span class="F21">＊＊</span> Ｆ２１サンプル |
| 【横軸回転】 <span class="F22">＊＊</span> Ｆ２２サンプル |
【縦軸回転】 <span class="F23">＊＊</span> Ｆ２３サンプル |
【３Ｄ回転】 <span class="F24">＊＊</span> Ｆ２４サンプル |
【横移動】 <span class="F25">＊＊</span> Ｆ２５サンプル |
| 【マーカ】 <span class="F26">＊＊<span></span></span> Ｆ２６サンプル |
【踊り】 <span class="F28"><span>＊</span><span>＊</span></span> Ｆ２８サンプル |
||
【スタイルシートの設定】main.css を編集する
基本の設定
.F01 {font-style: italic; font-weight:bold; font-size: 24px; font-family:serif; }
font-style: 斜体文字（italic） font-weight:太字(bold) font-size:文字の大きさ pxで指定 or xx-small、x-small、small、medium、large、x-large、xx-large で指定 font-family：フォントの指定 sans-serif（ゴシック体） serif（明朝体） のどちらか または固有も設定できる。
【関連資料】