装飾言語
Webクリエイター養成科の講義は、HTMLからCSSへと進んでいます。
HTMLだけでは、Webページを完成させることはできません。
HTMLはマークアップ言語と呼ばれ、タグを使った文字情報によってWebページの基本構造を定めることはできますが、画面を装飾することなどはできないためです。
Webページ制作には、HTMLに加えてCSSと呼ばれる別の言語が必要とのこと。
CSSは「Cascading Style Sheet」の略で、直訳では「小いさな滝が流れるようにスタイルを定義するシート」となりますが…。Webページ全体のベースカラーや背景、ページレイアウトに文字フォントの種類等々といったページの見た目を装飾するための言語です。
先生によると、HTMLを書き込んだファイルとは別にCSS用のファイルを用意し、装飾方法をCSSに書き込んで、その内容をHTMLに読み込ませることで、Webページに装飾を反映・適用させるという手法が主流だそうです。
具体的にはHTMLファイルの<head>内に<link>タグでCSSファイルをリンク指定。
rel属性に「stylesheet」、href属性にCSSファイルと記します。
relは「relation」の、href は「 hypertext reference」の略。
HTMLファイルに上記を書き込むことで、stylesheetと関係があって、stylesheetを参照していますと関連づけることになる、らしいです。
セレクター、プロパティ、値
CSSもHTML同様、独特のルールがあります。
例えば、h1{color:blue;}と記した場合－。
h1を「セレクター」、colorを「プロパティ」、blueを「値」と呼びます。
HTML「呪文」ルールに、別のCSS「呪文」ルールが加わった形です。
「セレクター」で、どの部分を装飾するかを指定。
h1とあるので、HTMLの<h1>タグの部分に装飾が適用されまる。セレクターの後は波カッコ{}で続けます。
「プロパティ」で、指定された部分の何を変えるかを指定。
colorとあるので色を変えることになります。プロパティと次の値の間はコロン「：」でつなぎます。
「値」でどのように変えるのかを指定。
blueとあるので、色が青になります。値の最後はセミコロン「；」で終わります。
装飾箇所とその対象と具他的な値という3つの要素の組み合わせ、ですね。
対象が文字の大きさならば「font-size」、太さなら「font-weight」と表記。
p{font-size:16px;}は、pタグでくくられた文字の大きさは16ピクセルになります。
P{font-weight:bold｝は、pタグでくくられた文字の太さは太文字になります。
文の上下の行間（高さ）ならば「line-height」、文の左右のそろえ位置なら「line-align」と表記。
p{line-height:1.5;}は、pタグでくくられた文と文の上下行間が文字フォント大の0.5倍に。
p{line-align:left;}は、pタグでくくられた文章の行頭がすべて画面の左に揃います。
レイアウト
画面の背景に写真画像などを設定する場合は「background-image」、使用する画像の大きさを調整するのに「background-size」といったプロパティで、数値などを指定。
また、画面いっぱい文字がびっしり敷き詰められていたら読みにくいので、画面を構成する各ブロック要素ごとに幅や高さを決める際にはそれぞれ「width」「height」プロパティを使ったり、空白・余白を上手に活用する場合は「margin」「padding」プロパティを使ったりして、読みやすい画面作りに向けて調整します。
そして、最後はレイアウトについて。
Web画面上で掲載するさまざまなコンテンツをどのように配置です。
縦に並べるか、横に並べるのか、それともタイル状に並べるか－。
Webの特徴をどう見せればよりアピールできるか、Web訪問者へのインパクトやユーザーの使い勝手の良し悪しに直結するとても重要です。
講義で学んだのは「Flexbox」「CSSグリッド」の2つ。
Flexboxは、HTMLファイルの中に<div>タグを使って、デザインが指定された部分に等しく反映されるように「クラス名」を付けて同じ仲間としてくくるためのコンテナー（親要素）を設けた上で、さらにその中に並べたいアイテム（子要素）を入れ込むようにプログラムします。
アイテムの羅列方向は「左から右へ」「右から左へ」「上から下へ」「下から上へ」の中から選択できます。
もう一つのCSSグリッド。
Flexboxと似ているのですが、子要素重視か親要素重視かの違いのようです。
Flexの場合はとりあえずコンテナー（親要素）を設置してアイテム（子要素）の幅や高さを決めていくのに対し、グリッドの場合はまず配置先のコンテナー（親要素）の幅や高さを決めてその領域にアイテム（子要素）を流し込んでいくといったイメージでしょうか。
あくまでもビギナー心証ですが、Flexの方が柔軟に対応できそうな感じを受けました。
