§5 画像表示・リンク・装飾
【1】イラストや写真などの表示
  イラストや写真を表示するには【img】 
   a) 写真・イラストのファイルを 用意する。
   フリーイラストサイト
       いらすとや  イラストレイン  ガーリー素材(かわいいイラスト) Print Out Factory(総合)  みさきのイラスト素材
   フリー写真サイト
       ぱくたそ  Pixabay  GIRLY DROP(美容・かわいい素材)  Foodiesfeed (食物)      <検索> タダピク   O-DAN


   b) ファイルを「index.html」と同じ場所に保存する。その際、ファイル名を拡張子(.以下)を含めて確認する。
    
          
    例)「いらすとや」の「季節の祝日・行事のイラスト」→「お正月のイラスト」→「バンザイをする虎のイラスト(寅年)」
       のファイル名は 「eto_tora_banzai.png」
       画像の拡張子には、 jpeg/jpg/png/gif/bmp などがある。

   c) 表示するには「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>
     
あああああああ
いいいいいいい
ううううううう
【2】音楽・映像などの表示
 音楽を演奏するには
   a) 音楽ファイルを  ダウロードし、index.htmlと同じ場所に置く。
    フリー音楽サイト         甘茶の音楽工房  H/MIX GALLERY  DOVA-SYNDROME
   b) 「html」の表示したい場所に  <audio  src="ファイル名" controls > と記述する。
        controls : 開始・ストップ・音量など調整ボタンが表示される。
        autoplay  : 自動実行される
        loop   : ループ再生(何度も繰り返す)

 映像を再生するには
   a) 映像ファイルを ダウロードし、index.htmlと同じ場所に置く。
    フリー映像サイト         NHKクリエイティブ     Pexels
   b) 表示したい場所に  <video  src="ファイル名" controls >  と記述する。
        controls : 開始・ストップ・音量など調整ボタンが表示される。
        autoplay  : 自動実行される
        loop   : ループ再生(何度も繰り返す)
【3】リンクをつける
     文字やイラストなどの上をマウスでクリックしたり、タップすることによって、別のURLに移る機能をリンクという
 リンクのつけ方
       
<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ページ以上作成する。
 どんなページを作るか
    簡単に考えつくものとして、「自己紹介」(例えばファイル名 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 あらかじめ用意されたスタイルシートを使う宣言。用意されたスタイルシートは
    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】あらかじめ用意したスタイルシート
タイトルデザイン
  【表示・変更方法】 <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です。

写真等デザイン
  【表示・変更方法】 <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: translateX(0%); } 100% { transform: translateX(-100%); } }

       3 端から端までの時間   X を Yに変えると縦方向にスライド
       0% と -100% を入れかえると 反対方向に移動。

文字デザイン
  【表示・変更方法】 <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>

 
                     ** は表示する文字

  【スタイルシートの設定】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(明朝体) のどちらか または固有も設定できる。

【関連資料】

  【HTML&CSS マニュアルサンプル】     

HTMLクイックリファレンス    TAG index    MDNWeb Docs チュートリアル

<サンプル>

   CMAN Webパーツ  (かなり参考にしました)




      次の内容  ビジネス学科以外(総健・食栄・看護)の人


              ビジネス学科の人