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