はじめてのHTML5・CSS

19824 ワード
HTML 初心者 CSS HTML テキストリンク

この記事の目的

  • 一度使ったHTML5・CSSの書き方をメモに残す。
  • 後で同じことしたいときに見返す。
  • 言語化して頭を整理する。
  • 私が「こんなのが最初に読めたらよかったな」という説明記事をめざして書く。記述ルールは「可能な限り手順と説明を省略しない」「応用が利くように一般化する」「余計な（説明のない）情報は書かない」。

やりたいこと

テキスト記事をWEB掲載したい。レイアウトのイメージを共有するため、試作版のHTMLファイルを作成する。ローカルでレビューするのでWEB公開は不要。社内共有フォルダにHTML・CSSファイルを置いて、各々開いてもらう。テキスト原稿があるので、それをマークアップする作業イメージ。

前提

私は、HTML経験がほとんどなく、CSSは今回初めて知った。
最初に「初心者向け！ HTMLを作ってみよう」的な動画シリーズを１つ見て、基本的な書き方を覚えた。後は実際に作りながら試行錯誤した。本業が暇なときにやっていたが、トータルで2週間くらいは時間を使った気がする。

メモ

以下メモです。

HTMLファイル

最低限の書き方。
メモ帳で以下を打ち込んだファイルを作って、拡張子を.htmlに直せば出来上がり。

index.html
<html>
  <head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <p>Hallo, world!</p>
  </body>
</html>
  • <XXX>と</XXX>がタグと呼ばれ、XXX部分が同じセットが必要。これらのタグでテキストを囲む。タグは入れ子上になっていく。タグの内側では改行してもよい。
  • <html>タグは、ファイルの1番上と下に置く。.htmlファイルの中身を全てこれで囲うイメージ。
  • <html>の下の階層には、<head>と<body>タグが来る。これらは並列。
  • <head>タグにはファイルの設定を書く。ここに書かれた情報は、ブラウザ上では直接的には目に見えないみたい。
  • <meta charset="UTF-8">は例外で</meta>は不要。"UTF-8"がこのファイルの文字コードを指定している。これがないと、別の環境で編集しようとしたときに文字化けすることがあるらしい（文字化けした）。
  • このように、タグの内部にテキストを書き足すことができる。その場合、要素ごとに半角スペースで区切る。
  • <title>タグで囲まれた文字列は、例外的にブラウザのタブに表示される。
  • <link href="style.css" rel="stylesheet" />は、.cssファイルを紐づける記述。href="..."が紐づけたいファイルの格納場所を指示する記述。htmlファイルと同階層に置く場合はファイル名だけを書けばいい。別階層に置くときは書き方が少し変わる。
  • 参考。<link>タグは参照先を表すタグのようなので、他の場面でも出てきそう。rel="stylesheet"を入れるとcssファイルへのリンクを示すみたい。
  • ちなみに<XXX />という書き方は、タグの内側に何もないことを示すとのこと。
  • <body>タグ内部は本文パートで、この中に書かれた文字列がブラウザの画面上に表示される。

cssファイル

スタイルシート（stylesheet）と言われたらこれのこと。
これもメモ帳で以下を打ち込んで保存して、拡張子を.cssに直せば出来上がり。

style.css
body{
  font-size: 14pt;
}

