始めに
WEBサイトのコーディング経験を元にHTMLの書き方や意識すると良いと思う点、よく使う書き方などを纏めてみようと思います。困ってる人の参考になればいいな〜と思いつつ
HTML？何それ美味しいの？！
な人にもコーディングに興味持って貰えたらいいなと思っています。ただ文章力に自信がないので分かりやすいかはわかりません。と、言い訳しておきます。
HTML覚えると何が出来るの？
HTMLが何の略なのか？等の細かい話は置いておきます（気になる方はGoogleで検索してみて下さい。これをググると言います）。
HTMLというタグ*1を記載したファイルをWEBサーバー*2に置くと自分の作ったサイトを全世界に公開する事ができます。
何を公開するかは人それぞれになります。
このサイトのようなブログ
amazonのような商品販売サイト(ECサイト)
ギズモードのような情報サイト(メディアサイト)
自身の作品を載せるポートフォリオサイトなどなど。
内容は色々ですがHTMLを覚えると自分で好きなように作れるようになります。実際にはデザインが必要だったり、プログラムが必要だったりするので単にHTML覚えればなんでも作れるというわけにはいきませんが、頑張れば大概のものはできます。
*1、*2共に後々説明しますので今は気にせずに。
就職活動に活かそう！
HTMLを覚え自分でサイトを作れるようになると就職できる範囲が広がります！
職業的には「HTMLコーダー」や「フロントエンドエンジニア」などになることができます。
Find Jobとかで探すと結構出てきます。オススメ。
HTMLコーダーはHTML、CSSが必須。更にJavascript(以下jsと略します)というプログラムを覚えればOK。更にPHPやMySqlなどのプログラムを覚えると「フロントエンドエンジニア」になることができます。ただこの辺の職業の言い方や条件などは会社ごとで異なります。
PHPやSqlを覚えるとWordpressというこのサイトのようなブログを簡単に作れるツールを利用したり、TwitterやFacebookなどをサイトに埋め込んで表示したり色々できて楽しいです。
ちなみに私はHTML、CSS、JSの他、PHPやSQLを使ったWorspressの経験が豊富でUNITYを少し弄ったりしていますが職業はコーダーです。
仕事としての良し悪し
ここでコーダーの仕事としての良い点、厳しい点なども記載しておこうと思います。もちろん会社などで違ってくるとは思います。
良い点
- ディレクターやデザイナー、クライアントとコミュニケーションを取りながら進めますが基本的には黙々と仕事が出来る
- 慣れてくると作業がどれ位で終わらせられるか分かりやすいので時間配分がし易い。
サイトのワイヤー作成やデザインなどは考える部分が多いため時間が読みにくいという部分がありますが、コーダーはデザイナーが作成したデザインを精密にWEBサイトに変換する作業なので割と作業時間が出しやすいです。 - HTMLやJS等に慣れた後もPHPやデータベース、バージョン管理やゲーム制作等手を広げやすい。コミュニケーションや提案が得意であればディレクターに転職しても良い。
- 有名企業や有名人のサイトなどを作ると人に自慢できる。このサイト俺が作ったんだぜ！
厳しい点
- WEB制作の最終工程なので前の工程が遅れれば遅れる程、被害を受ける
- 会社に篭って作業できる反面、クライアントとの打合せの経験は詰みにくい
- JSで無茶なアニメーション制作が来るとかなり大変なことになる。時間が全く読めなくなる。オーマイガッ
HTMLを書くのに必要なものは？
HTMLはテキストエディタを使って作れます。テキストエディタというのはテキスト入力を行うソフトの事をいいます。Windowsの場合は始めから入っているメモ帳、Macの場合は始めから入っているテキストエディットがそれになります。ただ、これらのソフトでも作れますがもっといい感じのエディタが無料で色々提供されていますので是非ダウンロードして使ってみてください！便利なソフトをググってインストールして使うという事になれるのもとても重要です。
Windowsの場合はサクラエディタ、Macの場合はmiエディタが軽くて良いかと思います。
無料で高機能なエディタもあります。入力補完という機能がついていて便利だったりしますが初心者の方は自分でタグをとにかく打って手に覚えさせるのが良いと思います。自分も今はDreamweaverというソフトを使っていますが最初の頃はずっとサクラエディタを使って作っていました。腱鞘炎が不安になってきたころに便利なエディタに移るといいと思います。
HTMLのタグ一覧
HTMLには下記のように色々な「タグ」があります。
よく使うタグ
| <html> | <head> | <title> | <body> | <h1〜h6> |
| <p> | <span> | <a> | <img> | <br> |
| <ul> | <dl> | <table> | <input> | <section> |
| <nav> | <article> | <aside> | <header> | <footer> |
その他にも色々あるんですがまぁそんなに多くないので頑張れば全然覚えられます！というか何度も書くと勝手に覚えます！タグとそのタグの意味を覚えてしまえばHTMLはほぼ終わり、次にCSSを覚えればWEBサイトが自由に作れます。タグの意味と書きましたがタグにはそれぞれ意味合いがあります。
詳しくは下記のリファレンスサイトをみてみて下さい。沢山載っててうんざりするかも知れませんが基本的に使うのはさっき記載したタグが殆どです。
http://www.htmq.com/html/indexm.shtml
さっそく書いてみる
習うより慣れろ。百聞は一見にしかずです。
まずはサクラエディタなどを立ち上げて下に記載したテキストを頑張って手打ちしてみましょう。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>サンプルドキュメント</title> </head> <body> <div> こんにちはHTML！ </div> </body> </html>
テキストエディターでひたすらタグ打ちしたらひとまずデスクトップに保存します。ファイル名はindex.htmlとします。
保存したindex.htmlをブラウザで表示してみましょう。ダブルクリックするかindex.htmlをドラッグしてブラウザに渡せば表示されます。
うまくいったでしょうか？
titleタグの中身がブラウザのタブの部分に表示されているのが確認出来ると思います。
bodyタグの中身はページ内に表示されます。これでもうページが作成できました。簡単ですね！
見た目を変えてみる
では次にさっきの文章をすこし改造してみます。文章や画像などはHTMLのタグを使用して書きますが見た目に関わる部分はCSSというものを使用します。
さて、新しい言葉CSSが出てきましたが難しく考える必要はありません。取り敢えずやってみましょう！さっき作ったindex.htmlをもう一度テキストエディタで開いて下記のように変更して保存してください。
変更しているのは div の一行だけになります。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>サンプルドキュメント</title> </head> <body> <div style="font-size: 20px; font-weight: bold; text-align: center;"> こんにちはHTML！ </div> </body> </html>
するとこうなります。
フォントのサイズが大きくなり、更にフォントが太くなって、文字が画面の中央に寄ってるのがわかるでしょうか？
追加した一行を見て貰うとわかるかと思いますが、
font-size = フォントサイズ
font-weight = フォントの太さ
text-align = テキストの位置
をそれぞれ指定しています。単位は色々あるのですが取り合えずピクセル(px)を利用します。この場合フォントの大きさを20pxに指定し、フォントの太さをbold、つまり太く指定し、テキストの位置をcenter、つまり中央に指定しています。
何となく感じているかと思いますが、HTMLには英語が多く出てきます。英語というか英単語ですが。プログラムを始めるとより英単語が出てきます。元々英語が得意な人は有利かも知れません。私は中学1年の時に既に英語を諦めた口なので得意な人の気持はわかりませんw苦手な方は私同様、徐々に英単語を覚えられて頭が良くなった気になれるかも知れません。
何をどう指定すれば見た目を変えられるのかはもう経験がものをいうのでひたすら試してみましょう。慣れればなんてこと無くなります。
ちなみにどんな事が出来るかは先にも紹介した下記のリファレンスサイトがとても便利です。
http://www.htmq.com/css3/
フォントの色を指定したり、場所を指定したり、背景に画像を引いたりと色々な事がCSSを使用するとできます。面白いですね。
まとめ
最低限のタグを書いて.htmlとして保存するともうブラウザで表示する事が出来る。意外と簡単だったのではないでしょうか。
HTMLのタグで文字や画像を置いて、CSSを使って位置やサイズを調整する。これの繰り返しでWEBページはできています。これをデザイン通りに作るとなるとまた大変な部分も当然出てきますがそれも慣れれば出来るようになります。
次はコーダーとして重要だと思っている事などを書いていこうとおもいます。その後にまたHTML・CSSについて纏めていく予定です。では。
コメント