• WebCampPro_インタビュー
    未経験31歳からエンジニア転職を実現【実際に聞いてみた】
    2017.04.01
  • WebCampPro_インタビュー
    未経験から上京し、テレビでも話題のIT企業に転職!【WebCampPro卒業生インタビュー】
    2018.03.10
  • WebCamp_インタビュー
    【卒業生インタビュー】台湾で月間100万UUの訪日旅行メディアを手掛けるCEOが、プログラミングを学んで得たものとは?
    2018.01.15
  • WebCamp_インタビュー
    【WebCamp受講生インタビュー】起業準備中にCEOが気がついたプログラミングスキルの重要性とは?
    2017.12.25
  • WebCamp_インタビュー
    「1カ月頑張ればこの先が見えてくる」地元メディアを立ち上げたママさん
    2017.07.20
  • WebCamp_インタビュー
    “未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
    2017.10.04
  • WebCampPro_インタビュー
    自分で稼ぐ力をつけるため、新卒5年目の営業マンがエンジニアに転職!【WebCampPro転職者インタビュー】
    2018.02.02
  • WebCamp_インタビュー
    【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
    2018.01.15
  • WebCamp_インタビュー
    時間や場所にとらわれず自由に働くために必要なスキルとは?【WebCamp卒業生インタビュー】
    2018.01.26
  • WebCampPro_インタビュー
    未経験でも寿司職人からWebデザイナーになった!ホスピタリティでスクールを支える宮脇トレーナー
    2017.05.26

プログラミング教室・人気ランキング

 

順位 スクール名 こんな方におすすめ
   Web Camp 【業界最安値】1ヶ月通い放題/Webサービス等作りたい方
転職保証コースはこちら
  TechAcademy オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
Tech Camp Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
まもなく定員オーバー当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース5月受入枠も残りわずかとなりました。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

みなさんはご自身でホームページを作ってみたいと思われたことはありますか?

ホームページはHTMLという言語で書かれていますので、このHTMLを覚えれば誰でもホームページを作ることが可能になります。

今回はHTMLを使ったホームページの作り方を初心者の方にもわかりやすいように、大枠でご説明していきます。

そもそもHTMLとは何か?

ブラウザに文書を表示するための言語です

HTMLはHyperText Markup Languageの頭文字です。直訳すると「すごいテキストを構造化する言語」という意味になります。具体的にどういうことができる言語かというと、文書中にリンクが設定できたり、文字の色や大きさを操作できたり、画像や動画を設置できたり、といった機能があるすごいテキスト、という具合に解釈していただくといいかもしれません。

タグというもので構成されています

HTMLはタグというものを使って書かれています。文字を太くしたい場合、ワードなどでは文字列を選択して「B」のマークのボタンを押すと太くなりますね。HTMLでは太くしたいところを「<b>」というタグで囲みます。例えば以下のようにします。

<b>字体を太くしたいです</b>

この文字列をhtml用のファイル(後述します)に保存し、ブラウザで表示させると字体が太くなって表示されます。HTMLはこのようにさまざまな機能のあるタグを使って文書を構成していきます。

ファイルの拡張子は.htmlです

テキストファイルを保存するとき、拡張子は.txt、ワードを保存するとき拡張子は概ね.docxです。HTMLは.htmlという拡張子をつけたファイルに保存します。拡張子がご自身のパソコンで表示されない場合はまず拡張子を表示する設定を行ってください。

詳しい設定方法は以下のページをご参照ください。

ファイルの拡張子を表示する方法

まずはテキストファイルを新規作成します。(拡張子は.txtです)作成したファイル名は任意のもので構いません。ファイルを開いて上記の「<b>字体を太くしたいです</b>」という文字列をコピーペーストして保存します。そしてファイルを閉じ、ファイル名を変更して拡張子を.htmlに変更します。その後このファイルをお使いのブラウザのアドレスバーのところまでドラック&ドロップしてみてください。

