HTML と CSS について。
HTML と CSS を使って、このページも書かれている。おおざっぱに言うと、
HTML は文章の構造を示したマークアップ言語
で
CSS は文章の見た目を整えるマークアップ言語
である。これら (言語構造と装飾) は厳格に区別されるべきである。昔、自分が大学で習ったときには、そんな概念がちゃんとしてなくて、一旦ハマっていろいろ作ったこともあったけど、メンテナンスの煩雑さから遠ざかっていた。今 (2014/3/12 現在) の HTML の最新ヴァージョンは HTML 5、CSS の最新ヴァージョンは CSS 3 である。これらの仕様は
W3C
が策定している。
さらに、web ページは様々なプログラムを駆使して作成される。個人的にすぐに深入りする気がないが、Javascript を使えばこのページのトップ画像のようにランダムに絵を変えたり、ゲームを作ったり、訪れた人の動きに依って動作を変えることができる。
さらにさらに、自分で web サーバーを稼働させて
php
なんかを動かせば、サーバー側での処理も可能になり、多くのことができる。(いまのところ時間がないので試す予定ではない。)
下の方で述べるが、CSS もより便利に管理する方法 (
Sass
と呼ばれる) が用意されているようでこのことは後で述べる。
HTML のこと
HTML はマークアップ言語であるため、特別な意味を持つ文字が多数あるが、それらをそれら自身として出力する方法は、実際のそれを記述せずに以下を記述する。
- → → →
- & → &
- < → <
- > → >
- ∗ → ∗
- √ → √
- § → §
やってはダメなこと。
ブロック要素とインライン要素をちゃんと把握すればいいが、とりあえずの自分の為のやりがちな禁止次項を羅列。まとまってるサイトは →
このタグの中ってなんのタグがかけるんだっけ？。
- label タグの中に div タグはダメ
- p タグの中に h タグ、ul タグはダメ
- dt タグの中に div タグはダメだけど、dd タグの中に div タグはオッケー
しかし、p タグの中の ul タグがダメというのは、何とも腑に落ちない。
Haml は HTML を書くためのツールである。HTML 自体を直接書くのではなく、HTML を作るための Haml を書く。Haml の方が、変数が使えたり、閉じ括弧を自動で付けてくれたりと、何かと便利である。ブラウザが初めから Haml を理解すればいいのだろうが、そうなっていないので、1 ステップ多くなるが、その方法を取る。
書き方については、以下で徐々に説明するが、Haml を書いたら、コンパイルという作業をして、HTML を作る。Haml のファイル xxx.haml を使って、xxx.html を作るには以下のコマンドを用いる。
1 | haml -f html5 xxx.haml xxx.html |
Haml の基本
Haml は HTML の入れ子構造を再現するために半角スペース 2 つを用いる。例えば、一番簡単な HTML
を作るなら、Haml で、
と書けば良い。!!!というのは、html のタイプを書き込むマークアップである。今回は、-f html5としたので、Html5 に準拠した出力がなされる。head と body は html 内のタグなので、半角スペース 2 つを用いて字下げを行っている。
タグ内に何か入れる場合はすぐ隣に書く。次の場合、
1 | <p>この文章は p タグ内にあります。</p> |
ID の付与は、#id などとして、タグのすぐ後に書く。
例えば、
1 | <h1 id="title">タイトル</h1> |
クラス の付与は、.class などとして、タグのすぐ後に書く。
例えば、
1 | <h1 class="colored">タイトル</h1> |
-
子要素に対して Html にしたときに一行にタグと要素を書く方法。
- タグの隣に要素を書く。
-
ソース:
-
出力結果:
- < 記号を書く。
-
ソース:
-
出力結果:
-
親要素に対して Html にしたときに一行にタグと要素を書く方法。
- > 記号を書く。
-
ソース:
-
出力結果:
-
親要素、子要素両方について Html にしたときに一行にタグと要素を書く方法。
- > と < は一緒に使える。
-
ソース:
-
出力結果:
1 | <ul><li>sentence1</li></ul> |
2 | <ul><li>sentence2</li></ul> |
CSS のこと
いくつかの単発な使い方。
影を付ける。(参照:
ほんっとにはじめての HTML5: box-shadow)
Float を理解する (参照:
初心者がよくハマる、CSS の float プロパティ徹底攻略)
コンテンツが Float で高さを持たない場合の背景設定のおまじない。
CSS テクニック
テクニックを応用してコードサンプル等を実装 (参照:
CSSだけ！クリックでスムーズに開閉するアコーディオンメニュー)
コードのハイライト
SyntaxHighlighter
を使ってコードをハイライトする。やっていることは、Javascript と専用の CSS を用いてタグで囲まれた範囲を装飾しているに過ぎない。現在の最新ヴァージョンは 3.x 系だが、ここではコードの自動折り返しを行いたいので、Ver. 2.x 系を使う。
以下の内容を タグの中に書き込む。
-
コードを囲むタグを script にする。
1 | SyntaxHighlighter.config.tagName = "script"; |
-
マウスオーバーしたときにツールバーを表示する (Flash)
1 | SyntaxHighlighter.defaults['toolbar'] = "true"; |
-
コードを隠して、リンクを貼る。
1 | class="brush: html; collapse: true;" |
現行の CSS では非常にまどろっこしい書き方が多いし、変数を使うことができない。そこでこの Sass という言語を使うと、CSS ファイルを作成するときに変数を定義したり、ファイルを分割して管理したりして効率よく作業ができる。CSS を直接分ける方法もあるのだが、パフォーマンスが落ちたり、読み込みの順番等でよからぬ挙動を示すことがあるため、Sass の方が優れている。それ以外の付加価値もたくさんあると思うがそれは本家サイトを見るなどして勉強して欲しい。
導入 (Mac の場合) は、以下のようにする (参照:
CSS拡張メタ言語「Sass」フレームワークをインストール（Mac）)
少し説明すると、
- sudo は管理者権限で実行するという意味である。インストール関連の作業をするときは付ける。
-
gem は
Ruby
系のパッケージ管理システムとあった。ということは、
MacPorts
でもあるのかな? と調べると、あるみたい。いつもは MacPorts でパッケージ管理をしているのでそちらの方がいいかも? それとも、Ruby 系のものは Ruby 内で完結させた方がいいか? (保留)
という感じ。後は install コマンドで sass を入れろということなので、説明不要。
実は、上の参照ページでは、
haml
を入れているが、sass だけ使う場合は sass だけインストールすればいい。haml は sass の HTML ヴァージョン、つまり、Ruby を使って html を効率的に書くツール (?) だと思われます！
基本的な使い方は、
1 | sass <ファイル名(*.scss)>:<ファイル名(*.css)> |
1 | sass --style <指定> <ファイル名(*.scss)>:<ファイル名(*.css)> |
- nested: 人が見て分かりやすい形 (default)
- compact: ネストが行われない形
- compressed: 改行も取り払われた形
と選ぶことで css の見た目をサイズを決めることができる。
また、
1 | sass --watch <ファイル名(*.scss)>:<ファイル名(*.css)> |
とすることで、scss ファイルを変更する度に自動で css ファイルを更新してくれるようになる。但し、試した所、scss ファイル内で @import したファイルは監視してくれないようだ (T_T)。
基本的な使い方は詳しく
【Sassを覚えよう！】もくじ的なのと参考リンク
で触れられているので参考にしてください。
