こんにちは！ISAMU(@burlesca_isa)です！
今回の対象読者は
- HTMLできること、できないことを知りたい方。
この記事を読むと
HTMLできること、できないこと
HTMLで「できないこと」を実現する方法
が分かります。
HTMLで「できること、できないこと」
HTMLで「できること」は静的WEBサイトの作成です。
WEBサイトには大きく分けて静的サイトと動的サイトに分けることができます。
・静的サイト
ユーザーがページにアクセスしたときに作成済みのページを表示する。
・動的サイト
ユーザーがページにアクセスするごとにサーバーがページを生成して表示する
ざっくりいうと、
日付など、アクセスするごとに変わるのが動的サイトです。
サイト運営者が更新しない限りページが変わらないのが静的サイトです。
HTMLで「できないこと」は動的サイトの作成
HTMLは動的サイトを作成できません。
HTMLはプログラム言語ではなくマークアップ言語と呼ばれます。
プログラム言語とマークアップ言語の違いは
- プログラム言語→プログラムの指示通り進行して動的に出力等を行う
- マークアップ言語→タグを記載しブラウザ上にテキストをそのまま出力する
動的サイトを作成するにはプログラミング言語を使用します。
動的サイトを作成する際によく使われるプログラミング言語はPHPなどがあります。
HTMLだけではアニメーションやデザインを作れない
HTMLはテキストの表示を行います。
WEBサイトのデザインやアニメーションを作成する場合はCSSやJavaScriptを使用します。
CSSはサイトにデザイン（色やアニメーションなど）をつけたい場合に使用します。
ユーザーに伝えたいテキスト情報をHTMLで構築し、
WEBサイトのデザインをCSSで構築します。
HTMLとCSSはセットで使用することが基本のため、
技術書などではHTMLとCSSのセットで学習することが多いです。
javascriptを覚えると本格的なアニメーションを作成できます
javascriptを使用すれば本格的なアニメーションを作成することが出来るので覚えることをおすすめします。
WEBサイト制作の現場では必ずと言ってよいほど、使われることが多いプログラミング言語です。
クラウドソーシングなどの仕事受注の際にもjavascriptが使えることが応募条件となっていることが多いです。
javascriptを使えば、
日付の動的な表示や、写真のスライド、ドラックドロップ、フェードイン・フェードアウトなども実装することが可能です。
今風でおしゃれなアニメーションを使用したWEBサイトを作成出来るようになります。
静的サイトジェネレータ
WordPressなどを使用したWEBサイトが主流となっていますが、
静的サイトジェネレータというものが注目されています。
ターミナルでコマンドを実行することでWEBページを生成します。
静的サイトのメリットは
表示スピードがWordPressなどの動的サイトと比較すると圧倒的に早いことです。
近年、サイトスピードの高速化は非常に重要になっており、
サイトスピードを向上を実現できるため静的サイトジェネレータを使用するケースが増えています。
専門的な知識が必要なため、
HTML初心者にとっては導入は難しいと思いますが、
頭の片隅に置いておき、HTMLの学習が進んだときに勉強するきっかけになったら嬉しいです。