いかがでしょうか。太字で「字体を太くしたいです」と表示されましたでしょうか。htmlとはこのようににホームページを作っていくための言語です。もちろんできることはもっとたくさんあります。

HTMLでホームページを作成するステップ

ここで紹介する手順は実際に作って覚えるためというよりは、一連の流れを理解するためのものです。具体的なやり方がわからなくても、とりあえず一度目を通してみてください。どのようにホームページが作成されていくのかがなんとなく掴めるようになるはずです。

htmlファイルを作成する

まずは拡張子が.htmlのファイルを作成します。ファイルをどこに保存するのかなどは今はあまり気にしなくて大丈夫です。

タグを使って文書を作成する

このファイルに前の章で説明したタグを使って文書を作成していきます。タグの詳細な説明はここでは省きますが、以下のような構成の文書をhtmlファイルに保存すると、図1のようなページがブラウザに表示されるようになります。

<html>
<head>
<title>ここがタイトル情報です</title>
</head>
<body>
<h1>文章のタイトルなどをここに記述</h1>
ここが本文を記述するところです。
</body>
</html>

図1

FTPソフトを使ってwebサーバにアップロードする

完成したhtmlファイルを、今度はwebサーバーというホームページを公開するための外部のパソコンにアップロードしていきます。

htmlファイルをアップロードするにはFTPソフトという、外部のパソコンにファイルを送信するためのソフトウェアを使用します。FTPソフトには外部のパソコンと接続するための設定が必要ですが、複雑なのでここでは省きます。

FTPソフトを使ってアップロードする手順

1.まずFTPソフトでアップロードするファイル(今回はhtmlファイル)を選択。

2.webサーバーにファイルをアップロード。

