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

概要

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

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

今回のテーマ

今回のテーマは、「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 の意味で、一番広範な見出しを指します。

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

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

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

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

参考

• HTMLタグリファレンス
• おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

まとめ

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

CSSとは

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

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

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

これはすべて、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 タグは、このタグ自体に意味はなく、レイアウトの塊を示すためのタグとして利用されます。

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

• bodyタグに対して、フォントは「游ゴシック」を使って、基本の文字サイズは14pxでよろしく。背景グレーね。
• h1 の文字サイズは1.8emでよろしく。かっこよく下線いれておいて。
• h2 の文字サイズは1.6emくらいで。なんか気持ち左側に余白いれといてよ。
• div で囲んだレイアウトの背景は白にしといたほうがいいね。余白は30px入れておこう。ページ全体の中央に配置できるようにしたいね。最大の幅は640pxで。

こんな感じです。少し慣れるまでは複雑ですが、デザインが好きな人とかは、慣れると最強に楽しいかも。プログラミングしたいぜー！って人には物足りなさあるかもね。

少し余談

CSSはスタイルシートととも呼ばれまして、実はみなさん結構使ったことあると思います。

オフィスソフトのWordとかで、書いた文章・原稿に対してレイアウトやデザインの調整したことありませんか？そうです。あれすべてスタイルシートのおかげです。CSSなんてあんなもんです。

つまりCSSっていうのも同じ理屈で、文章に対して「レイアウトと、デザインはこんな風に表示してね」と指示してあげるための言語なんです。

まとめ

CSSとは、HTMLにて示してきた構造に対してスタイルを指定するための言語。

次回

このコラムで、HTML/CSSって、たいしたことしてないんちゃう？？とか、Webデザインしたいなら知っとくべきやなあ、とくらいに感じていただければ最高です！

次回、HTML/CSSを利用して、グラフをデザインする実践的なコラムをお届けしたいと思っているので、乞うご期待ですね！

質問がありますか？

メンターへの質問用のチャットを、Slackというチャットツールを利用して公開しております。メンターに質問したい方は、下記リンクより、チャットグループへご参加ください。

最後に

まだいきなり参加は不安だな、と思う方には、ハンズオン形式の勉強会も開催します。奮ってご参加ください！