WEBデザイン講座　CSS復習memo①

昨年の７月末に会社を退社して、働く気になれずで、いかに社会復帰を引き延ばすか画策し、職業訓練校に通うことにしたが…さっさと就職した方が楽だったかもしれない。

毎日１６時まで授業受けるの疲れる。
教室は、極寒だし…。
ダウンジャケット着ながら授業受けるって…人生初だなあ。
気分は、オナラぷぅである。

救いは、先生の授業は中々面白いことである。
大学教授のついで感とは違い、フォローが手厚いし、実戦で使える小技が教えてもらえるのが楽しい。

感想はさておき、復習をそろそろしていかないと、耳から文字がポロポロ漏れ出しているのでアウトプットしていく。

…という趣旨でのnoteはじめ。

本日の授業

〇文字の色を指定する

colorプロパティを使う。
→見出しや段落、段落内の一部だけに色を付けるといったことが可能。
色を指定する時は、「#」とで始まる6桁のカラーコードで指定する

セレクタ｛color: #16進数 :｝
セレクタ｛color: rgb(赤の値,緑の値,青の値):｝
セレクタ｛color: カラーネーム:｝

文字の色の選び方
→色を設定する部分の意味を考えて色を決める
webサイトにおける色の指定
→webサイトで色を指定する代表的な方法には
「１６進数」「RGB」「カラーネーム」

１６進数とか…進数って生理的に受け付けない。
１０進数しか知りません…て思っている。
とか、ごちゃごちゃ考えてたら、授業が勝手に進んで聞き漏らし発生。
この「頭の中で一人討論会」の癖、本当に治したい。
集中力の問題か…。
#ff0000 (16進数)→#f00とし手表記できるのは、勉強になった。
使うかどうかは知らんが。

色の16進数は、こんなのもあるんだなーくらいで流してよいと言っていた。
流れろ。
日本の伝統色 和色大辞典 - Traditional Colors of Japan (colordic.org)
授業で教えてもらったサイト
好きな色が多かった。
日本人の心を持っているな…。実感。

セーフカラー
今はモニターが進化したのであまり影響がないとのこと。
昔は、同じ色を指定しても見え方の差異が大きかったので、差異が少ない推奨カラーをセーフカラーとしていた。

〇見出しを背景色で装飾する
セレクタ｛background-color: # 16進数;｝

色の透過の表現→RGBA
下層にある要素が透けて見える。
そんな要素があったとは…って思った。

色を直感的に指定できる→HSL
CSSで再度や明度も指定できる。
このあたりから、コードうつのはいいけど、自分はデザイン考えるの向いてないな※面倒くさい　と、思い始めてきた…。今更。

見出しのレベル
h1-h6
高→低
h1は、文章をマークアップする際、もっとも重要な意味がある。
正しい文章構造を意識する。
h1の次に、２をすっとばして3を使う…ということはしない。

ｈ要素がこんなに奥が深いとは知らなかった。

見出しに余白を設定する
セレクタ｛padding: 数値と単位;｝
padding→ボーダーの内側上下左右余白
pxとemの単位についてあんまりわからないから後で調べる
多分授業で話していたが、討論会が開催されていた模様…。記憶なし。

〇見出しを線で装飾する
よく使う線の種類
solid→実践
double→二重線
dashed→破線
dotted→点線
▼border: 1px solid #000000 ;

見出しを下線で飾る
border-top→上の線
border-right→右の線
border-bottom→下の線
border-left→左の線
▼h3｛border-bottom: 1px solid #000000 ; ｝
ウィンドウサイズの線が表示される

見出しとした線の間を広げる
→上下左右個別に設定できる
padding-top
padding-right
padding-bottom
padding-left
▼h3｛padding-left: 10px; ｝
想像できることは、割とwebコードあるんだな、と思う。

〇見出しの先頭を装飾する
要素の左側に線をつけるにはborder-leftプロパティ
要素の左側の余白を整えるにはpadding-leftプロパティ

見出しの先頭を画像で飾る
セレクタ｛background-image: url(画像の場所/ファイル名)｝

画像の返し表示をコントロールする
back-ground-irepeat　： 値；→画像を繰り返して表示

〇段落のスタイルを整える
段落の字下げを設定する
文字揃えを設定する
両端揃えを指定する

文章の両端をそろえるには、text-again　プロパティを使い値にはjustifyを指定する。
Windowsに標準搭載されているMicrosoft Edgeでは、text-align: juustify;が適用されないため、別途text-justifyプロパティを使って記述します。
▼text-align justify.
▼text-justify inter-ideograph.

ここまでnoteに記録してて、1日に進む量残すのめちゃくちゃ面倒じゃなと。
note更新している人ってすごいわ。

コードの練習するか。