学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス /  ウェブ制作チュートリアル / 第1章 ウェブサイトの制作を始める前に:ウェブサイトの保存場所を作る

第1章 ウェブサイトの制作を始める前に

| ウェブサイトの保存場所を作る

ウェブサイトは、HTMLファイル、CSSファイル、画像ファイルなどの複数のファイルが集まったものです。 これから作成していくウェブサイトで使用するHTMLなどのファイル群をどんなフォルダ構成で保存していくのかについて、作成前に決めておくほうが良いでしょう。
ウェブサイトの保存場所を作る際に意識しておかなくてはならないのは、HTMLファイル、CSSファイル、画像ファイルなどのファイル群は、最終的にお互いにリンクを張り合うなどして関連してくるということです。 そのため、基本的にはどのようなフォルダ構成で保存しても構わないのですが、あまりに深い階層のフォルダや、バラバラのフォルダに分けて保存してしまうと管理が煩雑になってしまいます。
逆に、Microsoft Wordなどのワープロソフトは、ウェブページの作成には不向きです。 ワープロソフトは、テキストや図表などをレイアウトして用紙にプリントするのに最適化されているため、HTMLファイルやCSSファイルなどのシンプルなテキストファイルを作成するには、無駄に高機能で余分な情報を持ち過ぎているのです。 むしろ、シンプルな機能しかないテキストエディタが、HTMLファイルやCSSファイルを作成するのに適していると言えるでしょう。
フォルダ名やファイル名については、原則として半角英数で、できるだけ短めに、できれば内容が想像しやすい名前にします。 ここで付けるフォルダ名やファイル名は、最終的にはウェブページのアドレスとなるURLの一部になることを意識してください。 例えば、logo.pngという画像ファイルがあるとして、これをimagesフォルダの中に保存するということは、最終的にこの画像ファイルのURLは、http://www.example.com/images/logo.png といった形式になります。

| sampleフォルダの下にimagesフォルダを作成

このチュートリアルで作成していくサンプルサイトでは、sampleという名前のフォルダを作って、これから作成していくHTMLファイル、CSSファイルなどのすべてのファイルを、このsampleフォルダ以下に保存することにします。
画像ファイルについては、sampleフォルダの下にimagesフォルダを作成して、その中にまとめることにします。 これは、一般的にウェブサイトを制作する際に利用されることの多いフォルダ構成です。
それでは、ご自分のパソコンの中の任意の場所にsampleフォルダを作成してください。任意の場所と言われても良く分らないという方は、分かりやすいようにデスクトップ上にsampleフォルダを作成すると良いでしょう。 次に、sampleフォルダの下にimagesフォルダを作成してください。sampleフォルダの下にimagesフォルダを作成すると以下のような状態となります。
写真
この時点ではsampleフォルダの中にはimagesフォルダだけが存在している状態です。まだ、HTMLファイルやCSSファイルや画像ファイルは存在していません。
まとめ
  1. ウェブページをどんなフォルダ構成で保存するのか、作成前に決めておく
  2. フォルダ名やファイル名は、半角英数・短め・内容が想像しやすい名前にする
  3. フォルダ名やファイル名は、最終的にはウェブページのアドレスの一部になる

記事一覧へ
HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