3.webサーバーに設定してあるアドレス(概ねhttp://で始まる文字列)をブラウザのアドレスバーに入力して、htmlファイルをブラウザで表示させる。

実際はwebサーバーのインストールしてあるパソコンのどこにファイルをアップロードするのかなど細かい決まりごとがありますが、ここで大事なのは自分のパソコンで作成したhtmlファイルをインターネットで閲覧するには、webサーバーファイルをにアップロードする必要がある、ということです。

以上がHTMLでホームページを作成するステップになります。なんとなくでもご理解いただけたでしょうか。

自分で稼ぐ力をつけるため、新卒5年目の営業マンがエンジニアに転職!【WebCampPro転職者インタビュー】
2018-02-02 10:05
今回の記事では、未経験からエンジニアとして転職を目指すWebスク(現:WebCampPro)を受講し、営業マンからエンジニアへキャリアチェンジをされた吉田さんにお話を伺いました。 ...

HTMLの学習方法

HTMLを学習するにはいくつか方法がありますが、ここではひとまず入門的なことを学習する手順をご紹介していきます。

簡単なHTMLを構成してみる

まずは簡単なHTMLを作成してみましょう。

htmlとbodyタグで囲みます

HTMLはまずhtmlとbodyタグで囲みます。

<html>
<body>
</body>
</html>

なぜこうするのかは今は深く考えなくても大丈夫です。こういう約束になっていると思ってください。ちなみにタグを閉じるときは</>(スラッシュ)を使います。<html>のタグを閉じる場合は</html>です。タグをしっかり閉じないと、意図したとおりに文書が表示されなくなりますのでご注意ください。

文章は<p>

文章は<p>というタグで囲みます。bodyタグの中に書くようにします。

<html>
<body>
<p>文章はpタグの中に書きます</p>
</body>
</html>

リンクは<a>

リンクはaタグです。例えばYahoo!へのリンクを貼りたい場合はaタグの中の「href=””」のダブルクォーテーションの中にアドレスを記入します。別ページで開きたい場合は「target=””」のダブルクォーテーションの中に「_blank」と記入します。このようにタグの詳細な情報を規定する項目を「属性」と言い表します。

<html>
<body>
<p>文章はpタグの中に書きます</p>
<p><a href=”<a href="http://yahoo.co.jp/">http://yahoo.co.jp/</a>” target=”_blank”>ヤフーはこちら</a></p>
</body>
</html>

強調したい文字列は<h>

文字列をタイトルのように強調したい場合はhタグを使用します。hタグはhの後に数字をつけることで、文字の大きさを調整することができます。1が最も大きい字体で、数字が小さくなっていくごとに文字の大きさが小さくなっていきます。数字は6まで使うことができます。

<html>
<body>
<h1>HTMLの初歩</h1>
<h2>字体が少し小さくなります</h2>
<p>文章はpタグの中に書きます</p>
<p><a href=”<a href="http://yahoo.co.jp/">http://yahoo.co.jp/</a>” target=”_blank”>ヤフーはこちら</a></p>
</body>
</html>

最終的にはこうなります

ここまで作ってきた文書をhtmlファイルに保存し、ブラウザで確認すると以下のようなページを見ることができます。

ホームページのソースを見てみよう

ホームページのソースとは、ホームページを構成しているHTMLやCSSのことを指します。このソースは簡単に見ることができますので、見てみましょう。まずはご自身のパソコンでお好きなホームページを開いてみてください。

ブラウザを右クリックして出てきたメニューから、IEの場合は「ソースの表示」、google chromeの場合は「ページのソースを表示」を選択すると見ることができます。使用しているブラウザによって文章は変わりますが、「ソースを表示」というニュアンスの文字列が表示されるので、その項目を選ぶとホームページのソースが表示されます。

いかがでしょうか。たくさんの解読不明の文字列が表示されたのではないでしょうか。実際のホームページはHTMLタグだけではなく、CSSやJavaScriptといった言語でも構成されています。今は意味不明の記号の集まりにしか見えなくても、勉強を進めることでこれらの要素を理解できるようになります。

学習サイトなどで勉強を深める

HTMLを勉強できるサイトは数多く存在します。その中でも役に立つホームページをいくつかご紹介していきます。

やさしいホームページ入門

http://www.ink.or.jp/~bigblock/

タグとは?というHTMLの初歩の初歩からわかりやすく解説してくれるページです。基本的なHTMLの構造から、テーブルの作り方まで一通り学習することができます。ひとまず概念的なものをざっと理解したいという方に向いています。

1時間で作るホームページ

http://www.shoshinsha.com/hp/1hour/index.html

HTMLをまったく知らない状態からでも、ホームページが作成できるページです。かわいいキャラクターの会話形式で説明が進んでいくので、理解しやすくなっています。目次を追うごとにホームページが完成していくので、手を動かしながら覚えたい方にはぴったりの学習サイトです。

ドットインストール

http://dotinstall.com/

動画で学ぶならドットインストールがおすすめです。3分程度の短い動画でホームページの作り方を説明してくれるので、ちょっとした隙間時間にも学習を進めることができます。HTMLのほか、CSSやJavaScriptといった言語も学習可能です。

progate

https://prog-8.com/

HTMLを実際に書きながら学習できるサイトです。会員登録することで利用することが可能になります。無料と有料両方のコースが用意されており、初級編は無料で学習することができるようです。テキストを読みながらコードも書いて学習していきたい方におすすめです。

ホームページ作成ツールを使ってみる

ホームページはメモ帳でも作成することができます。しかしHTMLを構成するのに適したツールを使うことで、何倍も作成しやすくなるうえ、生産性も上がります。ここではホームページを作成するのに便利なツールをいくつかご紹介していきます。

ホームページビルダー21

http://www.justsystems.com/jp/products/hpb/index.html

ジャストシステム社が開発しているホームページ作成ソフトです。1~2万円前後で購入でき、初心者でも比較的簡単にホームページを作成することができます。Webページの表現もいくつかテンプレートがあらかじめ用意してあるので、HTMLやCSSに詳しくなくても本格的なホームページを作成できる点が魅力です。

DreamWeaber CC

http://www.adobe.com/jp/products/dreamweaver.html

HTMLとCSSがある程度わかるようになってきたら、本格的なツールを使ってホームページを作成してみるのもいいでしょう。DreamWeaber CCはAdobe社が提供するホームページ作成ツールです。月額2,200円で利用可能で、さまざまな機能を備えているためプロの使用にも耐えられます。

Atom

https://atom.io/

HTMLやCSSなどを書くのに適し無料のテキストエディターです。作成ツールというよりかは、コードを編集していくエディターとなっています。メモ帳よりも便利な機能が多くあるので、コードをしっかり学習していきたい方にはおすすめのツールになります。ただし使い方が少し難しい部分もあるので、ある程度HTMLやCSSの学習を進めた方におすすめのツールです。

まとめ

いかがでしたか?なんとなくでもHTMLを使ったホームページ作成方法について、ご理解いただけましたでしょうか。

ホームページを作成するだけなら、HTMLやCSSといった言語を理解していなくても作ることは可能です。実際HTMLやCSSを書くことなく、美しいホームページを作成するためのサービスはいくつか提供されています。

しかしHTMLやCSSを覚えることで、より細かな調整や、こうしていきたいという希望が実現できたりするので、表現の幅が広がります。

HTMLは無料から有料までさまざまなタイプの学習サイトや、書籍、スクールなど数多く存在しています。HTMLは学習環境が大変整った学習しやすい言語なので、興味のある方は一度学習されてみてはいかがでしょうか。

WebCamp・Webスクについて

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。Webスクは半年間で未経験から即戦力エンジニアを育成する転職保証付きのプログラミングスクールです。

2つのサービスを運営するインフラトップでは、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

まもなく定員オーバー当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース5月受入枠も残りわずかとなりました。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら!

【インタビュー】プログラミング未経験からWebデザイナーに転職!

未経験から3か月間のプログラミング学習と手厚いサポートで、Webデザイナーとしてのスキルを身につけ、現在は当社の社員として働いているWebCamp Proコースの受講生にお話を伺いました。

「自分でもWebデザイナーになれるの?」

「未経験からでも挫折しないで頑張れるの?」

といった疑問を抱えている方は、是非この記事を読んでみてくださいね!

未経験でも寿司職人からWebデザイナーになった!ホスピタリティでスクールを支える宮脇トレーナー
2017-05-26 12:42
こんにちは、WebCamp Proです。 今回のブログでは、寿司職人からWebデザイナーとなり現在はWebCampでフロントエンド・ママコースの講師を務める宮脇さんの紹介です。 ま...
関連キーワード
学習の関連記事
  • 【入門者向け】Pythonでスクレイピングをする方法を解説!
  • 【入門者向け】Pythonでのクラスの使い方を徹底解説!
  • 【入門者向け】Pythonで機械学習をする9つのステップ!
  • 【入門者向け】PythonをLinuxで使用する方法を解説!
  • 【入門者向け】Pythonで数値計算をする方法を解説!
  • 【入門者向け】Pythonで人工知能を作る6つのステップ

当サイトで人気のオススメ転職サービスTOP3

1位 マイナビエージェント×IT

おすすめポイント

・平日忙しい人も、土曜日開催の個別キャリア相談会に参加できる

・職種や仕事内容(要件定義、上流工程から携わる仕事など)の要望が細かくできる
・マイナビの規模を活かした豊富で幅広い求人数

マイナビエージェント×ITの登録はこちら

2位 レバテックキャリア

おすすめポイント

・求人登録数4,000件以上

・エンジニア未経験、経験者両方に対応

・有名企業の採用担当者インタビューがみれる

・一次面接NGからの内定実績もあるほど、内定率が高い

レバテックキャリアの登録はこちら

 3位 type転職エージェント

おすすめポイント

転職者の71%が年収アップ

・IT系企業、特にエンジニアに限らず営業職の求人も充実している

各職種専門の転職アドバイザーが援助

type転職エージェントの登録はこちら

おすすめの記事