【第2弾】HTML/CSSと友達になる【コンペでプログラミングに入門！】

概要

プログラミング入門のきっかけつくりのためにWebコンペを開催します。

【初心者歓迎！賞金５万円！】HTML/CSS/JaveScriptで挑むWebコンペ！【MoquMoquCOM】

このシリーズでは、上記のコンペ参加に必要な知識を数回にわけて、公開していきます。必要な知識を１日で速習する勉強会も開催しますので、ご都合合う方は是非いらしてください。メンターに質問し放題です。

今回のテーマ

今回のテーマは、「HTML/CSSと友達になる」です！

前回はソースコードに触れ、アプリケーションがプログラムのソースコードによって制御されている感覚を感じていただいたと思います。

今回と次回(後日公開)で、本テーマで扱っているアプリケーションに利用されている「HTML/CSS/JavaScriot」について理解していきましょう！

HTML/CSSと友達になる

友達になる前にお二方から自己紹介していただきます。

HTMLとは

HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。-Wikiより

いきなりこの内容を読むと、少し吐き気がしますね。マークアップ( markup )言語とは、視覚的な表現や、文章についての構造を示すための言語です。

例えば、下記のような作文の原稿があったとします。

タイトル：「HTML/CSSと友達になる」
著者：「小橋俊介」
本文：「今回と次回(後日公開)で、本テーマで扱っているアプリケーションに利用されている「HTML/CSS/JavaScriot」について理解していきましょう！」

当たり前ですが、上記の原稿からはこんなことが読み取れます。

作文のタイトルは「HTML/CSSと友達になる」である。
作文を書いたのは「小橋俊介」である。
本文は、”本文：「～”から始まる箇所をみればわかるはずである。

これが文章の構造です。

人がみれば簡単ですが、コンピュータからするとなんのこっちゃわかりません。なので文章構造をある一定のルールで記述することにしました。それが HTML です。

<h1> HTML/CSSと友達になる</h1>
<author>小橋俊介</author>
<article>
  今回と次回(後日公開)で、本テーマで扱っているアプリケーションに利用されている「HTML/CSS/JavaScriot」について理解していきましょう！
</article>

※”h1” は Heading 1 の意味で、一番広範な見出しを指します。

これでコンピュータも理解できるようになりました。この内容を表示したのが下記です。

https://codepen.io/ksyunnnn/pen/LLRpvv

これは非常にシンプルな例です。実際のところ、原稿などの文章には、「見出し」もあるし「段落」もある。他にも、強調したい箇所もあれば引用した文章を表したいこともある。このあたりは挙げ始めるとキリがないので、後述する参考サイトを確認してみてください。

よくあるシンプルなHTMLを書いてみました。

https://codepen.io/ksyunnnn/pen/LLRGEK

見出しは <h1>～</h1>、<h2>～</h2> 段落は <p>～</p> で囲んでいるのがわかりますね。HTMLは、構造として表現したいを文章・単語を< xxxx >～ </xxxx >といったタグで囲むのが特徴です。

参考

まとめ

HTMLは視覚的表現や文章の構造を示すための言語

CSSとは

CSSとは、HTMLにて示してきた構造に対してスタイルを指定するための言語です。先ほどの節で記載したHTMLをみてみましょう。

https://codepen.io/ksyunnnn/pen/LLRGEK

はっきり言わなくてもダサいし、みづらいですよね。。CSSを記述し、スタイルを適用してみます。

https://codepen.io/ksyunnnn/pen/owzbLv

はい、見やすくて、圧倒的におしゃれになりました。すいませんおしゃれで。。

これはすべて、CSSのおかげです。こんなCSSを書いてます。

body {
 font-family: 游ゴシック;
 font-size: 14px;
 background: gray;
}

h1 {
  font-size: 1.8em;
  border-bottom: 1px solid gray;
}

h2 {
  font-size: 1.6em;
  padding-left: 10px;
}

div {
  max-width: 640px;
  margin: 30px auto;
  padding: 30px;
  background: white;
}

※body タグは、ページ全体のことを指す、とくらいに今は理解しておいてください。

※div タグは、このタグ自体に意味はなく、レイアウトの塊を示すためのタグとして利用されます。

上記のコードを見ても、何を言っているのかわからないですよね。だいたいこんなことを言っています。