kei615ykhm’s programming learning blog

プログラミングを0から学んでいる学生の備忘録

【学びの記録】現代技術の土台であるHTML,CSSを知る

こんにちは。

Keiです。

 

今回は【現代技術の土台であるHTML,CSSを知る】というテーマで

学んだことを自分の言葉で書いていきます。

 

 

プログラミング言語じゃない?!

HTML:正式名称(HyperText Markup Language)通りの意味で、Webサイトの構造を定義するマークアップの言語であり、プログラミング言語ではない

例えば、建築で言うところの”骨組み”であり、後に出てくる様々な言語やフレームワークはHTMLを土台に進化している。

決してHTMLは古い技術ではなく、現代技術の全てがHTMLという言語を「わかりやすく、使いやすく」するために編み出された。

その為、この言語を深く理解することで様々な技術を”応用的”に扱えるようになる。

 

CSS:正式名称(Cascading Style Sheets)、つまりスタイルシート言語。

プログミラング言語じゃない

HTMLで構築されたウェブページの要素に対して色・フォント・間隔・位置などの視覚的なスタイルを適用することで、デザインが向上し、読みやすいものに出来る。

HTML同様、この言語を深く理解することで様々な技術を”応用的”に扱えるようになる。

 

プログラミング言語との違い

マークアップ言語はコンピューターが文書を認識できるようにする技術。

例えば、人間はチラシやパンフレットを見た時、自然に「この部分はタイトルだな、これは見出しだな、これは本文だな、これは注釈だな」ということをデザインやレイアウトから判断することができる。

しかし、コンピューターは視覚的な要素からそれらを認識することが出来ない。

つまり、HTMLはコンピューターにそれらの要素を認識させるためのピン止めをしているようなものである。

 

スタイルシート言語はコンピューターが認識した文書に視覚的スタイルを与える技術。

例えば、人形に服を着せるとき、どんなシャツの色か、どんなズボンの形かを選ぶのと同じように、HTMLの各要素(テキストやボタン)に色・サイズ・配置を設定するようなイメージ。

つまり、Webページがどんな「服」を「どんなコーデ」で着るかを決めるということ。

 

プログラミング言語とは

コンピューターに命令を出して特定の作業を行わせる。

つまり、人間とコンピューターの間でコミュニケーションを取るためのツールのようなもの。

例えば、サルにバナナを取ってくるように命令するときに、日本語で言っても彼らには伝わらない。それと同じで、プログラミング言語は”コンピューターが理解できる言語”ということ。

 

このボタンが押されたら音楽を流す。

同じ作業を繰り返す。

入力した数字を覚えさせる。

等々

 

親が子供に「部屋をしっかりと片付けなさい」と躾けるように、

プログラミング言語を用いてコンピューターに様々な作業を行わせるための

 

コミュニケーション言語」でもある。

 

まとめ

HTMLとCSSプログラミング言語ではなく、マークアップ/スタイルシート言語という日本語が通じないコンピューターに人間が視覚的に発見できる要素を見つけさせるための言語

 

複雑な命令は出来ず、決めたことを正しく認識してもらうだけの言語

 

おサルさん、そこにバナナ置いてあるからね(マークアップ

机の上にある箱の中に置いてあるからね(スタイルシート

そのバナナを剥いて、食べた後はゴミ箱に捨ててね(プログラミング)

 

ずっとプログラミング言語だと思ってましたあああああああああああああああああああああああああああああああああああああああああああああ恥ずかしい