【初めてのホームページ制作】#01 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ01

なぜ、わざわざ自分でホームページを作る必要があるのか?
今では知識なんてなくても無料で簡単に高機能なホームページ作れるようになってるじゃん!って思うかも知れません。
その代表格がWordPressです。確かにWordPressで簡単にホームページなんて作れます。
ただしこの簡単にという言葉に騙されてはいけません。

これは、あくまでHTMLやCSSなどの知識が多少ある人に向けた言葉です。WordPressを使っていて、レイアウトなどを変更したくなったりした時にHTML,CSSの基礎的な部分がわからないと、カスタマイズなんてできません。なのでHTMLやCSSは絶対に理解しておくべきなんです。

ホームページ制作講座について

じゃあ自分で作るにはいったいどうしたらいいんだろう…。考えたことある人は必見だと思います。

これから10回に分けて【パソコンさえあれば誰でも簡単にホームページを作れる】ということを証明(誰に?(笑))したいと思います。

まずは実際に操作せずに読み流してみてみるのもいいと思います。

この講座の最終目標

このホームページ制作講座は、最初はあまり難しく考え込まず、手順通りにいけば最終的に本人の手元でホームページが完成したという実感を持っていただき今後、ホームページ制作をしたいと思えるようなきっかけづくりとなるような内容に仕上げました。

講座を進めていく上でお願い

このホームページ制作講座は、ホントに初心者向けの講座になります。
ですので、僕が極力わかり易く解説をしたつもりでも、『こいつ、何言ってんの?』って部分があるかもしれません。もし、疑問点、又は改善してほしい!って思うことがあれば一番下のコメント欄にコメントをお願いしたいと思っていますm(__)m
 

ホームページとHTMLの基本的なお話

まずは基本的な仕組みについてみていきましょう。

ホームページのしくみ

  1. ユーザーがブラウザでURLを入力します。
  2. 入力されたURLでサーバーを探す。
  3. サーバーがURL先の情報をもって応答する。
  4. ブラウザが文字や画像を表示する。
ホームページの仕組み

ホームページの仕組み

ざっくり説明すると上記のような単純な話しです。

HTMLってなに?

HTMLとは、『HyperText Markup Language』の略称で簡単に言うと『超凄い文字』です(笑)

ハイパーテキスト・マークアップ・ランゲージ

現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。

ウィキペディアには、このように説明がされています。

HyperText Markup Language
(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、専らHTTPが利用されるWWWのハイパーテキストの記述に使われているマークアップ言語である(1990年代後半頃からはコンテンツという語も利用されている(「中身」という意味の語であり、御大層な意味は無い))。ハイパーリンクや画像等のメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。
現在[いつ?]は、WHATWG により仕様が作られ、それを元に W3C により勧告が行われるという流れになっている。W3C は、XML ベースの規格である XHTML の勧告も行っている。
ウィキペディアより引用

難しくてよく分からん!

ホームページを制作するうえで準備すること

僕は、OSがWindowsなのでWindowsの環境で制作を行いたいと思います。
Macの方で進める方がいましたら時折、Macでの操作に読み替えてもらうことになると思います。
例えば、ショートカットキーなどがあります。

パソコンの設定を変えよう

まずは、ファイル名の後ろに拡張子が表示されているか確認してみましょう。

もし表示されているなら設定はしなくてOKです。

表示されていなければエクスプローラーを開いて表示タブに切り替えて、ファイル名拡張子のチェックを外しましょう!

手順001

手順001

これでファイル名の後ろに

画像ファイルなら【.jpg】と表示されているはずです。

これで設定完了です!

ホームページ用のフォルダを用意しよう

まずはデスクトップの何もないところで右クリック

手順002

手順002

新規作成→フォルダーをクリック

フォルダー名はなんでもいいんですが僕の方では、「sample」というフォルダで進めていきたいとおもいます。

手順003

手順003

これで完成!

後々、重要なファイルが入るフォルダになるので、どうぞ可愛がってやってください(笑)

メモ帳を準備しよう

メモ帳はWindowsのパソコンならプリインストールされているソフトなのでこれを使っていきましょう!

メモ帳の所在は基本的にアクセサリにあるのでさがしてください。

探すのが面倒な人はショートカットキー:Windows+R

をするとこちらのウィンドウが開くので『notepad』と入力して実行してくださいね。

手順004

手順004

すると、一瞬でメモ帳が開きますので。
ちなみに僕の方はメモ帳は使わず便利なSublimeText3ってエディタを使うことにします。

メモ帳よりはるかに使いやすいですし色々便利な機能がついてますので、
もし同じ環境にしたいのでしたら、webkaru.netさんがインストールの手順を解説しておりますのでぜひ参考にしてくださいね!

今回は『ホームページとHTMLの基本的なお話』と『ホームページを制作するうえで準備すること』についてでした。

第2回目からいよいよホームページを作っていきたいと思います!

【初めてのホームページ制作】#02 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ01

自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA