【プログラミング初心者向け】HTML、CSS、JavaScriptの基礎

【プログラミング初心者向け】HTML、CSS、JavaScriptの基礎

「Web系のプログラミングでどの言語から始めたらいいですか?」
最近、こんな質問をよく受けます。

普段はサーバサイドをメインにやってますが、
Webプログラミングを始めようと思ったら、
フロントエンド(HTML、CSS、JavaScript)が断然始めやすい!

ということで、HTML、CSS、JavaScriptのほんとに基礎、概要を
ご紹介します。

これを機に少しでもWebプログラミングに興味を持ってもらえれば幸いです。

HTML、CSS、JavaScript とは何ぞや?

簡単に言うと、Webサイトのデザイン、動きを構成するものです!
それぞれもちろん役割が違って、ざくっと下のような感じです。

デザイン: HTML + CSS
動き: JavaScript

少し詳細に記載します。

HTML (Hyper Text Markup Language)

ウェブページの要素を決めます。
ボタン、チェックボックス、入力欄などを設置できます。

CSS(Cascading Style Sheets)

ウェブページを装飾します。
色、配置、大きさなどを設定できます。

JavaScript

ウェブページに動きや効果を与えます。
クリックやタップ時の挙動の制御、アニメーションの実行などできます。
※Javaという言語もありますが、使用用途も異なっていて、全く別物と認識しておいてください。

簡単なコードで実際に動かしてみよう

実は、テキストエディタとブラウザさえあればすぐに開発可能です!
これが冒頭にお伝えしたフロントエンドが断然始めやすい理由です!

サーバサイドだとちゃんと一からやりたい場合は、
サーバ構築からとかなったりして・・・
こだわらなければそこまでやる必要はないですが。

では、実際に書いていきましょう。

HTML (Hyper Text Markup Language)

以下のコードをテキストエディタにコピーして
test_code.htmlで保存してください。
どんなブラウザでもいいので、そのファイルをブラウザで開くと
ボタンが置かれたページが開くと思います。

・HTMLは、< >で囲まれたタグで構成されます。
・必ず以下の構成になります。

・先頭にDOCTYPEを宣言します。<!DOCTYPE html>でブラウザにHTML5で書かれていることを宣言します。
・headタグの間にページのタイトル、文字コードなど見た目の要素に関係しないものを書きます。
・bodyタグの間に見た目の要素(コンテンツ部分)を書きます。ここでは、ボタンを設置しています。

CSS(Cascading Style Sheets)

コンテンツの色、大きさ、配置などおもいっきりデザイン部分を記述します。

書き方としては、3つあります。
・style属性に記述
・styleタグで記述
・外部ファイルに記述して、linkタグで呼び出す

styleタグで記述するパターンをご紹介します。
以下のコードを先程のファイルにコピぺしてみて下さい。
ボタンの色と大きさが変化したと思います。

・<style type=”text/css”>と</style>の間にCSSを書きます。
・CSSセレクタと呼ばれる方法で要素を選択して、その要素にCSSを効かせます。

JavaScript

コンテンツ部分のクリックやタップ時の挙動の制御、
アニメーションの実行などできます。

書き方としては、2つあります。
・scriptタグで記述
・外部ファイルに記述して、scriptタグで呼び出す

scriptタグで記述するパターンをご紹介します。
以下のコードを先程のファイルにコピぺしてみて下さい。
ボタンを押したときに、押した回数が表示されると思います。

・<script type=”text/javascript”>と</script>の間にJavaScriptを書きます。
・scriptタグは、headタグ、bodyタグ中のどちらに置いてもいいです。

注意点

HTML、CSS、JSは、ブラウザが解釈します。
ブラウザといえば、IE、FireFox、Chrome、Safariなどなど
多々種類があるものです。
ということは、ブラウザによって見え方や動作が違うことがあるのです。
Chromeで動作するけど、IEだと動かないは、これまで頻繁に出くわしてきました。
フロントエンドをやるにあたって、各種ブラウザによる動作確認が大変というのは、
頭の片隅に入れておいてくださればと思います。

まとめ

・HTML、CSS でデザイン、JavaScript で動きを作成します。
・テキストエディタとブラウザさえあればすぐに開発できます!
・ブラウザによって見た目、動作差異があるので、何卒お見知りおきを。

以上です!

関連記事

コメントは利用できません。

ピックアップ記事

  1. 2014/9/17

    M&A

ピックアップ記事

  1. 2016-12-23

    【将来のために】備える貯蓄について考えてみた。

    一人暮らし/独身/20代後半/会社員。 アラサーなので、なんやかんや結婚式参列や出産のお祝いなど大き…

ピックアップ記事

  1. 2015-9-18

    アメリカでサルバドール・ダリを見てきました。

    こんにちは!9月5日〜11日までアメリカに行ってきました。ツアーの詳細を全く確認せずに旅だったので、…

ピックアップ記事

  1. 2016-9-28

    アレンジ豊富!自宅で簡単おいしい!ジュースのような日本酒サングリア♪美肌効果も◎

    果物の季節がやってきました! 昨年ブームになった日本酒サングリア。 今年も梨だけでなく様々なフル…
ページ上部へ戻る
Top