文字やイラストなどの上をマウスでクリックしたり、タップすることによって、別のURLに移る機能をリンクという
1 リンクのつけ方
<a href = "リンク先のURL">リンクを張る文字</a>
ここで、<a は アンカー(碇)タグという。リンクが2つのURLを繋ぐもので、これが船と海底を繋ぐ碇と同じイメージで名づけられた。
例1)トップページから、趣味のページ(ファイル名hobby.html)に飛ぶリンク
<a href = "hobby.html">趣味のページへ</a>
趣味のページへ
例2)私は園田学園女子大学に通っています。 で 「園田学園女子大学」に大学のホームページへのリンクをつける。
私は<a href = "https://www.sonoda-u.ac.jp">園田学園女子大学</a>に通っています。
私は
園田学園女子大学に通っています。
【4】作成計画
「index.html」 を最初の目次として、他に3ページ以上作成する。
1 どんなページを作るか
簡単に考えつくものとして、「自己紹介」(例えばファイル名 introduction.html以下同様),「趣味」(hobby.html)
「部活動」(club.html),「地元](local.html),「好きな食べ物」(food.html),「行きたい場所」(trip.html),
「将来の夢](dream.html), 「アルバイト」(job.html),「ファッション」(fashion.html) などから選ぶ
2 共通のひな形ページを作る
ひな形ページを作成しておくと、統一したデザインになり、効率的に作成できる
【ひな形ページの例】
<!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 あらかじめ用意されたスタイルシートを使う宣言。用意されたスタイルシートは
xドライブ 難波 基礎情報 Unit30関連 の main.css を 自分のZドライブ WWW にコピーする。
注 *2 このようにすると背景色を決定できる。 background-image とすると背景画像を入れることができる
注 *3 div や spam の指定場所のスタイルを書く。
注 *4 T0? の?は 1から4までの数字 あらかじめ設定したスタイルを使う。【6】参照
【5】公開(Webサーバへのアップ)
本学にある、Webサーバ(「kaki」)に自分のコンピュータをネットワークを経由して接続する。
【接続手順】
1)PC を表示する
スタートメニュー → Windowsシステムツール → PC
2)コンピュータタブ から 「ネットワークドライブの割り当て」をクリック
3)① ドライブに R: を指定
② 指定されたフォルダー名は
\\kaki\ 自分のID(gxxxxxxx)$
③ 入力が終わると 下部の 「完了」をクリック
【6】あらかじめ用意したスタイルシート
1タイトルデザイン
【表示・変更方法】 <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:線を引く(線で囲む)[参考]
スタイルシートリファレンスborder
線の種類 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:ボックス内の文字を中央揃え[参考]
スタイルシートリファレンスtext-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です。
2写真等デザイン
【表示・変更方法】 <img src="ファイル名" class =
"S**" > で S*** の部分を変更する。
【class = "S11" の画像】  |
【class = "S12" の画像】  |
【class = "S13" の画像】  |
【class = "S14" の画像】  |
【class = "S01" の画像】  |
【class = "S02" の画像】  |
【class = "S05" の画像】  |
【class = "S04" の画像】 二つの画像のスライド
|
【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: translate
X(
0%); } 100% { transform: translate
X(
-100%); } }
3 端から端までの時間
X を Yに変えると縦方向にスライド
0% と
-100% を入れかえると 反対方向に移動。
3文字デザイン
【表示・変更方法】 <span class =
"F**" > で F*** の部分を変更する。
【囲み文字】 <span class="F11">**</span>
F11サンプル |
【影文字】 <span class="F12">**</span>
F12サンプル |
【縁取り】 <span class="F13">**</span>
F13サンプル |
【浮き上がった文字】 <span class="F14">**</span>
F14サンプル |
【下線】 <span class="F15">**</span>
F15サンプル |
【マーカ】 <span class="F16">**</span>
F16サンプル |
【反転文字】 <span class="F17">**</span>
F17サンプル |
【点滅】 <span class="F21">**</span>
F21サンプル |
【横軸回転】 <span class="F22">**</span>
F22サンプル |
【縦軸回転】 <span class="F23">**</span>
F23サンプル |
【3D回転】 <span class="F24">**</span>
F24サンプル |
【横移動】 <span class="F25">**</span>
F25サンプル |
【マーカ】 <span class="F26">**<span></span></span>
F26サンプル |
【踊り】 <span class="F28"><span>*</span><span>*</span></span>
F28サンプル |
** は表示する文字
【スタイルシートの設定】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(明朝体) のどちらか または固有も設定できる。
【関連資料】