DAY05/45 Webページに彩りを！「CSS」入門編
おはこんばんにちは、iaです。
プログラミング学習５日目。
今日は昼間の休憩時間が短いということもあり、普段は仕事終わりに取り組む復習note投稿を先にやってしまおう！という作戦です。
（だけど結局、休憩時間中には終わらず、仕事終わりにも編集しました笑笑）
何より早く、CSSについて書きたい！
けどその前に、HTML編の最後、「グループ分け」についての解説から入ります。これはCSS活用に向けた、HTMLファイルでの準備作業とも言えます！大切！
◆Webサイトの構成要素
今あなたは、スマホやPC端末を使い、noteのアプリかブラウザからこの画面を見ていると思います。
スマホからアプリで見ている場合、記事ページは主に「ヘッダー・本文・ナビゲーションメニュー・筆者プロフィール・関連記事」で構成されていますね。PCのブラウザだと、上記の要素に加えて、下の方に「フッター」があります。
それぞれの項目を１つのかたまりとしてタグで囲み、グループ化すれば、CSSと紐づけてレイアウトやデザインを自由自在に変えられちゃうんです！
と言うことで、グループ分けで使用する主なタグをご紹介！
グループ分けのタグ
・<header>：ヘッダー
ページ上部にある部分。主に、ロゴ画像、ページタイトル、ナビゲーションメニューを配置している部分！
・<nav>：ナビゲーションメニュー
選択肢を選ぶと、関連ページに飛べるアレです。ヘッダー内、ページ右上に三本の横線でありがち。
・<main>：ページのメインコンテンツ
画面の大半を占める、本文の部分。この中に様々なグループが入ることも。下の２つは含まれがち。
・<article>：記事
ニュースサイトやブログサイトの記事部分。おそらくnoteの本文部分もコレ。
・<section>：テーマを持ったグループ
noteでいう関連記事一覧などはコレに該当します。
・<aside>：補足情報
メインコンテンツとは関連の低い情報。これは勝手な予想だけど、広告の画像とかはこの部類にしてもいいかも？
・<footer>：フッター
コピーライトやSNSリンクなどがある、ページの下部にある帯のこと！
・<div>：意味を持たない部分
デザイン都合でまとめたい部分があるときに使える便利なタグ！某有名YouTuberが作ったプログラミングスクールを運営してる会社の名前って、ここからきてるのかな？笑
主なタグはこんな感じ！
◆CSSで、できること
お待たせしました！CSSについて取り上げます！
CSSとは「Cascading Style Sheets」の略で、いわゆる装飾言語です。デザインを工夫した見栄えの良いwebサイトを作るなら、活用必須！
やり方は、「.css」の拡張子を使ったCSSファイルとHTMLファイルをリンクするのが一般的！
（そのほか、HTMLファイルに直接書き込むこと方法がある。とは言えCSSファイルを別途作った方が管理しやすいから、よっぽどの理由がない限り覚えなくても良さそう笑）
ってことで、CSSファイルの作り方をまとめていきます！
１基本ルール
１行目には必ず、「@charset "UTF-8"」を書く！
公式「 セレクター { プロパティ : 値 ; } 」
「どの部分の（＝セレクター）、何を（＝プロパティ）、どう変えるのか（＝値）」の3点セットを組み合わせる！
１つ目の「１行目には必ず、「@charset "UTF-8"」を書く！」は、文字化け防止になる言葉。コピペマスト案件ですね。
２つ目の公式をCSSでは多用します。波括弧「{」の後ろと「}」の前は改行してもしなくてもOK！自分が見やすく使い勝手が良い方法で。
公式に書いてあることを説明したのが３つ目のルール。各用語を覚えよう。
・セレクター
どの部分＝HTMLのタグ名やクラス、IDを指定します。
ちなみに、複数のセレクターを一挙に変更したい場合は、「,（カンマ）」を使って並べて記載すればOK。
また、大きなグループの中にある特定の部分だけ変更したい時は、半角スペースを使う！例えば、<div>タグの中にある<p>タグを指定したい場合は、「div p{ 〜〜」って書く！そうすれば、指定した部分だけ装飾されて、<div>タグ以外の<p>タグには装飾が反映されないってこと！
・プロパティ
何を＝文字色、サイズ、背景画像…など種類多数！
主要なものを次の章で解説していきます〜
・値
どう変えるのか＝具体的な数値やキーワード、名前を指定します。
１つのセレクターに対して、複数の装飾を設定したい場合は、「;（セミコロン）」の後（＝「}」を閉じる前）に別のプロパティを書き込んで続けることが可能！順番や数は関係ないので、思いついた順番に書いても良いらしい！そう言うとこ、割と自由なんだね笑
２よく使う文字に関したプロパティ
たくさんありすぎて一気に覚えるのは大変な「プロパティ」
まずは文字や文章の装飾によく使うものを覚えよう！
font-size →文字の大きさ
font-family →フォント
font-weight →文字の太さ
line-height →行の高さ
text-align →文章の揃える位置
３プロパティに応じた値
次に、前項で取り上げたプロパティに対して、書き込む値の種類を書くよ〜
font-size：数値（単位あり）or キーワード
font-family：”フォント名” or キーワード
font-weight：キーワード or 数値（100~900)
line-height：normal or 数値（単位なし）or 数値（単位あり）
text-align：left(左揃え) or right(右揃え) or center(中央揃え) or justify(両端揃え)
それぞれ補足していきます！
1．font-size：数値（単位あり）or キーワード
●数値を書くときは必ず単位をつける！
・「px（ピクセル）」指定のサイズはどこで使っても変わらない（＝絶対値）
・「％（パーセント）」/「rem（レム）」は基準となる要素のサイズによって変動（＝相対値）
●キーワードは７段階で指定できる
・xx-small
・x-small
・small
・medium（標準サイズ）
・large
・x-large
・xx-small
◎バリエーションは、２〜５種類程度がベスト。
◎サイズ幅の差はジャンプ率で表す。印象に変化がある！
・幅が大きい→ジャンプ率が高い：躍動的で楽しい印象に
・幅が小さい→ジャンプ率が低い：上品で落ち着いた印象に
2．font-family：”フォント名” or キーワード
●フォント名は「”」で囲む癖を！
必須は日本語名やフォント名にスペースを使う場合だけど…ほとんどそう笑
●キーワードを入れれば、よく使うフォントが反映される
・sans-serif（ゴシック系）
・serif（明朝体）
・cursive（筆記体）
・fantasy（装飾系）
・monospace（等幅）
◎まとまり感を出すためには、１つのデザインに対して使用するフォントは１〜３種類にとどめておこう
3．font-weight：キーワード or 数値（100~900)
●キーワードは４段階
・normal（標準）
・bold（太字）
・lighter（一段階細く）
・bolder（一段階細く）
●数値を変えれば微調整可能！
テキストには「1〜1000の任意の数値」って書いてあったけど、10や50と記入しても全然変わらないから、AIさんに頼ったら、「100〜900の間」って教えてくれた。ちなみに【400＝normal】で【700＝bold】なんだって。
4．line-height：normal or 数値（単位なし）or 数値（単位あり）
●normal
ブラウザが判断した行の高さで表示される。
●数値（単位なし）
フォントサイズとの比率で指定できる。
●数値（単位あり）
フォントサイズ同様の単位「px」,「%」や、フォントサイズを基準にした相対値の単位「em」を使用して指定も可能。
5．text-align：４パターン
left(左揃え) だと左端に揃えてくれるが、右側はガタガタになる！（からあんまりお勧めできない。→そこで使えるのが justify(両端揃え)
justify(両端揃え)を使えば、両端を揃えてくれるので、見栄えがいい！
そのほか、印象的なデザインをする工夫として、 right(右揃え) や center(中央揃え) も使えるから、覚えておこう！
あれ、いつの間にかタイムリミット過ぎてたわ…
ってことで今日はここまで！
明日は大晦日！しかも仕事休みなので、ドバッと学習時間に充てるぞ〜〜〜
読んでくれてありがとうございました！
アドバイスや応援コメント、待ってます！