おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。一応スナップ写真がメインです。

テキストエディット(Mac)の設定と基本的なページを作成しよう -『HTML5&CSS3レッスンブック』第1章

www.okigaru-migaru.net

この記事で書いていた通り、HTML5とCSS3の勉強をしていきます。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

使うテキストは『HTML5&CSS3レッスンブック』です。これのチャプター1、すなわち第1章を進めていきます。

かなり基本中の基本なのでサクッと終わるだろう……と思ってましたが設定の段階で少し手間取りました^^;

Macのテキストエディットの設定

まずは環境を整えます。僕はMacを使っているので標準で入っているテキストエディットを使います。

環境設定新規書類タブでは、フォーマットの標準テキストにチェックを入れます。

テキストではここだけをチェックすればいいと書かれていますが、下の方のオプションも画像のようになっているかを見ておきましょう。

後述しますが、スマート引用符にチェックが入っていたことで設定に手間取りました。

開く/保存タブで、「HTML ファイルを、フォーマットしたテキストではなく HTML コードとして表示」にチェックを入れ、「標準テキストファイルに拡張".txt"を追加」のチェックを外します。

これでテキストエディットを使ってHTMLやCSSの記述が可能になります。

スマート引用符に注意

上記の設定を済ませて早速テキストに従ってコードをカタカタ〜と入力します。

そしてブラウザで確認するもどうもおかしい。CSSの変更が一切反映されません。

www.socym.co.jp

書籍の公式サイトでサンプルデータをダウンロードしてファイルを開いてみると正しく表示されます。

いったいどこが間違っているのか……。サンプルデータのコードをコピペしながら確認して初めて気づきました。

こちらがNGなコードです。ラインを引いたところに注目です。

そしてこちらが正しいコードです。どこが違うのか一見わかりませんよね。

」をよ〜く見てください。上のスクショでは何だか「"」がかっこよく見えませんか?

これはスマート引用符というものらしく、誰得か知りませんが「"」や「'」といった引用符がスマートに表示されるみたいです。

ただスマートに表示されているだけならいいのですが、HTMLやCSSのコード上だと正しく認識されません。「"style.css"」を正しく読み取れなかったからCSSが反映されなかったのですね。

この問題に気付くまで結構時間を要しましたね。そして今回の勉強の1番のメインだったかもしれませんw

基本的なページの作成

では基本的なページの作成をしていきます。基礎中の基礎です。

実際に僕がコーディングしてサーバーにアップしたページを載せていますので参考にしてみてください。ってか「Hello World!」からやらないのね。

今のところコードも少ないので引用して貼り付けています。この方が見やすいでしょうしね。

それぞれ僕が改めて知ったことを書いています。前から熟知しているようなことは省略していますので、ちゃんと知りたい人は記事最下部のリンクからテキストを買ってくださいな。

HTML

http://test.okigaru-migaru.net/html5css3/chap01/news01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>真夏のひまわり畑 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<h1>FOREST STUDIO</h1>
</header>

<article>
<h1>真夏のひまわり畑</h1>

<p>森の工房の隣りにある畑は、毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>

<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</article>

<footer>
<small>Copylight &copy; FOREST STUDIO, all rights reserved.</small>
</footer>

</body>
</html>

冒頭に基本的な情報を記述

HTMLの冒頭にはまず、

  • DOCTYPE宣言…HTML5の使用を宣言
  • lang属性…言語の種類を指定

してから、次にheadタグ内に

  • meta charset属性…エンコードの種類を指定
  • titleタグ…ページのタイトルを指定
  • スタイルシートファイルを指定

の順に記述していきます。

また、マークアップせずに単独で機能する空要素(つまり閉じタグが無いタグ)に関しては、XHTMLとの互換性を保つために末尾に「/」を入れることも可能です。

articleタグでコンテンツをマークアップ

HTML5ではheaderタグやfotterタグを使って「どこがどの部分に該当するか」を明らかにするルールがあります。

特にarticleタグはメインコンテンツを示しており、ブラウザの機能で記事の部分だけを抽出して表示するという場合に有効なようです。

SEO的にもarticleタグでマークアップすることで、どの部分が肝要な部分かを知らせる効果があるかもしれませんね。

smallタグでコピーライトをマークアップ

フッターのコピーライトにsmallタグを使っています。

smallタグは単に文字列を小さく表示するだけでなく、警告や免責、コピーライトなどに使えるというものです。

逆に言えば文字装飾として文字を小さくするには別のタグが必要ですね。おそらくfont-sizeとかでしょう。

CSS

http://test.okigaru-migaru.net/html5css3/chap01/style.css

body {
    font-family: 'メイリオ',
    'Hiragino Kaku Gothic Pro',
    sans-serif
}

h1 {
    font-size: 38px;
}

p {
    line-height: 1.5;
}

CSSの記述方法

CSSの記述のルールは、

セレクタ {プロパティ: 値;}

と表記し、プロパティと値のセットを宣言と呼びます。

;」で区切って複数の宣言を指定することが可能ですが、単体の場合は省略してもOKですし、逆に常時記述してもOKです。

テキストでは「;」は記述しておりませんが、個人的には「;」を付ける方が馴染みがあるので付けてます。

フォントの指定

bodyセレクタのfont-familyプロパティでフォントを指定します。

ここでは

  • メイリオ
  • Hiragino Kaku Gothic Pro
  • sans-serif

が値に入力されています。

まず「メイリオ」が使える環境(主にWindows)なら「メイリオ」を使用し、使えない環境(主にMac)なら「Hiragino Kaku Gothic Pro」、それも使えない場合は利用可能なゴシック系のフォントを使うという意味で「sans-serif」と値に記述します。

「メイリオ」と「Hiragino Kaku Gothic Pro」は固有名詞なので「」で囲みます。代わりに「」で囲ってもOKです。

文字サイズと行の高さの指定

font-sizeプロパティで文字サイズ、line-hightプロパティで行の高さを指定します。

まず文字サイズに関しては「px」か「em」で指定します。pxは絶対的な文字サイズを指定するのですが、emは基本となるbodyセレクタの文字サイズ(px)に対して何倍かを指定します。

例えばbodyセレクタの文字サイズが16pxの時、2emで指定すれば32px、3emで指定すれば64pxとなります。つまり2em=200%ですね。

line-heightプロパティの記述も似たようなもので、単位を付けずに記述すると基本となる文字サイズに対する倍率で表示されます。ここでは1.5なので16pxの1.5倍で24pxが行の高さとなります。もちろんpxや%での指定も可能です。

第2章ではレイアウトとデザインを勉強します

第1章はまだ簡単ですね。でもよく読み込んでみて「そうだったんだ!」って知識も結構ありました。

次は第2章、レイアウトとデザインについて勉強します。主にCSSが範囲でしょうかね?

www.okigaru-migaru.net

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック