ウェブデザイン職業訓練【4週目】

4周目は4日間の授業でした
2日目にHTMLを使った制作物の発表がありました

1日目

先週の復習

・CSSの書き方3つの復習
・セミコロンの省略可能パターン
・headの中にrinkを書いていく

カラーコード

0~Fまでの英数字を使っている16進数を指定
#から始まる6桁の英数字
約1677万色
先頭から2桁ずつRGBになっている
Googleのcolorpickerを使うと便利
16進数の記述は省略できる
例)#112233→#123

RGB指定
:rgb(0~255,0~255,0~255);

文字のサイズを指定する
font-sizeプロパティ

値:〇px(ピクセル)
初期値16px
h1は32px

〇%
h1などのデフォルトと違う初期値を持っている要素には100%をあてると16pxが適用される
そのため小さくなる
どこに言っているかというと、htmlタグ(親要素)に言っている
親要素からの計算

CSSの仕組み・考え方の部分はhtmlが基準となっている

○○em (エム)
1em=100%
0.5em=50%

rem (レム)
エムと似ているが、すべて16pxが基準になる

○○vw (ビューポートウィズ)
ブラウザの幅に合わせて変わる
100vwだと1文字がブラウザの幅
1vwは100幅で100文字表示される

記述方法としては%とemは統一したい

※デザインの与える印象
ジャンプ率 文字のメリハリ(見出しは大きく本文は小さくする)
元気・幼い
雑・汚い

落着き・知性的・大人っぽい・フォーマル
古臭い・楽しくない

外側から作っていく
中の小さいパーツを作っていく
CSSも全体から作っていく

2日目

制作物の発表

htmlがindex.htmlになっていない人もいた
省略した場合も表示できるようにした

zipは圧縮後にファイル名を変更するとわかりにくくなる

サーバーにあげた時点でエラーになる場合がある
大文字小文字の違いなど

<br>で見た目をいじるのは間違い
全部を<p>でくくるのは間違い
<ul>の中に小リストを入れたい場合は<li></li>の中に<ul>~</ul>を作る
<nav>の中にはナビゲーションしか入らない(好みの部分もある)

上から読むから文字コードは一番上に書く

sectionの中のh1はh2になる(h1だけ)

何を意識して作ったか
・箱を意識したネタとして作った
・知っていることを全部使った
・写真を多く使うことを意識して作った
・楽しく作った
・ページへのリンクを意識して作った
・シンプルかつ使いやすいサイトを意識した
・内容を単純にすることを心がけた

ブートストラップ(Twitterが作ったCSSのフレームワーク)

著作権の表示などを意味する<small>
・<small>・・・細目の意味だがコピーライトくらいにしか使われていない
・インライン要素なのでブロックレベルで囲う→<p>が多い
例)<p><small>copyright……</small></p>

CSSの中に書く文字コード
@charset”utf-8″;
CSSの1行目には文字コードが書かれていることが多い

書かなかった場合、HTMLの方で指定しているコードを使用する
HTMLと違った場合はなんともない、テキストエディタの保存形式と違った場合は文字化けする

翌日の学習範囲の確認
テキストのレッスン9~

3日目

CSS行間を調整する
line-heightプロパティ(lineが基本「行」)
font-size:10px;
line-height:20px;
(行間の値は行の上下に反映される、デフォルトの値はフォントによって違う)
値「px(あまり使わない)、%、em」
単位を書かないことも少なくない(単位なし・・・emと同じ)

行間の指定は175%くらいに設定する
単位無しで記述するのが基本で、記述する場合は特殊

書体を指定するfont-familyプロパティ
書体はブラウザやOSによってデフォルトも異なるし、指定できるものも変わって来るので様々なケースを想定して指定する
指定したフォントが入っていない場合は適当に表示する
4端末プラス1wp想定する(Windows、Mac、iPhone、その他)Androidは端末によって違いすぎるので指定しても意味がない
値 フォント名を記述する
Meiryoやメイリオ・・・洋名と和名がある、今は洋名で良い
フォント名にスペースがある場合は「””」ダブルクォーテーションか「’’」シングルクォーテーションで囲う
正確に記述する
複数指定するときは「,」半角カンマで区切る

