ホームページの作り方講座

解説動画

STEP1: 何を書くかを決めよう。

①ホームページの名前
②プロフィールに記載する内容
③好きなものを紹介するページの内容

① ホームページの名前

好きな名前をつけましょう。

② プロフィールに記載する内容

項目を挙げてみよう！

例）

名前
プロフィール写真
出身地
学校
学年
クラス
コース
誕生日
血液型
星座
趣味
目標
好きな漫画、好きな映画、好きな〇〇…

③ 好きなものを紹介するページの内容

今ハマっているもの、みんなに知ってもらいたいもの一番内容が書けそうなものを選びましょう。

なかった場合、例えばクラーク高校のことやコース授業のことでもOKです。

STEP2: HTMLファイルを作成する。

提出用のフォルダに、index.htmlを作成。

そのファイルをvisual studio codeで開く。

■開く方法：

visual studio codeを立ち上げる。　→　xxx_xxx.htmlファイルをドラッグ&ドロップする
xxx_xxx.htmlファイルの上で右クリック →　「プログラムから開く」　→ visual studio codeを選択

STEP3: HTMLのレイアウトを決める

ホームページ名を見出しタグ１
サブの項目を見出しタグ２
プロフィール項目には、table, list, グリッドシステムのどれを使うか？
好きな〇〇には、table, list, グリッドシステムのどれを使うか？
好きなものページへのリンクを作成。見た目はどうする？

<html>
<head>
</head>
<body>
<h1>ホームページ名</h1>
<p>ホームページの説明xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<div class="container">
  <h2>私のプロフィール</h2>
  <table>
    <tr><th>名前</th><td>クラーク　太郎</td></tr>
    <tr><th>写真</th><td><img src="" /></td></tr>
    <tr><th>出身地</th><td>東京都板橋区</td></tr>
    <tr><th>学校</th><td>クラーク記念国際高等学校 NEXT TOKYO</td></tr>
    <tr><th>学年</th><td>１</td></tr>
    <tr><th>クラス</th><td>5組</td></tr>
    <tr><th>コース</th><td>〇〇〇〇コース</td></tr>
    <tr><th>誕生日</th><td>20XX-XX-XX</td></tr>
    <tr><th>血液型</th><td>X型</td></tr>
    <tr><th>星座</th><td>〇〇座</td></tr>
    <tr><th>趣味</th><td>読書、勉強、ゲーム</td></tr>
    <tr><th>今年の目標</th><td>xxxxxxxxxxx</td></tr>
  </table>
  <h2>私の好きな〇〇シリーズ</h2>
  <ul>
    <li>私の好きな映画： xxxxxxxxx</li>
    <li>私の好きな漫画： xxxxxxxxx</li>
    <li>私の好きな音楽： xxxxxxxxx</li>
    <li>私の好きなゲーム： xxxxxxxxx</li>
    <li>私の好きな言葉： xxxxxxxxx</li>
    <li>私の尊敬する人： xxxxxxxxx</li>
  </ul>
  <h2>私の好きなものの紹介</h2>
  <div class="row">
    <div class="col-sm-4">
      <a href="#">私の好きな漫画の紹介</a>
    </div>
    <div class="col-sm-4">
      <a href="#">私の好きなゲームの紹介</a>
    </div>
    <div class="col-sm-4">
      <a href="#">私のおすすめコンビニスイーツ ベスト３</a>
    </div>
  </div>
</div>
</body>
</html>

ホームページ名

h1タグで作成し、pタグでホームページのメッセージを記載

<h1>ホームページ名</h1>
<p>ホームページの説明xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

見出しを作成

  <h2>私のプロフィール</h2>
  <h2>私の好きな〇〇シリーズ</h2>
  <h2>私の好きなものの紹介</h2>

プロフィールを表示

tableタグの例

  <table>
    <tr><th>名前</th><td>クラーク　太郎</td></tr>
    <tr><th>写真</th><td><img src="" /></td></tr>
    <tr><th>出身地</th><td>東京都板橋区</td></tr>
    <tr><th>学校</th><td>クラーク記念国際高等学校 NEXT TOKYO</td></tr>
    <tr><th>学年</th><td>１</td></tr>
    <tr><th>クラス</th><td>5組</td></tr>
    <tr><th>コース</th><td>〇〇〇〇コース</td></tr>
    <tr><th>誕生日</th><td>20XX-XX-XX</td></tr>
    <tr><th>血液型</th><td>X型</td></tr>
    <tr><th>星座</th><td>〇〇座</td></tr>
    <tr><th>趣味</th><td>読書、勉強、ゲーム</td></tr>
    <tr><th>今年の目標</th><td>xxxxxxxxxxx</td></tr>
  </table>

ulタグの例

  <ul>
    <li>私の好きな映画： xxxxxxxxx</li>
    <li>私の好きな漫画： xxxxxxxxx</li>
    <li>私の好きな音楽： xxxxxxxxx</li>
    <li>私の好きなゲーム： xxxxxxxxx</li>
    <li>私の好きな言葉： xxxxxxxxx</li>
    <li>私の尊敬する人： xxxxxxxxx</li>
  </ul>

好きなものの紹介ページ

グリッドシステムの使い方の例

  <div class="row">
    <div class="col-sm-4">
      <a href="#">私の好きな漫画の紹介</a>
    </div>
    <div class="col-sm-4">
      <a href="#">私の好きなゲームの紹介</a>
    </div>
    <div class="col-sm-4">
      <a href="#">私のおすすめコンビニスイーツ ベスト３</a>
    </div>
  </div>

STEP3: 画像を表示させよう。

提出用のフォルダxxxx_xxxの中に、画像ファイルを入れます。

imgタグのsrc属性に画像のファイル名を入れる。

<img src="xxxxxxx.png"/>

サンプル画像ダウンロード

STEP4: リンク先のページを作成しよう。

提出用のフォルダxxxx_xxxの中に、htmlファイルを作成します。

例）manga.html, game.html, sweets.html

aタグのhref属性にファイル名をいれる

<a href="manga.html">私の好きな漫画の紹介</a>

STEP5: レスポンシブにしよう。

Bootstrapのおまじないを入れる。

① HEADタグの中

<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

② bodyタグの閉じタグのすぐ上

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

paizaや講義で習ったbootstrapをclass=”xxxxx”という形で入れてみよう。

詳しくは以下の講義ページで

エクストリームbootstrap1の講義ページ

STEP6: ナビゲーションバーをつけてみよう。

ナビゲーションバーから好きなものを選んでみよう。

詳しくは、以下の講義ページで。

エクストリームbootstrap2の講義ページ

STEP7: CSSでデザインを整えてみよう。

headタグの中に、styleタグを追加して、cssで背景や文字の色、余白を変えてみよう。

<style>
  h1 {
    background-color: #333333;
    color: #ffffff;
  }
  body {
    background-color: #ffeeee;
  }
  h2 {
      margin: 30px;
      color: blue;
  }
</style>