演習用ファイル｜Webデザイン

演習用ファイル｜Webデザイン

  • 投稿カテゴリー:Webデザイン
  • 投稿の最終変更日:02/16/2023

第2回

Webブラウザの役割を確認する

第3回

【課題】CSSの役割を理解

html サンプルファイルに css の情報を読み込むための設定を行う

  • Google Chromeと、CotEditor の両方でサンプルファイルを開く
  • html サンプルファイルのに以下を記述
  • サンプルファイルを保存
  • Google Chrome で再読み込みを行い、変化を確認

<meta charset=”UTF-8″>
<style type=”text/css”>
.title {
      font-family: lithos-pro, sans-serif;
      font-size: 24px;
      background-color: #006699;
      padding: 25px 36px;
      }
</style>
<title>第２章HTMLサンプル</title>
<body>
<section>
<h1 class=”title”>CONCEPT</h1>

【課題】画像の表示を体験

  • タイトル　CONCEPT の次の行に、以下をコピペし、Webブラウザでの表示を確認

<img src=”http://www.branslegay.com/inagaki/classes/MATERIALS/material_web/pict_sample.jpg”>

【課題】地図の埋め込みを体験する

  • Googleマップで、「城西国際大学以外の場所」を表示する
  • 左バーの「共有」ボタンをクリック　＞　ダイアログから「地図を埋め込む」を選択
  • 地図のサイズ「中」を選択して、「HTML」コピーをクリック
  • 店を紹介する文章の次の行に、コピーした地図の埋め込み情報をペースト
  • サンプルファイルを保存　
  •  Google Chrome で再読み込みを行い、変化を確認

        第6回

        【課題】学籍番号.htmlファイルにタグを入力

        • 「自然栽培の野菜」にリンクは貼る、「自然栽培の野菜」という文字を以下に書き換える

        文字コード指定を間違えたサイトへアクセス

        • 以下のWebページは、文字コードを UTF-8 に設定しているが、HTML の記述は、Shift-JIS というように、間違えて指定している

        第7回

          metaタグの重要性｜head要素　meta property=”og:の例

          • meta property=”og:title” meta property=”og:type” というように使用
          • 以下、meta property=”og:の例、右クリックでリンク先を保存し、head要素を確認すること

            ogt サンプル

                ボックスモデルについて

                boxモデルサンプル

                CSSと2通りのCSS設定（実際は3通り）

                【課題】準備

                • 学籍番号.htmlファイルをブラウザで確認
                • 学籍番号.htmlファイルのhead要素からスタイルを削除
                  以下を削除する

                ）

                • さらに　h1を以下に書き換える

                • 学籍番号.htmlをブラウザで確認

                【課題】htmlファイル内にCSSを記述

                • 準備｜head 要素内に スタイルを記述

                •  styleタブ内の以下を記述

                • 学籍番号.htmlをブラウザで確認

                    【課題】外部ファイルにCSSを記述

                    • 準備｜学籍番号.htmlのhead 要素内に外部CSSファイルへのリンクを記述
                      なお、href=”” の””内は、以下の例に習い　自分の学籍番号.css とする

                    • CotEditor で 新規ファイルを作成し、「学籍番号.htmlと同じ場所に」
                      学籍番号.css というファイル名をつけ保存（先の自分の学籍番号.cssと同じファイル名に！）
                    • 学籍番号.cssファイルに以下を記述

                    第8章

                    【課題】外部CSSファイルの指定

                    •  学籍番号.htmlをブラウザで確認
                    • CSSファイル内の、h1の要素（margin padding等の数値を、自分の好みのデザインとなるように変更する） 
                    •  学籍番号.htmlをブラウザで確認

                      【課題】色を変更する

                      • 以下のwebカラーを参照して、h1の背景色を自分の好きな色に変更する
                      • HTMLカラー 

                      第９回

                        ビットマップ画像とベクター画像

                        【課題】ローカルの画像を表示させる

                        • 以下のサンプルファイルを、右クリックで画像を保存で、ダウンロードし、
                          学籍番号.htmlファイルと同じ場所に移動 
                        • サンプルファイル pict_sample2.png
                        • 学籍番号.htmlファイルの、「bodyタグの次の行」に以下のタグを追加し、
                          ローカル画像を表示
                          <img src=”pict_sample2.png”>

                        CanvasとWeb3Dの実例

                        【課題】フォントとWebフォントの指定

                        •  学籍番号.cssファイルに、以下を追加し、Webサイトのフォントを指定

                        body {font-family: ‘Avenir’,’Helvetica Neue’,’Helvetica’,’Arial’,’Hiragino Sans’,’ヒラギノ角ゴシック’,YuGothic,’Yu Gothic’,’メイリオ’, Meiryo,’ＭＳ Ｐゴシック’,’MS PGothic’ 
                        }

                          【課題】アイコンフォントの指定（Google Material Icons）

                          • 学籍番号.htmlファイルのheadタグ内に、以下を追加し、アイコンフォントの表示準備

                            • <link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”></link>

                          • 学籍番号.htmlファイル、先頭の画像表示の次の行に、以下を追加

                            • <i class=”material-icons”>face</i> 

                          参考資料

                          【課題】動画のコードを埋め込む

                          HTML&CSS課題の提出

                            •  「学籍番号.html ファイル」と「学籍番号.css」ファイルの２つのファイルを、以下をクリックして、アップロードする　

                                第10-11回

                                HTMLのフォーム要素

                                • 「フォームのサンプルファイル」をダウンロードして、展開
                                • htmlファイル内のコードを見てみる
                                • Webブラウザで、htmlファイルを読み込み、フォームに記述し送信する
                                • getだとどのようにフォームデータが送信されるのかを確認
                                • get を post に書き換え、再読み込みして再度送信してみる

                                簡単なJavaScriptのプログラミング

                                JavaScriptライブラリの使用例

                                •  音声ファイルを再生してみる
                                • htmlファイル内の音声再生部分のコード、並びにaudio.min.js ファイルをエディタ開き、コードを覗いてみる 
                                • 可能であれば、別のmp3ファイルを用意し、htmlファイル内のmp3のファイル名を書き換えて、リロードした後に、Web上で再生してみる

                                14回

                                   

                                  タグ: ,