.text{
  font-size: 12pt;
}
  • こちらにはタグはない。body{...}が構文。body部分がhtmlファイルのタグに対応する。この例では{...}に書かれた設定が、紐づけたhtmlファイル内にでてくる<body>タグ内部のテキストに掛かる。
  • body{と.text{で、文頭に.が付くかどうかが違う。つかない方はhtmlで定義されているタグを指す。つく方は独自に設定したclass名やid名を指す。
  • {}内には、複数の記述を並べて書ける。各記述ごとに、末尾に;をつける。忘れると読み込まれない。
  • {}内の記述で、:の左側は既定の項目。右側が設定したいパラメータ。ちゃんとしたエディターならば既定の項目をサジェストしてくれて、パラメータの書き方も教えてくれる。すごい。

見出しタグ

  • <h1>,<h2>,<h3>,<h4>,<h5>,<h6>がある。
  • 小さい数字から順番に使う。順番を飛ばしてはいけない。ファイル内に<h3>タグだけ使う、みたいなことはNG。
  • <h1>は大見出しみたいなもので、1ファイルで1回しか使わない。<h2>以降は複数回使ってもいい。
  • css書かなくても自動的に太字になったりフォントが大きくなったりするからといって、タグの数字を変えて丁度いいレイアウトを作るのはやめましょう。cssを書け。
  • ただ、これら<h1>~<h6>タグにまつわるルールは、技術的な制約というよりは運用ルールに近くて、破ったから即エラーを吐くというものではなさそう。詳しい理由は調べていない。

class

index.html
<html>
  <body>
    <div class="text">
      <h1>吾輩は猫である</p>
      <p>吾輩は猫である。名前はまだ無い。</p>
      <p>どこで生れたかとんと見当がつかぬ。</p>
    </div>
  </body>
</html>
style.css
.text{
  font-size: 14pt;
}

みたいに書くと、classが定義された<div>タグ内の要素全部でフォントサイズが14ptになる。
<p class="text">でもいいけど、それだと行数が増えたときに毎行classを付けるハメになる。ひとくくりにしたほうが楽。

style.css
.text{
  font-size: 14pt;
}

.text .h1{
  font-size: 16pt;
}

cssは上から順に読み込まれて上書きされていくので、下に書かれた記述が優先する。なので、class = text内はフォントサイズが14ptだが、その中のh1タグ内は16ptになる。

style.css
.text > .h1{
  font-size: 16pt;
}

書き方の違い。
>が入ると、class = text直下のh1タグだけが16ptになる。class = textの中のclass = text2の中のh1タグは16ptにならない、ということ。

flexbox

最初ややこしかったけど、ある程度説明を読んだ後にCSS Flexboxチートシートというものを見たらだいたい分かった。なので皆さんも見てください。
使うタイミングは、要素を横に並べたいとき。
具体的には、画面の左半分に画像置いて、右半分にテキストを入れたいとき。次のように書けばよい。

index.html
<html>
  <body>
    <div class="container">
      <div class="text-item">
        <p>吾輩は猫である。名前はまだ無い。</p>
        <p>どこで生れたかとんと見当がつかぬ。</p>
      </div>
      <div class="image-item">
        <img src="/cat.jpg">
      </div>
    </div>
  </body>
</html>
style.css
.container{
  display: flex;
}
  • 横に並べたい子要素itemを定義して、それらを囲むように親要素containerを作る。
  • cssは親要素側に記述を付ければよくて、子要素側は記述不要。
  • 子要素は<div>を使わなくてもよさそう。上の例だと、<img class="image-item"...ってやっても成立する。<div>付けたほうが保守性が高い気がするので付けてるけど、無駄なことしてるかもしれない。

marginとpadding

画像でイメージ付けるのが一番早かったので、載せます。サルワカさんのサイトが分かりやすかった印象。「1-2. CSSの余白の考え方（ボックスモデル）」のところ。
テキスト（要素）に対して、backgroundで背景色が付く範囲がpaddingで定義される範囲で、上下の行との余白部分の幅を定義するのがmarginという理解。背景色を付けた要素をいくつか並べて、数字を弄っていたら分かってきた。
cssの記法はmargin: 5pt 0 5pt 0;でも、margin: 5pt 0;でも、margin-top: 5pt;とmargin-bottom: 5pt;に分けてもいいけれど、たぶん一行で書いたほうが楽。後は慣れ。

インデント

１．段落

style.css
.indent{
  text-indent: 1em;
}

行の頭に段落の1字下げを付ける方法。シンプル。対象文章が複数行にまたがったときに、最初の行だけが字下げされる。
1emは「1文字分の幅」という相対的な長さの単位。画面が拡大されてもレイアウトが崩れないメリットがある。

２．字下げ

style.css
.indent{
  padding: 0 0 0 1em;
}

2行目以降も1字下げする方法。そもそもpadding-leftを1文字分設ければいい。

３．行頭以外字下げ

index.html
<html>
  <body>
    <div class="text">
      <p>１…ここに長ったらしい説明文が入る。ここに長ったらしい説明文が入る。</p>
    </div>
  </body>
</html>
style.css
.indent{
  padding: 0 0 0 2em;
  text-indent: -2em;
}

改行が入った後に「１…」の下は空白を残して、「ここに」と同じ位置から始まってほしいとき。附番付きの箇条書きとかでよく出てくるやつ。２．と同じくそもそもpaddingを付けて行の始まりを右にずらし、text-indentを使って行頭を左にずらす、というひねり技を使う。マイナス値が許されるんですね（text-indentはマイナスが使えるが、他のタグすべてで使えるわけではないっぽいので注意）。

リスト

箇条書きのイメージで、大きく2パターンがある。挙動の違いは（私の気付く範囲では）ない。

index.html
<html>
  <body>
    <ul>
      <li>・吾輩は猫である</li>
      <li>・こころ</li>
      <li>・三四郎</li>
    </ul>
  </body>
</html>
index.html
<html>
  <body>
    <ol>
      <li>1.吾輩は猫である</li>
      <li>2.こころ</li>
      <li>3.三四郎</li>
    </ol>
  </body>
</html>

1つ目が並び順が意味を持たない場合。2つ目は並び順に意味がある場合。という運用ルールがあるらしい。
内部タグ<li>は2パターンとも共通。その外側タグの<ul>と<ol>が異なる。内部タグは単体では使えない。

cssを書かなくても、自動で行頭に「・」や「1.」が付く（っぽい）。これが邪魔なとき、次のようにstylesheetを書けば消せる。

style.css
ol, ul{
  list-style: none;
}

背景色

index.html
<html>
  <body>
    <div class="text">
      <p>吾輩は猫である。名前はまだ無い。</p>
    </div>
  </body>
</html>
style.css
.text{
  background-color: #ffffff;
}
  • この例では<div>タグのpaddingで定義された範囲の背景色が#ffffff色になる。
  • 上記例で<p>タグに対してbackground-colorを付けると、背景色のつく範囲が(デフォルトで）狭くなる。<p>要素を囲うように<div>要素があるイメージ。
  • #ffffffは純粋な白ではないが、ディスプレイ上で見やすい背景色の白らしい。多くのウェブサイトでは、ただの白黒に見えても、このように若干色を変えている。同じように文字の黒色は#333333が多く使われるそう。これらの色に限らず、それぞれメジャーな色合いがいくつかある。

テーブル

index.html
<html>
  <body>
    <table>
      <tr>
        <th>著作</th>
        <th>著者</th>
      </tr>
      <tr>
        <td>吾輩は猫である</td>
        <td>夏目漱石</td>
      </tr>
      <tr>
        <td>舞姫</td>
        <td>森鴎外</td>
      </tr>
    </table>
  </body>
</html>
style.css
table {
  border-collapse: collapse;
  width: 100%;
}

tr, th, td {
  border: 1px solid #333333;
}

基本構文

  • これで2列3行の表が作れる。
  • <table>タグで囲んだ範囲が１つのテーブルになる。1番上の階層。
  • <tr>を2階層目に置く。このタグで囲われた範囲が「横」に一列に並ぶ。
  • <th>と<td>は3階層目に置く。2つのタグに機能的な差はない（気がする）。運用ルールが違って、<th>は見出しで、<td>はそれ以外の一般データとなる。

見た目

  • <table>のデフォルトの見た目が気に食わなかったので、一番シンプルな直線で区切られるようにcssを作っている。border-collapseとborderの部分の記述。
  • 画面の端から端まで均一に広がるようにした。widthの部分。デフォルトだと文字数分の幅しか取ってくれないので、左に詰まってしまう。

セルの結合

  • <td rowspan="2">とか<td rowspan="2">とかを、結合前の位置で言う左上に書く。
  • 書く場所は3階層目の<th>または<td>。
  • <td rowspan="2" rowspan="2">とすれば縦横両方が大きいセルを作れる。

おわりに

以上です。
例外がありそうなところや、私が把握して切れていない仕様がありそうなところは、なるべく断定しないように書いたつもりですが、怪しいところがあれば指摘をもらえるとありがたいです。
誰かの参考になれば幸いです。

C++単例モデルの例
Macは万能ヘッダファイル#includeを使用