webページ制作に必要なhtmlについて、これから勉強したいと考えていませんか？副業ブームで、単価の高いプログラミングやwebデザインなどに興味がある人が増えており、webページ制作も身近なものになりました。しかし、いざhtmlを一から勉強するとなると、勉強法や勉強時間が気になる人も多いでしょう。そこで今回は、ホームページの作り方やhtmlの勉強方法などを解説します。ぜひ参考の一つにしてみてください。
htmlとは？
htmlとは、「HyperText Markup Language」の略で、webページの文章の構成や役割などを表示させるための言語です。htmlはタグと呼ばれる記述方式で構成されており、さまざまな表現を行うことができます。決められたタグを、挿入したい箇所に囲む流れとなります。
よく使うタグには以下のようなものがあります。
「見出し」
<h1>ここに見出しとして扱いたいテキストを入れる</h1>
「本文」
<p>ここに本文の段落として扱いたいテキストを入れる</p>
一般的に私たちが目にするwebサイトはhtmlが使われています。上記以外にもさまざまなデザインやアレンジを加えることができます。
ただし、HTMLでタグづけしただけだと、ページにデザインは無い状態です。
webページにhtmlはなぜ必要？
ここではwebページにhtmlはなぜ必要なのか、紹介していきます。
①印
タグを使用することでどこが見出しでどこに本文がなのか印となる役割があります。表示内容に違和感を覚えたときに、正しく表示するための修正を行いやすく、ページの意味や構成を理解しやすくなりました。ターゲットに合わせてhtmlタグを組み合わせていきましょう。
②好きなようにカスタマイズできる
webページをhtmlで制作する場合、まっさらな状態から構築を行っていきます。レイアウトに制限などはないため、自由にカスタマイズしつつターゲットに合うサイトを作ることができます。例えば、ホームページで使用する文字の大きさや配置などを細かく調整できます。
最近では、htmlを使わずに簡単にwebサイトを作成できるWordPressなどのツールやサービスも出回っていますが、デザインやテンプレートには制限があることが多いです。その点、htmlを使いこなせれば、細かい部分までこだわることができるため、webページを他と差別化していきたい人は使えた方がいいでしょう。
webページ制作に必要なhtmlの勉強方法
webページ制作にhtmlが必要な理由が分かったところで、知識を身に付けるために、勉強方法についても掘り下げていきましょう。htmlが注目されていることもあり、最近ではアプリや本、無料サイトなども増えています。一つずつ紹介していきます。
アプリ
日頃忙しく、スキマ時間で勉強したいと考えている人は、スマホアプリで勉強するのがおすすめです。スマホは常に持ち歩いていることが多く、いつでも学習を進められます。さらに、アプリであれば操作性も良く手軽に勉強時間を確保できるので、効率よく勉強をすすめていけることが期待できます。
とはいえ、アプリにも限界があるため、本屋オンライン講座なども併用して活用するとさらに勉強が捗るでしょう。htmlの勉強におすすめのスマホアプリには、「ShareWis」「Programming Hub」などがあります。
無料・有料サイト
パソコンでしっかり勉強をしたい方や初心者には、オンラインで配信をしている無料・有料サイトのコンテンツを活用するのがおすすめです。コンテンツごとに動画や解説を確認することができるため、自分が分からない部分を集中的に学習することができます。提供しているサービスにもよりますが、コンテンツは5分から15分程度で完結しているものが多いため、時間がかかりすぎずハードルが低いのも嬉しいポイントです。
合間で学習を進めていきたい人は検討してみてください。htmlの勉強におすすめの無料・有料サイトには、「Progate」「CODEPREP」「ドットインストール」などがあります。
参考書
アプリばかりだと目が疲れてしまい、向いていない人もいるでしょう。そんな人には持ち歩きができ、ネット環境にも捉われない参考書がおすすめです。最近販売されている参考書はマンガ仕立てになっているものや分かりやすく整理されているものが多く、インプットしやすいです。さらに、気になるところにメモを書き込んだり、付箋をつけるなど、自分好みに学習を進められるのも魅力的といえます。htmlの勉強におすすめの参考書には、「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」「スラスラわかるHTML&CSSのきほん」「HTML&CSSとWebデザインが1冊できちんと身につく本」などが挙げられます。
勉強時間の目安
htmlの習得に必要な勉強時間は、2週間～1ヶ月程とされています。個人差はありますが、HTMLとCSSを使って簡単なweb制作に挑戦できるでしょう。ただし、独学の場合には、間違いに気付きにくいため、転職や副業、フリーランスを目指して行きたい場合には講師のフィードバックやサポートを受けられるスクールなども検討することをおすすめします。
htmlによるwebページの基本的な作り方
ここでは初心者向けに、htmlによるwebページの基本的な作り方について紹介していきます。簡易的な流れとなりますが、参考にしてみてください。
テキストエディタを用意する
htmlを記入するテキストエディタを用意しましょう。利便性が高いのは以下の３つです。
- Sublime Text
- Atom
- Visual Studio Code
特にSublime Textは画面構成がシンプルなため、まだ慣れていない初心者におすすめです。好みのものをダウンロードしておきましょう。
htmlを使うための設定
htmlの基本になるタグとして、ヘッドやタイトルなどの記述していきましょう。
- <html></html>
- <head></head>
- <meta charset=”utf-8″>
- <title></title>
- <body></body>
上記のようなタグを、記述していきます。
htmlファイルとして保存する
htmlの記述が終わり次第、ファイル名を設定し保存を行います。保存場所に迷ってしまう場合には、デスクトップやダウンロードにしておくと、管理しやすいのでおすすめです。
ブラウザで表示する
一度htmlファイルを保存できたら、正常に反映できているのかページを表示して確認してみましょう。普段使用しているGoogle Chrome やSafari などのブラウザで開くことができます。
サーバーにアップロードする
確認しながら納得いくwebページが作成できたら、サーバーにアップロードして公開していきましょう。紹介した程度のタグの場合には、デザインもシンプルで公開には程遠いですが、様々なHTMLやCSSを追記していくことで、理想に近いwebページに仕上げることができます。
まとめ
いかがでしたでしょうか。今回はホームページの作り方やhtmlの勉強方法などを解説してきました。htmlとは、「HyperText Markup Language」の略で、webページの文章の構成や役割などを表示させるための言語です。タグを使用することでどこが見出しでどこに本文がなのか印となる役割があり、レイアウトに制限などはないため、自由にカスタマイズしつつターゲットに合うサイトを作ることができます。最近ではアプリや無料・有料サイト、参考書などがあり、好みの勉強方法で学習を進めてみましょう。今回はhtmlによるwebぺージの基本的な作り方も紹介しているので、初心者の方はまずは流れを掴んでいただき、自分のペースでwebぺージを制作してみてください。
