HTML/CSSの勉強-その2

前回は開発環境(?)を作ったので、実際に書いてみる。そうそう、HTML5 のテキストエンコーディングは UTF-8を使用することが推奨されているためVS Codeの設定を確認しておいた(と言ってもエディタ下部にUTF-8と表示されているのを確認しただけ)。

最も基本的なこと

HTMLの最も基本的な構造は以下。HTMLは “タグ” と “属性” によって構成されている。タグとは<html>のように<>で囲まれたもので、これで文章に意味や機能を付加する。普通はマークアップ対象の文章を開始タグと終了タグで囲むが、<meta charset=”utf-8″>のように内容を持たず、単に部品を配置するだけの場合は終了タグを書かないこともある(画像の挿入とかもね)。タグとマークアップ対象の文章も含めたカタマリを要素と呼ぶことが多いため覚えておく(タグと要素は同じものとして扱わられることもあるが、一応区別されているらしい)。

属性は要素に情報を付加するために使う。基本形は<タグ 属性名=”値” 属性名=”値” ……>文章</タグ>で、HTMLはこれがいくつも配置されているだけだと考えて良い。属性はタグ特有のものもあるが、どのタグにも付けられるグローバル属性というものもある。よく使うものだとid属性、class属性、style属性といったところ。属性の値を指定する際は””で囲むことに注意。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>はHTMLのバージョンを宣言するためのもので、今回はHTML5で書いていますよと宣言している。ブラウザはこれを見て、そのルールに従った表示をする。続いて<html lang=”ja”>はHTML文書であることを明示しているとともに、属性として日本語であることを伝えている。

あとは<head>要素と<body>要素がある。<head>要素はHTML文書全体の情報を記述するもので、<body>要素はHTML文書の内容を記述するもの。<head>要素では①文字コードがUTF-8であること ②ページのタイトル ③CSSの読み込みを行っている。

<title>要素で指定されたタイトルはブラウザのタブ上に表されるらしい。<link rel=”stylesheet” href=”stylesheet.css”>は、まずrel属性でリンクタイプがstylesheetであることを明示して、href属性(Hypertext REFerence:リンク参照先)で読み込むCSSファイルを指定している。hrefとは何ぞやということで調べてみると “関連文書のURI” なんて解説されているけど、URIって何なんだ。Web担当者なら知ってて当然!?「URL」と「URI」の違いとは?によると、URIとはUniform Resource Identifierの略で、URL(Web上のアドレス)と(URN=Web側で認識されている名前)の2つを総合してそう呼ぶとのこと。

以上、いくら複雑なHTMLでも基本の形はこれ。

 

CSSを書いてみる+α

CSSとはHTML文書のスタイルを指定する言語。昔はスタイリングも<head>要素に<style>タグを用いて記述していたが、最近はファイルを分けるのが普通。こうすることでHTMLは文章の構造化のみを担当すれば良くなった(と言いつつ、style属性というものでHTMLにちょこちょことスタイルを書くこともあるらしい)。

試しに基本的なタグを使って文章を書き、一部にスタイルを当ててみた。以下がHTML/CSSのコードとブラウザでの表示。

HTML
<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="stylesheet.css">
        <title>KAMAKURIUM</title>
    </head>
    <body>
        <h1>MyFirstHTML!!</h1>

        <p>cssを使ってみる</p>

        <!--画像-->
        <h2>画像</h2>
        <img src="./img/ディレクトリ構造.jpg" alt="ディレクトリ構造" width="123" height="69">

        <!--リスト-->
        <h2>リスト</h2>
        <ul>
            <li id="unique">ハードウェア</li>
            <li class="selected">ソフトウェア</li>
            <li class="selected">メカ</li>
        </ul>

        <!--定義リスト-->
        <h2>定義リスト</h2>
        <dl>
            <dt>HTMLとは(定義)</dt>
            <dd>ハイパーテキスト・マークアップ・ランゲージ(内容)</dd>
            <dt>CSSとは(定義)</dt>
            <dd>カスケーディング・スタイル・シート(内容)</dd>
        </dl>

        <!--リンク設定-->
        <h2>リンク設定</h2>
        <p><a href="http://kamakurium.com/" target="_blank">トップページへのリンク</a></p>
        <p><a href="http://kamakurium.com/" target="_blank"><img src="./img/ディレクトリ構造.jpg" alt="ディレクトリ構造"  width="123" height="69"></a></p>
        <p><a href="#unique" target="_blank">ページ内リンク</a></p>
        </body>
</html>
CSS
h1 {
    color: #07b496;
    font-size: 20px;
    font-family: sans-serif;
    background: #E6F8E0;
    height: 80px;
    width: 200px;
}

h2 {
    font-size: 16px;
    font-family: sans-serif;
}

p {
    color: #2ECCFA;
    font-size: 12px;
    font-family: 'Microsoft Sans Serif';
}

/* idセレクタ */
#unique {
    color: #F79F81;
}

/* classセレクタ */
.selected {
    color: #BCA9F5;
}
ブラウザでの表示

