hc_5.md

これまでに HTML、CSS、jQuery を学習して来ました。
第 5 回では、実際の web ページを構成して行きましょう。
作成するのは、ポートフォリオサイトです。

● ポートフォリオとは

「どんなサイトを作れるのか」「どんなスキルを持っているのか」について、
クライアントに分かりやすく伝える資料や作品集の事を指します。

● ポートフォリオサイトの作成

サイトのテーマは「個人のポートフォリオ」です。
具体的には「Top」「About」「Work」「Contact」の
4 ページ構成を目標とします。

● ディレクトリ構造

Web サイトを作成するには、 html、CSS、Javascript の
ファイルと、画像を適切な場所に保存する必要があります。
この時、ディレクトリ構造が用いられます。これは「フォルダ」
と「ファイル」の関係と同じで、Web ページを構成する際は
ファイルの場所をきちんと指定する必要があります。

● 絶対パスと相対パス

ディレクトリ構造内の位置を指定する方法として、「絶対パス」と
「相対パス」があります。フォルダを開いた際に上の方に出てくる
アドレスが絶対パスです。相対パスは、あるファイルまたは
フォルダからの位置関係で記述します。「../」と記述すると
1 つ上の階層を示し、ファイルまたはフォルダの名前を「/」で
区切る事で目的のディレクトリを指定します。

● エディタの操作

Visual Studio Code とは

プログラミングに使用するソフトには「エディタ」と「IDE(総合環境)」が
あります。今回は Microsoft 社製のエディタ「Visual Studio Code」を
使って行きます。

● top.html, style.css, jquery.js ファイルの作成

以下の演習を実施し、各フォルダにファイルを作成しましょう。

・Visual Studio Code の左上にあるファイル(F)をクリック
・フォルダを開くをクリック
・デスクトップに保存した Portfolio フォルダを選択
・左のメニューから HTML フォルダをクリック
・右クリックしてから「新しいファイル」をクリック
・テキストボックスに top.html を入力して Enter

・同様に、CSS フォルダには style.css、
・JS フォルダには jquery.js ファイルを作成する。

● top.html のコーディング

次に、top.html をコーディングして行きましょう。
CSS は link タグ、jQuery は script タグで、ファイルの
ディレクトリを指定します。また、jQuery は CDN(外部の
サーバからファイルを呼び出す方法)を利用します。

以下のコードを記述しましょう。この時、
(1) href="" 内に style.cssファイルのパス(相対パス)
(2) src="" 内に jQueryサーバーURL： Google Hosted Libraries
※ 上記リンクへ移動した後、ページ内の Libraries 配下にある jQueryサーバーURLをコピーする。
(3) src="" 内に jquery.jsファイルのパス(相対パス)
を埋める事。

[html]

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />

    <!-- (1) link:css + Tabキー → href="" の中を書き換え -->
    <link rel="stylesheet" href="" />

    <!-- (2) jQueryのCDN-->
    <script src=""></script>

    <!-- (3) jqueryファイルのリンク-->
    <script type="text/javascript" src=""></script>

    <title>TOP Page</title>
  </head>
  <body>
    <p>test</p>
  </body>
</html>

● html ファイルの複製

先程は Visual Studio Code からファイルを作成しましたが、
今回は top.html ファイルをコピーして 3 ファイルを作成します。
(html などの基本タグ、style.css へのリンク、jquery.js
へのリンクが各 html ファイルに必要なためです)

●style.css と jquery.js ファイルのテストコーディング

html ファイルと CSS ファイル及び JavaScript ファイルが
リンクされているかを確認しましょう。

以下のコードを CSSファイルと JSファイルにそれぞれ記述し、結果を確認しましょう。
(top.htmlファイルをChromeで開くと結果を表示できます)

[CSS]

p {
  color: red;
}

[Javascript]

$(function({
$("p").css("font-size", "50px");
}));

2. HTML ファイルの作成(2)

前の章では各ファイルの大枠を作成しました。この章では、
TOP ページと About ページをコーディングして行きます。

● TOP ページのコーディング

TOP ページでは、別のページへのリンクを作成します。構成は以下の通りです。

上記を表示させ、更にリンク先のディレクトリを連携させます。
それでは、演習を進めましょう。

以下のコードを top.htmlファイルの body内と、style.cssファイルに記述しましょう。
また、href="" 内には第一章で作成した各htmlファイルのディレクトリを記入します。

[html]

<body>
  <div class="container">
    <ul class="about box">
      <li class="menu"><a href="" target="_blank">About</a></li>
      <li class="menu"><a href="" target="_blank">Works</a></li>
      <li class="menu"><a href="" target="_blank">Contact</a></li>
    </ul>
  </div>
</body>

[CSS]

body {
  /*目に優しい白系の配色*/
  background-color: ghostwhite;
}
.container {
  /*FlexBoxでコンテンツを中央配置する*/
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul.about {
  /*リストの中点を非表示にする*/
  list-style: none;
  font-size: 40px;
}
li.menu {
  padding: 30px;
}

● About ページのコーディング

about ページでは、自己紹介の内容を記述して行きます。
自分の名前や所属団体、仕事内容やパーソナル情報を
記載していきます。

以下のコードを about.htmlファイルの body内と、style.cssファイルに記述しましょう。
また、imgタグ内の src=""には好きな画像のパスを、名前・仕事・趣味は
自分のプロフィールを入力しましょう。
(今回はIMGフォルダにいくつかサンプルを保存しています)

[html]

<body>
  <img class="about_img" src="" alt="introduce" />
  <ul class="about_ul">
    <li class="about">名前：</li>
    <li class="about">会社：計装エンジニアリング</li>
    <li class="about">仕事：</li>
    <li class="about">趣味：</li>
  </ul>
</body>

[CSS]

].about_img {
  text-align: center;
  width: 400px;
  margin-bottom: 20px;
}
.about {
  list-style: none;
  max-width: 400px;
  text-align: left;
  margin: 10px auto;
  font-size: 25px;
}
.content {
  max-width: 90%;
  text-align: center;
}

3. HTML ファイルの作成(3)

この章では、Works ページと Contact ページをコーディングして行きます。

● Works ページのコーディング

works ページでは、画像をクリックするとコンテンツが表示される
「モーダルウィンドウ」を設計します。早速、演習に進みましょう。

次のコードを works.html の bodyタグ内に記述しましょう。
また、div class="modal__content" 配下の pタグ内に、
自身の経歴や職歴を記述しましょう。
(pタグはクリック後に表示されるコンテンツです)

[html]

<body>
  <div class="container content">
    <a class="js-modal-open" data-target="modal01">
      <div class="box1"><img src="../img/idea.png" alt="" /></div>
    </a>
  </div>

  <div id="modal01" class="modal js-modal">
    <div class="modal__bg js-modal-close"></div>

    <div class="modal__content">
      <p></p>
      <a class="js-modal-close" href="">閉じる</a>
    </div>
  </div>
</body>

[CSS]

.box1 {
  /*画像の枠線*/
  border: 1px solid green;
}

.container {
  /*グリッドレイアウトの指定。今回は設定なし*/
  display: grid;
}

