さて今回はMacでホームページ作成 ページで紹介させていただいたBracketsを使用して解説していきたいと思います。Bracketsは無料のHTML,CSS,Javascriptに特化したテキストエディタで コーディング時にコードヒント等もでますので入力が早くなるばかりかミスの防止にもつながります。 僕が特に気に入っている機能はタグの開始と終わりも下図のようにハイライトで示してくれる機能です。
現状のようなシンプルな構成のときはそんなに恩恵にあやかれないかもしれませんが、サイト規模が大きくなりコンテンツが入れ子になってくるとこの可視性は助かります。
BracketsをつかってCSSファイルをつくります。 command+Nで新規ファイルを作成し保存するフォルダを選択します。
ここではsampleフォルダを選択。さらにそのなかにcssフォルダを作成しcssファイルを保存します。
Bracketsのサイドバーは選択したフォルダの中身が展開されます。
CSSでレイアウトを書くようになるとhtmlファイルやcssファイルをまたいでコーディングしますので、このようにファイルが展開されているとファイル管理も楽ですし、ウィンドを切り替えなくてもファイルを切り替えられるので大変便利です。
ではスタイルを記述していきます。今までは、さらさらっと進行してきましたが、ここからはhtml、cssとあわせてガッツリ覚えていきます。 まず「MY WEB SITE」と書いているヘッダーのタイトル部分にスタイルをあてます。
該当箇所のHTMLにクラスを追加します。下記のような書式になります。
|
1 |
<h1 class="title">MY WEB SITE</h1> |
CSSの書式は「何処に（セレクタ）」「何を（プロパティ）」「どうするか（値）」です。セレクタに「.」がつくとクラスに「＃」がつくとidになります。 htmlでtitleと言うクラスを追加しましたのでクラスtitleをスタイルシートに記述します。
|
1 2 3 4 5 6 7 8 |
.title{ background:#666; color:#fff; font-size:20px; text-align:center; margin:0 0 40px; padding:20px 0; } |
ちなみにidだったとしたらこうなります。
|
1 |
<h1 id="title">MY WEB SITE</h1> |
|
1 2 3 4 5 6 7 8 |
#title{ background:#666; color:#fff; font-size:20px; text-align:center; margin:0 0 40px; padding:20px 0; } |
1つのidは1ページで一度しか使うことができないので注意が必要です。
上記のスタイルでは.titleが「何処に」にあたります。 「何処に」の記載はスタイルを反映させるhtmlにも必要です。それが先ほど追加したclass="title"にあたります。.titleは任意の名前でOKです。.hogehogeとかでも大丈夫ですが.01hogehogeはダメです。 セレクタ名の頭文字に数字を使うことができないからです。.hogehoge01はOKです。なるべく分りやすいネーミングを心がけましょう。 以上を踏まえて上記の内容を説明すると.titleの背景を#666の色で塗り、文字色は白、文字サイズは20ピクセル、文字は中央揃え、外の余白下に40px、内側に上下に余白を20ピクセル入れるという命令です。
#666や#fffは16進数のカラーコードです。
6桁と言うよりは２桁が３つ並ぶ感じです。2桁で対にになっています。
モノクロのカラーコード
カラーコードは「16進数 カラーコード」と検索すればたくさんの色見本がみつけられます。CREATE RECORDではカラーコードは都度紹介します。
Bracketsのライブプレビューで確認すると以下のような感じになっています。
CSSに注釈をいれてみました。
|
1 2 3 4 5 6 7 8 |
.title{ background（背景）:#666（色）; color（文字色）:#fff（色）; font-size（文字のサイズ）:20px（サイズ）; text-align（文字揃え）:center（中央揃え）; margin（外の余白）:上0 左右0 下40px; padding（内側の余白）:上下20px 左右0; } |
一度ではなかなか頭にはいりませんが気にしなくても大丈夫です。1つのサイトを使うのに同じプロパティーを何度も記述しますので、やってればそのうち嫌でも覚えてしまいます。
