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

html%e3%80%81css%e3%80%81js

【プログラミング初心者向け】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 で動きを作成します。
・テキストエディタとブラウザさえあればすぐに開発できます!
・ブラウザによって見た目、動作差異があるので、何卒お見知りおきを。

以上です!

The following two tabs change content below.

関連記事

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

ピックアップ記事

  1. Search Results | Sotheby's (20150507)
  2. 東京都知事選挙1
  3. noimage
  4. IMG_4720
  5. スクリーンショット 2014-11-09 19.49.22
  6. test_img
  7. 6c05b8ab4cfb6fc5a8d6a8478b3e403b_s
  8. DSCN9773
  9. サムネイルテンプレ
  10. 10334271_776994248990974_7406848250164202295_n

ピックアップ記事

  1. %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-20-41-55

    2016-9-27

    毎回気になる日本テレビ「アナザースカイ」の新MCアシスタント!!!今回は今後期待のあの子!!!

    出典:http://www.ntv.co.jp/anothersky/  【日本テレビ「アナザースカ…

ピックアップ記事

  1. makublo_thumb3

    2016-8-11

    jqueryでtableを整形する便利プラグインDataTables!

    jqueryとDataTablesでお手軽table操作Webページで動的なデータの表を作ることって…

ピックアップ記事

  1. EXP=1464177959

    2016-5-24

    落ち込んだ時の名言のススメ

    たかが言葉、されど言葉 こんちんは。こにたんです。 誰にでも落ち込む時はあるし、誰にでも迷う…
ページ上部へ戻る
Top