TakushokuDCRC’s diary

拓殖大学ディジタルコンテンツ研究愛好会の技術ブログになります。様々なジャンルのディジタルコンテンツの研究を行います。

HTMLとかCSSとかJavaScriptってなんなんだ

みなさんこんにちは。Nakahikoです。最近、エ〇ゲ屋*1の1000円券と、銀だこの1皿券と、Amazon1000円券を入手したりして割と充実してます。

 

突然ですが皆さん「ホームページを作りたい!でも、何を勉強すればいいの?」と、思ったことはありませんか?

今回は、WEBページを作る際によく使われる、HTML・CSSJavaScriptについて解説していこうと思います。

 

はじめに

上記にもある通り、WEBページを作る際にはHTML・CSSJavaScriptが用いられます。他にも「サーバーサイド言語*2」と言われるもの等の色々な技術がありますが、今回は代表的な3つを紹介したいと思います。それぞれのおおまかな役割を理解しつつ、うまく使い分けることが重要です。

HTML

毎度恒例のwiki引用をば。

HyperText Markup Languageハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。

ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像リストなどの高度な表現力を持つ。

HyperText Markup Language - Wikipedia

と、いわれてもさっぱりですので簡単に解説します。

俺的HTML解説

HTMLはWEBページを作る際には欠かせません。マークアップ言語と言われるもので、ブラウザ(インターネットエクスプローラ―等)が理解しやすいように、文章にしるしのようなものを付けることができます。

端的に言うとHTMLはWEBページの設計図です。

これで、WEBページの下書きを作ることができます。もちろん、下書きだけでもWEBページとして機能しますので、HTMLのみを使用することも可能です。

CSS

 またまたウィキペディアさんのを。

 Cascading Style SheetsCSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTMLXML の要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。文書の構造体裁分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

Cascading Style Sheets - Wikipedia

 またまた簡単に説明をします。

俺的CSS解説

例えばこのブログの中見出し(上の行で「俺的DSS解説」ってあるとこ)とか、いい感じに装飾されていますよね。こんな感じに、WEBページを華やかにしたいときにCSSは持ってこいです。

この場合だとCSSでは「中見出しは左に赤い棒と数字を付け足す」といった内容のものが書かれています。CSSはこのように装飾をルール付けできるのです。

JavaScript

wikiだとこんな感じ。

JavaScript(ジャヴァスクリプト)とは、プログラミング言語のひとつである。Javaと名前が似ているが、異なるプログラミング言語である(後述の#歴史を参照)。

オブジェクト指向スクリプト言語であることを特徴とする。

実行環境が主にウェブブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。

JavaScript - Wikipedia

 けっこう重要なことが書いてあるので、解説していきます。

俺的JavaScript解説

これに関しては難易度が高いです。俗にいうプログラミングなので、初心者にはオススメはできませんね。その代り、かなり自由度の高いWEBページを作ることができます。

JavaScriptでできる事の例として「ボタンを押したら自動でスクロールする」とか「マウスカーソルを画像が追いかけてくる」などがあります。

動的なWEBページを作りたい人にオススメです。

使用例

解説を見てもぱっとしない人のために、例を用意しました。

こんな感じのHTML・JavaScriptCSSを用意したとします。

HTML内の2行目でJavaScriptを、3行目でCSSを読み込んでいます。

JavaScriptでは「ボタンを押したら数字が増える」ように、CSSでは「リンクがすべて緑色になる」ように記述しています。

それを実際に表示したページはこちらになります。

さいごに

いかがでしたか?今回は細かい解説は抜きでやりましたので、わからない部分も多いと思います。わからないところや、もっと知りたいことがあればぜひこちらまで気軽にどうぞ!

 

今回の記事はいかがでしたか?感想お待ちしています!