daiki_dai_kiの日記

プログラミング学習のアウトプットや学んだことを書きます!

【アウトプット】身近と言語〈HTML&CSS編〉

おはようございます。daikiです。

先日の投稿では、『プログラミングに対しての印象』を書きました。
(そちらも読んでいただきたいので貼っておきます...w)

 

daiki-dai-ki.hatenablog.com

 


今回は、自分の認識ではなくアウトプットや事実ベースを取り入れ、
数回に分けて、

について書いていきたいと思います。

今日は、『HTML&CSS編』です。

「なぜこの3つなのか?」

答えは、単純で、今のところこの3つしか学んでないから...w
すみません。でも、学びたてのリアルな感じも込みで楽しんでいただいたらと思っています。

普段、必ずと言っていいほど目にするwebサービスのどの部分にこれらの横文字の難しい用語が使われているのか?という目線も含めて書いていきたいと思います。

今回の目次です。よろしくお願いします。

  1. HTMLとは?
  2. CSSとは?
  3. 最後に


【HTML】
HTMLとは、『見た目』です。
もう少し具体的に言うと、『パソコンに写っているwebサイトで見えるもの全て』です。

例えば、就職活動中に気になる企業を調べるとき、、
GoogleYahoo!で『株式会社〇〇』と検索して、
その企業のホームページをクリックします。
その時に出てきた画面に写っている文字や画像やアイコン、、、。
これらはHTMLというプログラミング言語によって表示されています。

しかし、このHTMLという言語だけでは正直、なんもできません...w
そこで登場するのはCSSです。

なぜ、『HTML&CSS』とペアになっているのか?
きっとわかると思います。


CSS
CSSとは、『装飾』です。

今、見ている企業のホームページには、

「企業名には色がついていますか?」
「強調するところに太文字が使われていませんか?」
「ホームページの背景にはお洒落な色がついていませんか?」
「企業のビルや社員の画像が中央にドカンと大きく載っていませんか?」

それらは全てCSSによって表現されています。

文字の色、大きさ、画像の配置...は、ほんのごく一部です。
世の中のwebサイトにはたくさんの装飾がされています。

これがHTMLだけのサイトだと、、、

HTMLキャプチャ

こんな質素なちっぽけなサイトになってしまいます、、、。
しかし、CSSが華やかな色が追加してくれたり、背景の色をつけたりしてくれているのです。


【最後に】
今回は、実際にサイトを見たときを想定して書いてみました。
概要のなかの概要を話してしまったので、テクニカルなことは一切書いていません。

ですが、このブログのアウトプットでは、
「中学生のころの自分に説明する」というコンセプトでやっています。

当時の自分はロジカルなことが苦手だったので、
最初の入りは「身近にあるものが実はこんな仕組みになっているんだぞ!」
と、好奇心をくすぐる狙いを持たせました。

Ruby編』と『Ruby on Rails編』も近日中アップします。
引き続きよろしくお願いします。

daiki