一部Rubyの学習にも進んだのが、RubyやRailsは後半に圧倒的な比重で学習するため今日はHTML/CSSの基礎部分を中心に振り返りたい。
HTMLとCSSの基礎編
HTMLではこれまでWordpressのエディターやプラグインで行っていたことを、原理から理解し記述出来るようにという思いで、サイト制作に必須のタグを中心に振り返る。
DOCTYPE宣言
DOCTYPEとはどのバージョンのHTML言語で作成されているのかを明示するためのもので、HTML文書の冒頭に記述する決まりとなっている。
一般には<!DOCTYPE html>を使用する。
linkタグ
linkタグは、別のファイルへの関連性を記述するためのタグである。
システム的に必要なもので、ブラウザには表示させる必要がない補助的な情報のためheadタグ内に記述する。
例えば
・rel="stylesheet"
relはrelationの略で、どのような関係性にあるファイルをlinkタグで紐づけるのかを指定する。
今回はスタイルシート（CSSはカスケーディングスタイルシートの略）なので、"stylesheet"を書く。
・href="style.css"
hrefは、関連づけるファイルがどこにあるのかを指定する。
今回は、index.htmlと同じフォルダにある「style.css」なので、ファイル名のみを記述する。
・type="text/css"
typeではリンクするファイルの MIMEタイプを指定する。
MIMEタイプとは、インターネット上でファイルのやりとりをするときに、そのファイルの種類を表すものである。
CSSを参照するときは"text/css"と指定する。
<link rel="stylesheet" href="style.css" type="text/css">
サイトの全体像を構成
何もサイト制作に限った話ではないが、まずは全体像を構成してから細部に取り掛かる方が効率が良い。
例えば全体を大まかに4つのボックスで分けるとする。
それぞれに「header」「menu」「contents」「footer」と名前をつけ、これをHTMLのdiv要素のクラス名として使用する。
サイトのアウトラインを構成
このような形で基本的にサイトを作成するときの最低限必要なコードであり作法のようなものだ。
<html> <head> <meta charset="UTF-8" /> <title>love_baseball</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
ここに先ほどの4要素を<div>タグで挿入すると
<html> <head> <meta charset="UTF-8" /> <title>love_baseball</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"></div> <div class="menu"></div> <div class="contents"></div> <div class="footer"></div> </body> </html>
という感じである。
CSSの要素と名称
要素
①どこの⇒セレクタ
②何を⇒プロパティ(後ろにコロン":")
③どうする⇒値(後ろにセミコロン”;")
linkタグを設定する
linkタグは、別のファイルへの関連性を記述するためのタグである。
システム的に必要なもので、ブラウザには表示させる必要がない補助的な情報のためheadタグ内に記述する。
今回はhtmlファイルに、それに対応するCSSファイルとの関連性を記述する。
例えば
・rel="stylesheet"
relはrelationの略で、どのような関係性にあるファイルをlinkタグで紐づけるのかを指定する。
今回はスタイルシート（CSSはカスケーディングスタイルシートの略）なので、"stylesheet"を書く。
・href="style.css"
hrefは、関連づけるファイルがどこにあるのかを指定する。
今回は、index.htmlと同じフォルダにある「style.css」なので、ファイル名のみを記述する。
・type="text/css"
typeではリンクするファイルの MIMEタイプを指定する。
MIMEタイプとは、インターネット上でファイルのやりとりをするときに、そのファイルの種類を表すものである。
CSSを参照するときは"text/css"と指定する。
calcとは
CSSで高さなどを指定するときに、固定の数値ではなく計算して出た結果を使用したいときに使うもの。
今回のサンプルでは、全体の高さからヘッダー、メニュー、フッターの高さの合計（50px + 40px + 50px = 140px）を引いた長さをコンテンツの高さに設定した。
これを利用する理由はコンテンツの大きさが固定されていると、ブラウザを広げたときにフッターの下に隙間ができてしまうのを防ぐためである。
class属性とid属性の役割の違い
class
「分類名を割り当てる」ための役割がある。
そのため、 同じclass名を1ページ中に何度でも使用することが可能である。
例
HTMLで
<div class="header">
と記述したところのデザインを
CSSでは
.header {
padding: 170px 30px 80px;
height: 100vh;
background-color: rgba(25, 25, 120, 0.9);
}
などと記述する。
id
「固有名を割り当てる」ための役割がある。
そのため、同じid名は、1ページ中に1度しか使用することができず、重複することは出来ない。
例
HTMLで
<p id="font15">font-size: 15px;</p>
と記述した箇所のデザインは
CSSで
#font15 {
font-size: 15px;
}
などと記述する。
divタグ
divタグを使わないと、3つ全ての要素に対して余白の設定を行わないと揃える事ができない。
また、余白の幅を変更したいときなど、修正する場合も変更箇所が多くなってしまう。
それに対して、3つの要素をdivタグで囲めばひとまとまりのものとして扱う事ができる。
余白の設定をする時も、全体の要素（図の点線で表している部分）に対して設定さえすれば揃える事ができ、変更も容易である。
Flexbox
ある親要素の中に、子要素がいくつかあってそれを横に並べたいとする。
その場合、親要素に対してCSSで”disply :flex”で横に並べられる。
また、並べ方も、右に寄せたい場合、均等にレイアウトしたい場合などがあるため、それは親要素に「justify-content」というプロパティを追加で設定することで実現可能である。
| 設定 | 内容 |
|---|---|
| justify-content: center; | 中央に並べる |
| justify-content: start; | 左に並べる |
| justify-content: end; | 右に並べる |
| justify-content: space-between; | 均等に並べる（両端に余白なし） |
| justify-content: space-around; | 均等に並べる（両端に余白あり） |