【サイトの作り方】HTML5でサイトを作ろう!【準備編】

初心者向けサイトの作り方

これから複数回にわたってサイトの作り方について説明していこうと思います。
完全に初心者向けなので踏み入ったところまではあまり書かないかもしれません。
なるべくわかりやすく解説できればと思っていますが、わからない所があればコメントやTwitterで教えていただければ追記等させていただきます。

サイトは何でできているのか

基本的に下記のようなもので作られています。
・HTML
・CSS
・javaScript
・jQuery
それでは1つずつ説明していきます。

HTML

HyperText Markup Languageの略です。
サイトの基礎になるマークアップ言語です。
ここにサイトに入れる文字や画像を書き込んでいきます。
マークアップ言語とあるように、サイトのここがタイトルですよ、ここは本文ですよとコンピュータにわかるように教えてあげるものになります。

じつはHTMLさえ使えることができればサイト作成は可能です。
ですが、HTMLだとデザインする(色を付けたり配置を決める)際にかなり複雑になってきます。
なのでHTMLでは「ここは○○ですよ」という指示だけを書いて別のCSSというファイルでデザインを整えるのが現在の主流です。

タイトルに有るようにHTML5となっていますが、5と言うのはバージョンになります。
仕様などが日々更新され、バージョンが上がっていっています。
今新規で作られているサイトはほぼHTML5になっています。

CSS

Cascading Style Sheetsの略です。
HTMLで書いたものに色や線、配置などデザイン的な部分(見た目)を調整するのに使用します。
CSSにもバージョンがあり、現在はCSS3まで出ています。
新しいものだと、画像を使わずとも影をつけたり、動かしてみたりなどできることが増えてきています。

javaScript/jQuery

主にサイトの動きの部分を作るのに使用します。
例えば、メニューにカーソルを近づけると下に更に細かなメニューがアニメーションで降りてくるところやスライドショーなんかがこれらで実装されています。
内容的には上記2つのHTML、CSSより難易度は上がりますがHTML・CSSをマスターしてからチャレンジしてみてください。

サイト制作に必要なもの

テキストエディタ

テキストが打てるものなら基本的になんでも使えます。
windowsであれば、メモ帳でも可能です。
個人的にオススメなのは『サイトコーディングにオススメのテキストエディタ『Sublime Text3』』こちらの記事で紹介した「Sublime Text3」です。
もちろん既に他のテキストエディタやAdobeのDreamweaverを使っているという方は変える必要はありません。

ブラウザ

作っていくサイトがどのように表示されているか確認用に使用します。
どんなものでもOKですが、ここではGoogle Chromeを使用します。
個人的にはGoogle Chromeかファイヤーフォックスがオススメです。

準備物はこれだけ!
使いやすさ等を考えなければ何もインストールすることなく始めることができます。

『【サイトの作り方】HTML5でサイトを作ろう!【HTML基礎編】』を公開しました!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする