HTMLとCSSとプログラミング言語
HTMLとCSSはマークアップ言語らしい
前回のエントリーから１ヶ月と少し。
Atomというテキストエディタを仲間に迎え入れて、HTMLとCSSでなんちゃってwebページを作ってみた。
HTMLは、head要素、 body要素、HTML要素で構成されるマークアップ言語。
/とか<>とかを多用する割には、どうやらプログラミング言語ではないらしい。
head要素とHTML要素は、webページ上には表示されず、見せたい部分は、body要素に書く。
はてなブログのHTML編集を覗くと、なんだか自分でも書けそうだが面倒なので見たまま編集で書いてしまう。
「かける必要のない労力は省いて勉強しよう」というのは良いことかもしれない。
それから、このHTMLのbody要素に色をつけたり、形を変えたり、並び順を指示したりして、
webページ上で表示される情報の形を整えるのが、CSSというマークアップ言語らしい。
こいつも、;とか:とか、.なんちゃら{}とか使うくせにマークアップ言語であってプログラミング言語ではない。
別にプログラミング言語が偉いと思っているわけでもないが、マークアップとプログラミングは違います、と言われると「えーどこがどう違うの？なんか囲ってるじゃん」と思ってしまう。
この辺りは、変数とか計算とかそういう類のものが入ってきて初めてプログラミング言語なんだろうか？
HTMLを書いてみた
Atomを開き、index.htmlというファイルを作る。
嘘だ。HTML5★Boilerplateなるサイトからテンプレートを拝借した。
そこから、自分なりに「え、ここ要らないでしょ」という部分を消していった。
すると、<!DOCTYPE html>という宣言（「こいつはHTMLだ」という意味だろうか）と、
<html lang="ja" dir="ltr">のみが残った。
そこに<head></head>で囲んだhead要素と<body></body>で囲んだbody要素を書いた。
仕上げに</html>で閉じて最低限の準備は整った。
head要素には、<meta charset="utf-8">なるものを書いた。これは、本当に全く意味がわからない。
DOCTYPEは、多分document typeで「この文章はHTMLです」と言いたいんだろうな、と分かるし、
langはlanguageで、jaはjapanese、dirはdirectoryでltrはlitretureだろうか？と勝手に思い込んでいる。多分、「日本語で書きます」と言いたいんだろう。
でも、meta charsetは意味がわからない。metaは何か超越みを感じるし、charsetは、character setとかそういう意味だろうか？
だとしても、uft-8は全く意味がわからない。
ただ、調べると「HTMLはこう書いて準備完了です」とあったので、疑問を持たずに真似をした。
まぁ、この辺はどうせ見えない部分なので、body要素を頑張って作ることにした。
初めてのwebページ作成となったが、そもそも書きたいことがない。
いや、一つだけある"Hello World"だ。このセンテンスだけは、誰もが書いている。
これを書かない手はない。
その他は味気ないが、勉強したいことの羅列にすることにした。
CSSで修飾していく
HTMLで書いたbody要素は、CSSで修飾していくことなる。
CSSはHTMLとは別のファイルで作成し、HTML上のhead要素に「このCSSファイルを読み込んでね」という指示を書き込んでおく。
CSSで出来ることはかなりたくさんある。
改行やら文字のある程度の大きさは、HTMLでも指示できるが、ウィンドウサイズに合わせて文字を変えたり、色を変えたり、カーソルが近づくと光るボタンみたいにしてみたり、要素を並べたり、ある要素を基準に別の要素を配置したり、そういうことがCSSには出来る。
正直、こんなことができますよ、と言われても、意味が分からない。
「これをするためにはどうしたらいいの？」とググりながらの作業になる。
この辺りは、言語学習っぽいので、楽しかった。
ウィンドウサイズに合わせて変化する仕組みを組み込む
CSSで色々書いているうちに、文字を全てvwで指示する癖に気づいた。
なんとなく、ウィンドウを小さくした時には、文字も小さくなってほしいし、大きくした時には、大きくなってほしいという心理が働いたのだ。
ということで、vwで全部の文字の大きさを指示してみたが、それだけでは何か面白くないし、
CSSの使い方を調べていくうちに「PC、スマホ、タブレットはそれぞれウィンドウサイズが異なるので、その大きさに合わせて配置を変えてみましょう」というような説明にたどり着いた。
なんだそれは。どうやってやるんだ。
CSSには、メディアクエリといって「このウィンドウサイズの時は、こっちの指示で動いてね」という書き方が出来る機能があるらしい。
自分には難しすぎたので「このpxサイズ以上の時は、こっちのCSSファイルを開いてね。こっからここまでは、このCSS。それ以下は、これでお願いします」と3種類のCSSファイルを作って対応することにした。
これで良いとは思えないが、仕方ない。
（Webデザインを生業にしている知り合いから、Bootstrapを勧めてもらったので、次に勉強するのは、これになる)
全部まとめてGitHubに放り込む
HTMLとCSSでなんとなくwebページっぽいものが出来たので、GitHubというなんだかよく分からないけど素晴らしいっぽいサイトに放り込んでみた。
こいつは、優秀でindex.htmlのファイルを探してwebページを作ってくれる。
今までは、safariやらChromeでindex.htmlを開いてオフラインで確認していたが、webページを作ってくれるとオンラインから確認できるようになる。
Practice_webPageが成果物だ。
感想
非常に味気ないwebページを作ってみた感想として、
- HTMLもCSSも最初は意味が分からないがルールが分かれば書くことはできる。
- Webページを作るのには、言語以上にデザインセンスが問われる。
- 「これどうやるんだろう」と閃けば大体やり方はネット上に落ちてる。
- とりあえず作ってみればHTMLとCSS、GitHubが機能する。
- 調べながら作業すると疲れる。
- モニターの光は目に悪いし、PCの前に座ってキーボードを叩くと肩が凝る。
- これからプログラミング言語を学んでいくと思うと恐ろしい。
ぱっと挙げると以上の７つくらいの感想になる。
HTMLとCSSは入門レベルなら、多分そこまで難しい言語じゃない。
指示が英語そのままなので、英語ができればほとんど困ることがないんじゃないかな。
というか、英語ができないと、CodePenとかBoilarPlateとか参考になりそうな面白いサイトが読めないかも。
でも、Qiitaを使ったりうまく検索できれば、日本語で役立つヒントに出会えるのでなんとかなる（多分）。
CSSはできることがすごく多そうなので、沼にハマると楽しくて抜け出せなくなるだろうな、と感じた。
次回は、Bootstrapを使ったwebページの作り方を勉強していく（つもり）。
