Homepage

HTML、CSS、およびJavaScriptを使用して簡単なホームページを作成します。

背景

インターネットは信じられないようなことを可能にしました。検索エンジンを使って、思いつくものをすべて調べたり、世界中の友人や家族と連絡を取ったり、ゲームをしたり、授業を受けたり、その他たくさんのことができます。しかし、私たちが訪れる可能性のあるページのほとんどは、3つのコア言語で構築されており、それぞれが少しずつ異なる目的を果たしていることがわかりました。

  1. HTML (HyperText Markup Language) は、Webサイトのコンテンツを記述するために使用します。
  2. CSS (Cascading Style Sheets) は、Webサイトのレイアウトを記述するために使用されます。
  3. JavaScriptは、Webサイトをインタラクティブで動的にするために使用されます。

自分自身や好きな趣味や課外活動など、興味のあることを簡単に紹介するホームページを作りましょう。

始め方

ここでは、この問題の配布コード (スターターコード) をCS50 IDEにダウンロードする方法を説明します。CS50 IDEにログインし、ターミナルウィンドウで次の各コマンドを実行します。

  • cd ~ (または引数なしのcd) を実行して、ホームディレクトリにいることを確認します。
  • mkdir pset8を実行して、pset8というディレクトリを作成 (新規作成) します。
  • cd pset8を実行して、そのディレクトリに移動 (ディレクトリを開く) します。
  • wget wget http://cdn.cs50.net/2020/fall/psets/8/homepage/homepage.zipを実行して、この問題のディストリビューションを含む (圧縮された) ZIPファイルをダウンロードします。
  • unzip homepage.zipを実行して、そのファイルを解凍します。
  • そのZIPファイルを削除するには、rm homepage.zipの後にyesまたはyを実行します。
  • lsを実行します。そのZIPファイルの中にhomepageというディレクトリがあるはずです。
  • cd homepageを実行して、そのディレクトリに移動します。
  • lsを実行します。index.htmlおよびstyles.cssを含む、この問題のディストリビューションが表示されます。
  • サイトを表示するサーバをすぐに起動するには、ターミナルウィンドウで次のコマンドを実行します。
$ http-server

表示されるリンクをクリックします。

仕様

次の条件を満たすWebサイトをhomepageディレクトリに実装します。

  • 少なくとも4つの異なる.htmlページを含み、そのうちの少なくとも1つはindex.html (あなたのWebサイトのメインページ) であり、1つ以上のハイパーリンクをたどることによって、あなたのWebサイト上の任意のページから他の任意のページに到達することが可能である必要があります。
  • <html>、<head>、<body>、<title>以外に、少なくとも10個の異なるHTMLタグを使用します。<p>タグなど複数回利用されるいくつかのタグは、それで1つとして数えられます。
  • Bootstrapの1つ以上の機能をサイトに統合します。Bootstrapは人気のあるライブラリ (多くのCSSクラスなどを含む) で、サイトを美しくすることができます。開始するには、Bootstrapのマニュアルを参照してください。特に、興味のある Bootstrapのコンポーネントがいくつか見つかるかもしれません。サイトにBootstrapを追加するには、<head>に以下のコードを含めれば十分です。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

また、独自のCSSを含めるには、以下を記述します。

<link href="styles.css" rel="stylesheet">
  • 独自に作成したstylesheetファイルstyles.cssが少なくとも1つあり、少なくとも5つの異なるCSSセレクタ (例:tag (example) 、class (.example) 、またはID (#example)) を使用し、font-sizeやmarginなど、合計で少なくとも5つの異なるCSSプロパティを使用します。
  • また、JavaScriptの1つ以上の機能をサイトに統合して、サイトをよりインタラクティブにします。たとえば、JavaScriptを使用して、アラートを追加したり、定期的な間隔で効果を与えたり、ボタン、ドロップダウン、またはフォームにインタラクティブな機能を追加したりできます。自由に創造的になってください！
  • モバイルデバイスだけでなく、ノートパソコンやデスクトップのブラウザでも、サイトが適切に表示されることを確認します。

テスト

作業中にサイトがどのように表示されるかを確認するには、次の2つのオプションがあります。

  1. CS50 IDEで、homepageディレクトリに移動し (方法を覚えていますか？)、以下を実行します。
$ http-server
  • CS50 IDEのファイルツリーで、ディレクトリの左側を右クリック (MacではCtrl+クリック) します。表示されるオプションから [Serve] を選択すると、ブラウザにサイトの新しいタブが開きます (数秒かかる場合があります) 。

また、 「Google Chrome」 で 「Developer Tools」 を開くと、モバイルデバイス上でページを訪問するようなシミュレーションが可能になることも覚えておきましょう。開発者ツールウィンドウの 「Elements」 の左側にあるスマートフォンの形をしたアイコンをクリックするか、 「Developer Tools」 タブを既に開いていれば、PCではCtrl+Shift+M、MacではCmd+Shift+Mと入力すればすみます。モバイルデバイス上で個別にサイトを訪問する必要はありません。

評価方法

この課題にはcheck50 がありません！その代わり、サイトの正確性は、上記の仕様の要件を満たしているかどうか、およびHTMLが整った形式で有効かどうかに基づいて評価されます。ページを確実に表示するには、Markup Validation Serviceを使用して、提供されたテキストボックスにHTMLを直接コピーして貼り付けます。送信する前に、このツールによって提示された警告やエラーを削除してください。

次の点も考慮してください。

  • サイトの美しさが、ユーザーにとって直感的でわかりやすいかどうか。
  • CSSが別のCSSファイルに書き出されているかどうか。
  • 親タグからスタイルプロパティを 「カスケード」 することで、繰り返しや冗長性を回避したかどうか。

style50はHTMLファイルをサポートしていないため、HTMLタグをきれいにインデントして位置合わせする必要があります。また、HTMLコメントは次の方法で作成できます。

<!-- Comment goes here -->

しかし、HTMLコードにコメントを付けることは、CやPythonなどでコードにコメントを付ける場合ほど必須とはされません。CSSファイルで、次のようにCSSにコメントを付けることもできます。

/* Comment goes here */

ヒント

この問題で導入された言語に関する総合的なガイドについては、次のチュートリアルを参照してください。

提出方法

次のコマンドを実行し、GitHubのユーザー名とパスワードを入力してログインします。セキュリティのため、パスワードには実際の文字ではなくアスタリスク (*) が表示されます。

submit50 cs50/problems/2021/x/homepage