< 田中麗奈のポジション... | http://anond.hatelabo.jp/20111... >

2011-11-27

■ガチ無知でもわかるHTMLとCSS

ガチ無知というのは「HTMLとかの知識が全くない人」という意味です。他意はありません。

先日「WEBサービスを作りたい！」と思い立ったガチ無知の自分。まずHTMLから勉強した。そんな自分の理解を復習ついでにまとめてみる。

まあはてな界隈では少ないだろうけど、俺と同じガチ無知の人がいたら、HTML/CSSについてイメージが掴める、かも。間違ってたらごめんね。

HTMLとは

HTMLをプログラミング言語みたいなもの？と思ってた人。（少なくとも俺はそうだった）　　違います。

じゃあHTMLとは何か。文章を飾り付ける魔法だ。飾り付け。それ以上でもそれ以下でもない。

世の中には数多のサイトがある。数多のデザインがある。アレ全部文章の飾り付け。画像？Flash？飾り付けだ。

HTMLは、ずらっと文字だけが並んでるとページが見づらいからそれを見やすくする魔法。とりあえずそう認識しとこう。

HTMLの使い方。

HTMLは「文章を飾り付ける魔法」だ。じゃあ魔法を使うにはどうすればいい？

呪文を使うんだ。35まで純潔を貫き通す必要のないお手軽な魔法だ。

じゃあ呪文の使い方をば。

[呪文　　　飾り付けたい文章]　　←これを

[呪飾り付けたい文章文]　　　　　←こう

そう、挟めばいい。HTMLは範囲指定魔法。だから効果範囲を呪文で挟む。以上。HTMLの使い方解説終了。

せっかくなので具体例

ガチ無知でもわかるように実際に呪文を使ってみよう。

↓これは、文章を強調する呪文。　

＜strong＞＜/strong＞　

で、↓この文章の一部に魔法をかけよう

HTMLは、"HTML is Text Markup Language"の略です

これを、

＜strong＞HTML＜/strong＞は、"＜strong＞HTML＜/strong＞ is Text Markup Language"の略です

こうやって魔法をかけたい部分だけ呪文で挟む。

すると、

HTMLは、"HTML is Text Markup Language"の略です

こうなる、と。おしまい！

CSSとは

ここまででわかるだろうけど、俺の解説はものごっつい大雑把だ。

引き続き、CSSを大雑把に定義する。

CSSは、HTMLという呪文を強化する魔導書だ。

「呪文を強化する」　　魔力を底上げするわけじゃない。魔導書は特定の呪文しか強化できない。

氷の魔導書を読むと、ヒャドは強化されるけど、メラは変化なし、みたいな話。

CSSの使い方。

CSSの使い方はHTMLより適当です。ごめん。

CSSと言う名の魔導書の書き方はこうだ。

強化する呪文名 { 強化内容 }

以上！

CSS使い方の具体例

じゃあさっきHTMLの紹介で使った＜strong＞呪文を強化する魔導書をつくる。

strong {color: red;}

これは、strongに{color: red;}の効果を追加する魔導書。読んで字のごとく。色を赤にする追加効果。

このCSSを適用すると、

さっきの飾り付けた文章が

HTMLは、"HTML is Text Markup Language"の略です

となる、と。呪文自体が強化されてるから両方赤になっている、と。

以上。終了。



さらっとメモ書きをするつもりが、すっげえ長々と書いてしまった。

まあインターネッツの大原則として、「間違ったことをドヤ顔で披露するとみんなに修正してもらえる」というのがあるので、このエントリもそういう役割を果たしてくれるんじゃないかな、、、

あ、今回勉強したのはここです。

HTML4.0を勉強したんだけど、HTML4→HTML５の違いというのは、魔法を使う杖がランクアップしたようなもの、という認識でいいのかな？

Permalink | 記事への反応(2) | 00:53

記事への反応 -

記事への反応（ブックマークコメント）

人気エントリ

注目エントリ

ログイン ユーザー登録
ようこそ ゲスト さん