HTMLの説明

<body>要素にいくつか書いてみた。<h1>はおなじみ見出しタグ。おそらく、WordPress使っている人はHTMLの知識が1ミリも無くてもこれだけは知っていると思うので説明は省略。<p>タグはparagraphの略で、囲った文章が段落になる。別に<p>を使わずにそのまま書いても良いけど、特定の文章にcssでスタイルを当てたい場合などに<p>で囲うらしい。なるほど、cssでのスタイリングはタグで囲われた文章にしか当てられないからね。

<img>は画像を表示するためのタグ。「画像ファイルのパス」と「代替テキスト」をセットで記述する。複数の属性を記述する場合、順番に制約は無いためalt属性から書いても良い。パスはindex.htmlから見た相対パスを書けば良い。今回はimgフォルダを作成してその中に入れたので、「./img/」となる。自分と同じ階層を表す「./」の後に続けてパスを書いているが、この「./」はよく省略される。ただ自分はこの省略があまり好きじゃないため書いておくことにした。ちなみに、<img>はマークアップ対象が無いため終了タグが要らない。また今回はサイズ指定もしてみた。123/69と半端な値なのは単に切り出した画像のピクセル値がそれだったから。ただ画像サイズを調べて入力するのがかなり手間。そこでサイズ指定しなかった場合のデメリットを調べてみたところ、いくつかのサイトで「レンダリングに時間が掛かる(画像をダウンロードしてからレイアウトを計算するから)」「Javascriptエラーとなることがある」などが挙げられていた。今のブラウザはサイズ指定しなくても画像表示してくれるが、一般的にはレイアウトを崩さずに画像を読み込むためにサイズ指定しておくらしく、W3Cも推奨しているようだ。ただえ!?まだimgタグのwidthとheightを手入力してるの?では、<img>タグ挿入時に指定ディレクトリ内のファイルが参照でき、ファイルを選択すると勝手にwidth/height属性をセットしてくれるエディタ(と拡張機能?)が紹介されていた。これは是非VS Codeにも入れたい。

<ul>はおなじみリスト。リストタグには<ul>とか<ol>とか<li>とかあっていつも用法を忘れるけど、何の略記が覚えたら定着した。ulは Unordered List の略で順序のないリスト。olは Ordered List の略で順序のあるリスト。そしてliは List Item の略でulやolの子要素だ。また今回、各リストにid属性とclass属性を指定した。これはcssでスタイリングする対象を特定するために使っている。尚、id属性は同一HTML内で1つしか指定できないが、class属性は複数指定できる。id属性は一般にヘッダーやフッターに使用されることが多いが、文章に使う場合は「ページ内でジャンプする場合」や「他のプログラムが要素を取得する場合」に使われるらしい。

<dl>は定義リストとかいうもの。初めて聞いたし、未だに用途が分からない(結局ggっても分からないまま)。これも何の略記か覚えたら良いので書いておくと、dlはDefinition Listの略で定義リスト。dtはDefinition Termの略で定義する単語。ddはDefinition Descriptionの略で単語の説明。

<a>はリンクを飛ばすためのタグで、href属性にリンク先を指定してtarget属性でリンクの開き方を指定する。今回は本サイトのトップページにリンクし、target属性は「新しいタブでリンクを開く」設定の”_blank”とした。また、<a>タグは別のhtmlファイルをリンク先に指定することもできる。その場合、<img>タグと同様にしてindex.htmlからの相対パスを記述すれば良い(今回は別のページを作っていないのでやらない)。2行目では画像ファイルにもリンクを設定できるらしいのでやってみただけ。3行目ではページ内リンクを試している。WordPressで言うとアンカーに該当する機能で、というかアンカーは裏でこれをやっているだけだし、そもそも<a>とはanchorの略。

CSSの説明

スタイリング対象をセレクタと呼ぶらしい。だからここではh1セレクタ、pセレクタなどと呼べば良いのだろうか?何か違う気がする。

それはさておき中身を説明すると、まず<h1><h2><p>とそれぞれのタグに対してスタイルを記述した。ここでは代表的なものだけ書いてみたけど、それはそれは沢山のプロパティがあるらしい。<p>タグではフォント名の値をシングルクォーテーション( ‘ )で囲っているが、これはスペースが含まれているため。別にダブルクォーテーション( ” )でも良いらしい。

あと今回はid属性とclass属性に対してもスタイルを当ててみた。というか、特にclass属性はスタイルを当てるために存在していると理解している(多分間違っている)。例えば今回は<li>タグをスタイリングしているけど、<li>みたいなよく使う属性をスタイリングすると対象が膨大になり使い勝手が悪い。そこでclassを使うと、<li>でも<p>でも良いけどこのclassを指定したものだけ!といった具合にスタイリングできる。idセレクタではid名の前に‘#’を置く。classセレクタではclass名の前に‘.’を置く。

ここまでやってみて、本当に基礎の基礎は理解できた気がする。そもそも、タグも属性も理解していなかったので。笑 次はもう少し構造化に着目して、header要素なども入れて書いてみる。