.modal {
  /*モーダルウィンドウの全体設定*/
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal__bg {
  /*モーダルウィンドの背景設定*/
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content {
  /*モーダルウィンドウ内のコンテンツ*/
  background: #fff;
  left: 50%;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

●Contact ページのコーディング

Contact ページの課題は「メールフォーム」の作成です。
過去に学習した内容を思い出しながら、以下の演習を進めましょう。

次のコードを記述し、メールフォームを作成しましょう。
(CSSのプロパティについては、コピー&ペーストでもOKです)

[html]

<body>
  <!--画像の設置-->
  <div class="content">
    <img src="../img/mail.png" class="contact_img" alt="" />
  </div>

  <!--formタグ配下に各フォームを記述-->
  <!--inputタグのclass属性とname属性を揃える-->
  <form>
    <!--名前の入力欄-->
    <div class="item">
      <label class="label">お名前</label>
      <input class="inputs" type="text" name="name" />
    </div>

    <!--アドレスの入力欄-->
    <div class="item">
      <label class="label">メールアドレス</label>
      <input class="inputs" type="email" name="email" />
    </div>

    <!--メッセージの入力欄-->
    <div class="item">
      <label class="label">メッセージ</label>
      <textarea class="inputs"></textarea>
    </div>

    <!--送信ボタン-->
    <div class="btn-area">
      <input type="submit" value="送信する" />
    </div>
  </form>
</body>

[CSS]

/* 画像のプロパティ */
.contact_img {
  text-align: center;
  width: 300px;
}

/* フォーム全体のサイズと位置 */
form {
  width: 460px;
  margin: 0 auto;
}

/* ボタン以外のフォームのプロパティ */
.item {
  /*要素がはみ出た時に非表示となる*/
  overflow: hidden;
  margin-bottom: 20px;
}

/*ラベルのプロパティ*/
.label {
  float: left;
  margin-right: 20px;
  width: 135px;
  border-left: solid 3px green;
  padding-left: 10px;
}

/*入力欄の位置と幅*/
.inputs {
  float: left;
  width: 300px;
}

/*名前とアドレス入力欄の見た目*/
input[type="text"],
input[type="email"] {
  border: solid 1px #aaa;
  border-radius: 5px;
  padding: 10px;
  font-size: 15px;
}

/*メッセージ入力欄の見た目*/
textarea {
  border: solid 1px #aaa;
  border-radius: 5px;
  padding: 10px;
  height: 160px;
  font-size: 15px;
}

/*ボタンのプロパティ*/
.btn-area {
  text-align: center;
}

/*ボタンのプロパティ*/
input[type="submit"] {
  background: green;
  border: none;
  color: white;
  font-size: 17px;
  font-weight: bold;
  padding: 10px 25px;
  border-radius: 0%;
  margin: 0 5px;
  cursor: pointer;
}

4. jQuery のコーディング

◆Work ページの jQuery

このページでは、モーダルウィンドウを設定する jQuery を
記述して行きます。少し複雑なので、ゆっくり理解して行きましょう。

モーダルウィンドウとは

モーダルウィンドウとは、リンクや画像などのコンテンツを
クリックした際に、前面に出現するウィンドウです。
別のページに遷移する事なく、新たなコンテンツを表示できます。

モーダルウィンドウの機能を実装するためには、以下の条件が必要です。
(1) クリックすると、新しい画面が表示される。
(2) 背景に少し透明度があり、コンテンツが表示されている。
(3) ボタンまたはウインドウの外をクリックすると消える。

モーダルウィンドウの実装

上記のしくみを実装するためには、次のような機能が必要です。
(1) 通常は非表示の画面(レイヤー)が、クリックで表示される
(2) レイヤー上のコンテンツを html と css に記述する
(3) ボタンと背景をクリックすると、レイヤーが再び非表示になる

以下のコードを jquery.jsファイルに記述しましょう。
(return falseの説明は、こちらが分かりやすいです)

//works
$(function () {
  //js-modal-open属性のオブジェクトに対して、
  //クリック時にフェードインさせる機能を付与
  $(".js-modal-open").each(function () {
    $(this).on("click", function () {
      var target = $(this).data("target");
      var modal = document.getElementById(target);
      $(modal).fadeIn();

      //イベントを別の要素に渡す前に終了
      return false;
    });
  });

  //js-modal-close属性のオブジェクトに対して、
  //クリック時に js-modal属性を持つコンテンツを
  //フェードアウトさせる機能を付与
  $(".js-modal-close").on("click", function () {
    $(".js-modal").fadeOut();

    //イベントを別の要素に渡す前に終了
    return false;
  });
});

1. HTML ファイルの作成(1)

● ポートフォリオとは

● ポートフォリオサイトの作成

● ディレクトリ構造

● 絶対パスと相対パス

● エディタの操作

Visual Studio Code とは

● top.html, style.css, jquery.js ファイルの作成

● top.html のコーディング

● html ファイルの複製

●style.css と jquery.js ファイルのテストコーディング

2. HTML ファイルの作成(2)

● TOP ページのコーディング

● About ページのコーディング

3. HTML ファイルの作成(3)

● Works ページのコーディング

●Contact ページのコーディング

4. jQuery のコーディング

◆Work ページの jQuery

モーダルウィンドウとは

モーダルウィンドウの実装