serif・・・明朝体、セリフは跳ねとかの意味
sans-serif・・・ゴシック体、サン=ない
monospace・・・等幅フォント
fartasy・・・装飾文字
cursive・・・筆記体

上2つくらいしか使わない

フォントは先に書いてあるものが優先される
記述した順になければ次、次と読み込む
総称は一番最後に必ず記述する
総称はクォーテーションで囲わない、理由は間違えてしまうから

人によるが、先生はすべてダブルクォーテーションで囲う&総称は囲わない

総称だけの記述は良くないことが起きるのでダメ
ネットは見やすいから基本ゴシックを使用する

フォントファミリーメーカー
ゴシックと明朝のセットを事前に作っておくと便利

ほかの人の作ったWebページのソースから確認する方法

Googleフォントの使い方について説明があった
注意点は全ページでラグが起きる、ページごとにフォントデータをダウンロードするため

コメントの書き方
HTML
<!– –>
CSS
/* */

セレクタの種類
idセレクタ classセレクタ 子孫セレクタ 複数セレクタ
今はCSSのidセレクタは使わない

idセレクタ・・・開始タグにid属性を使って記述、CSSに「.class名」で使う
※id名は同じHTML内で1度しか使えない

classセレクタ・・・開始タグにclass属性を使って記述、CSSに「.class名」で使う
※一つのHTML内で何度でも使える
idとclassは別物なので2つ書いてもいい
1つの要素にclass名をたくさんつけていい(上限100個くらい)、半角スペースで区切る

子孫(しそん)セレクタ・・・HTMLの親子関係を利用して指定する
例)
<header>
<p></p>
</header>
<main>
<p></p>
</main>

header p{}
main p{}

できれば要素セレクタ(pなど)は使いたくない
複数セレクタ・・・セレクタをカンマで区切ると複数指定できる

4日目

CSSの優先順位・・・CSSの記述場所やセレクタの書き方で点数がついて高い方が優先される
・上から順に読まれていくので、下に書いてあるものが優先
・セレクタは要素セレクタ=1点、classセレクタ=10点、idセレクタ=100点、style属性=1000点
・子孫セレクタ合計点
CSSの読み込みリンクも下の方が優先される
CSSの書き方3種類
子孫セレクタは合計点
HTML内で読み込む順も影響する
インライン>styleタグ>外部ファイル(後から読み込む物で上書きされるため)

CSSの優先順位を間違えないために
・idセレクタは使わない
・子孫セレクタの階層を深くしない
・classセレクタを使う
・点数が高いものは下に書く

監査が来る

window全部がbodyなので全体を囲うタグを使う
クラス名はwrapを使うことが多い
困ったときは○○innerを使う
例)
headerInner
footerInnerなど

背景色を指定するbackground-color
値:colorプロパティと同じ

ブロックレベル要素・・・幅や高さ上下左右などの余白を設定できる
改行される

インライン要素・・・横に並ぶ(=改行されない)
左右に余白を設定できる

強調を意味する
強い順
<strong>・・・重要、ルールや決まりごとなど、太字になる
<em>・・・強調、斜体になる
<b>・・・大きい声で言いたい、太字になる

略語を意味する<abbr>・・・title属性で元の言葉を表示させられる
(読みはアバー?)
例)<abbr title=”world wide web”>www</abbr>

<br>・・・改行 インライン 閉じタグなし
<blockquote>・・・引用文 ブロックレベル
<q>・・・引用文 インライン
<cite>・・・引用文 インライン
<hr>・・・区切り線 ブロックレベル 閉じタグなし

コメント

タイトルとURLをコピーしました