HTMLとCSSとJavaScriptの概要(過去のノート)
くま子.iconなんか昔書いてたみたいなので自分用に置いときます。
目次
HTMLとCSSの概要
まずはHTMLを習得すればホームページを作成できるようになる
ただ、HTMLだけでは見た目や機能に優れたホームページを作成することはできない。
近年のHTMLはホームページの構造を作るためのもので、喩えるなら建物の骨格に相当する部分しか作れない
具体的に言うと、文章の段落であったり、画像が貼られる位置であったり、他のホームページヘのリンクであったりといった部分をつくる
「見た目を整える」とは、例えば文章のフォントの大きさや文字の太さ、色、段落間の空白の大きさなどなどを整備すること
近年はホームページの閲覧にスマホを使うことも増えてきたので、PCで見たときとスマホで見たときで見た目を変えてあげる必要性が高まってきており、これらのために使われるのがCSS。 HTMLとは？
HTMLとは、HyperText Markup Language (ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作成するためのMarkup(マークアップ）言語。
現在ほとんどのwebページはHTMLで作成されている。
「Markup: マークアップ」というのは「印をつける」という意味。文字に印（タグという）をつけていくことでそれぞれ意味づけをして、画像や表を見れるようにすることができる。→マークアップ言語 なぜこのように一見面倒くさいことをするのかというと、シンプルに言えば、「コンピューターが理解できるようにするため」
文書内の各部分に目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになる。
HTMLの役割
HTMLは一般的にWebサイトの骨組みとなる役割を持つ。しかしHTMLだけでは普段見慣れたWebサイトは作成できない。
基本的にWebサイトはHTMLとCSS、Javascriptなどを用いて作られている。これを人に喩えてると、HTMLは骨格、CSSが皮膚の役割をもち、皮膚や骨格を動かす筋肉がJavascriptとなる。 その他にも作りたいWebサイトによって、必要なプログラミング言語が変わってくる。
HTMLがわかるとなにが良いの？
WEBの仕組みがわかる
WEBデザインもできる
WEBサイトやブログのデザインを変更したり、装飾することもできるようになる。
初心者でも簡単に習得できる文字にタグを当てはめるだけで反映させることができるため、初心者でも比較的簡単に習得することができる。
基本的にプログラミングの基礎となるため、HTMLやCSSを習得してからプログラミング言語を学ぶ流れが一般的
CSSの概要
CSS (Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語。
ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートという。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の１つであるCSSが一般的に利用されている。 CSSは、HTMLと組み合わせて使用する言語で、HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定する。
<table>タグでレイアウトをまとめるなどの方法を駆使すれば、HTMLだけでウェブページの見栄えを制御することもできなくはない。
しかし、ウェブページのスタイリングにHTMLを用いるべきではない。
HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、文書の情報構造がでたらめになってしまうから。
JavaScriptの概要①
Webサイト・アプリ・サービスの開発に使われることがメインであるものの、他にもデスクトップアプリやスマホアプリ、ゲーム、loTや人工知能開発など、様々な業界で利用が可能になっており、今後かなり用途の広がる言語として注目をされている。
JavaScriptと名前の似ている「Java」は、名前が似ているだけで全く別のプログラミング言語。例えるならオーストラリアとオーストリアくらい違う。 JavaScriptはWeb業界で6年連続で1位の人気で、ウェブ業界においてはどの会社でも使われているほどの人気。目に見える側の「フロントエンド」も、目に見えないシステム側の「サーバーサイド」も開発が可能。 今後Web業界でフロントエンドエンジニアになる方は学習必須
JavaScriptの需要は下記の理由から、今後も高まっていくと予想される
フロントエンドの開発にあたって代替できる言語がない
フレームワークの開発が進んでおり、すでに様々なサービスに実装されている
ウェブだけでなくアプリやゲーム、人工知能など開発可能な業界も増えている
JavaScriptの概要②
JavaScriptで作れるもの
WEBページの動作
WEBアプリ開発
スマホアプリ開発
ゲーム開発
JavaScriptの最も一般的な使われ方はWEBページに動きをつけること
何枚かの写真をスライドさせて表示したり、ランキングやバナー広告などを表示するサイドバーを出し入れしたり、ユーザーが操作して表示を替えられるWebページはJavaScriptなどで制作されている
また、WEBページ上に地図を表示させるGoogleMaps API などもJavaScriptで利用することが出来る。 さらにJavaScriptは、LINEやFacebook、TwitterなどのSNSやチャットのような本格的なアプリ開発も行っていくことができる。 WEB系のサービス以外にもiPhoneやAndroidなどのスマホアプリにも手が出せることは魅力的。
スマホやブラウザのゲームなども手軽に制作することが可能になっている。
JavaScriptの概要③
JavaScriptでできないこと
デスクトップアプリ、スマホアプリ、人工知能、ゲームなどは開発可能だけど、他の言語の方が向いている。
JavaScriptを使うメリット
JavaScriptは現在、パソコン・スマートフォン関係なく、ほぼ全てのブラウザで作動する。
JavaScriptはもともとフロントエンド（ブラウザで実際に見れている画面）の開発が主軸だった。
しかし現在はNode.js(ノードジェイエス）というサーバー側も開発できるソフトがあるため、JavaScript1つ覚えればフロントもサーバーも開発できるようになった。 また、「GoogleApps Script」というGoogleのサービス上で動くマクロもJavaScriptを使っているので、言語1つ覚えるだけでWebアプリケーションの開発の選択肢はかなり広がっている。
JavaScriptのフレームワークとして、「Vue.js」「Angular」「React」などフロントエンド開発用のフレームワークが複数存在する。 JavaScriptの概要④
JavaScriptは、「lnternetExproler」や「GoogleChrome」といったブラウザと、あとはテキストエディタ（メモ帳）さえあれば実際に動かすことが可能。
ちなみにJava、Ruby、C#、C言語、Pythonのような他のプログラミング言語の場合、パソコン上で動作させるためのコンパイラやVisualStudio、Eclipseのような開発環境を準備する必要となってしまう。 JavaScriptを使うデメリット
JavaScriptはブラウザ上で動く言語のため、InternetExploler、GoogleChrrome、Safari、Firefoxなど、現在見ているブラウザによって動作が変わる可能性がある。
JavaScriptのバージョンと、ブラウザの種類やバージョンによって実装に微妙な違いがあるため。
ブラウザの種類やバージョン、各々のブラウザ独自の実装の違いを考慮して、同じように動作するようなコードの書き方をしなければいけない。
JavaScriptは動作の実行をするときに解析、解釈、変換が必要なので、処理のスピードとしては少し遅くなってしまう時がある。