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

今週は4日間の授業でした

1日目

ボックスモデルの理解
ページを構成するコンテンツはブロックレベル要素でマークアップすることでボックスを形成する
ボックスは幅や高さだけではなく余白や線も含めて計算する必要がある
ブロックレベルの大きさを「width(幅)」「height(高さ)」で指定
border・・・ボックスの枠線
padding・・・枠線までの余白
margin・・・外側の余白、他のボックスとの余白

widthの幅をオーバーしたボックスは下の段に移動する
最初から設定された行間がある

枠線を指定するborderプロパティ
border:線の太さ 線の種類 線の色;
記述する際は順不同でOK、種類は必須でほかは省略できる、各値は半角スペースで区切る

線の種類
solid・・・1本線
double・・・2本線
dotted・・・点線
dashed・・・破線
none・・・なし(デフォルト)

線種類の指定はピクセルによって表示されないことがある
例)二重線は3px以上など

線種類はchoromeでは表示されないものも多い
線の太さの単位をemにすると文字のサイズに影響される

上下左右個別に指定する
border-top
bottom
left
right
値はborderプロパティと同じ

border-style・・・線の種類
border-width・・・線の太さ
border-color・・・線の色

より詳細に指定したい場合は
border-left-style
border-bottom-color
順番が違うと間違い、border→位置→その他

コンテンツと枠線の余白を指定するpaddingプロパティ
値:px、em、%、vwなど
borderと同じく上下左右を指定できる、top、bottom、left、right
padding:5px; 上下左右に5px
padding:10px 5px; 上下10px、左右5px
padding:10px 5px 30px; 上10px、左右5px、下30px
padding:10px 5px 30px 100px; 上10px、右5px、下30px、左100px
※意識するべきは修正するときに手数を少なくすること
上下のpaddingは下を2px程度少なくすると丁度真ん中に来るようにできる

CSS見出しデザイン

borderの外側の余白marginプロパティ
他のボックスとの余白として使う
値:paddingと同じ
ボックス内側の余白はpadding外側の余白はmargin使い分ける
h2の最初から持っている余白を消したい場合はmargin0を使う

幅と高さを指定する
widthとheight
値:px、em、%、vw、vh

・pxやemは固定サイズなので親からはみ出ることもある
・%はスマホサイトからPCサイトのような変化(レスポンシブ)に向いているが親ボックスに影響される
・vwやvhはスクロールバーの分だけはみ出たりする
高さに対しての%はへの高さ指定がないと反応しない
line-heightプロパティで文字の高さを調整できる

2日目

休んだ人のためのボックスモデル復習
bodyの幅や高さはユーザーが決めるもの
デフォルト値
width 100%
height auto

em・・・フォントサイズが基準
%・・・ウィンドウサイズが基準
vw・・・ビューポートの幅が基準(スクロールバーも含めた表示されるウィンドウの幅)
vh・・・ビューポートの高さが基準

width(幅)はデザインする上で重要なのでしっかり計算する
heightはケースバイケースだが指定しないことが多い(autoのまま)

paddingの記述方法に上下+左+右という記述はできない
(上+左右+下はできる)
paddingの初期値は基本ゼロ

borderプロパティについて

一括指定(border: width style color;)の場合はstyleの値は必須

ウェブサイトの標準990px(Yahoo!)

復習終わり
3時限目の残り半分から制作物の作成

marginの上下は食い合う(相殺する)
先生はmargin-bottomを基準にしている
margin-topの人もいる

3日目

制作物に関してのアドバイス

全体の共通設定を先に記述する

ボックスごとにマークアップする方法
・上から順番に記述することを意識する
・大きなボックスに対して記述する
・細かいCSSを記述する

役割ごとに記述する方法
・リンクなど

全体に関わるもの
大きなボックスに対するCSS
細かいCSS
リンクに関するCSS

ボックスを中央に寄せるCSS
・width
・margin
を使う
例)width: 500px;
margin:0 auto;

margin-raight: auto;初期値
margin-left: auto;右側の余白が全部左による
両方指定した場合中央に表示される
widthで適当な幅を指定する
marginの左右にautoの指定をする
ボックス自体に作用する

文章の揃えを指定する
text-alignプロパティ
値:left,center,right
ボックスの中に作用する
text-alignはボックスの中での揃えを指定ボックス自体を中央に寄せるのはmargin:0 auto;
左揃え、中央揃え、右揃え、デザイン的な意味もあるのでそこも考えて使う
cssの記述はa~z順に並べる

先週やったテストの返却と解説

ほとんどの時間は制作時間

4日目

制作物の解説

レイアウトについて
bodyに幅を指定するのは間違い
ユーザーが自由に調整するもの
div class=”wrap”で指定する
htmlの構成は手書きで箱を書く
文書構造を考えて作るボックスとデザインを考えて作るボックスがある
class名をつけるときの注意
〇〇01などをつけるのは間違いではないが、あまり好ましくない(意味がわかりにくくなるため、最終手段で使う)
コンテナーとインナーをクラス名で使う場合は、インナーを内側にする
(両方ともカタマリという意味)
htmlのタブや改行は半角スペースとして表示される、ただしブロックレベル要素の前後は無視される
(要はインライン要素は文章と同じだからスペースが空く)
装飾のための画像など意味がない画像にはaltに何も書かない
レフトやライトはクラス名であまり使わない、位置を変更する際に配慮が必要になるため
ボックスの親にクラスの名前をつけていきたい
デフォルトのCSSをリセットして、すべて自分で設定するという考え方
方法①
*{
margin:0;
padding:0
}
*はユニバーサルセレクタといい、すべてに適用される(点数は0点のため)

方法②
リセットCSSを読み込む
(リセット用CSSを作成してlinkで読み込む、読み込む場合はstyleより先に読み込む)

方法③
ノーマライズCSSを読み込む
すべてのデフォルトCSSを消すためのファイルを読み込む
ノーマライズCSSを読み込むデフォルトを消すのではなく活かしつつブラウザの差異を無くす

CSSの書き方として
①全体に対して記述する
②ヘッダー、ラッパー、フッターに対して記述する

一番上ある要素のmargin-topや一番下にある要素のmargin-bottomが突き抜けてしまう
子要素のmarginの突き抜けを解消する方法は3つ
①親要素にpaddingを指定する
②親要素にoverflow:hidden;を指定する
③親要素にpadding-top(またはbottom)を1px指定する

フォントファミリーの指定はhtmlでクラス名をつけて、cssでそのクラスに対して記述するとメンテナンス性が良い

共通する装飾は一箇所で管理できるようにする

cssのコンテンツ間の余白は広めに設定する

レスポンシブを考慮して単位をemと%に変更する
管理できていないところpのマージンなどは一度ゼロにして

字下げをするtext-indentプロパティ・・・段落の1行目を字下げする
マイナスの値も指定できる、左側にはみだすと見ることができないため隠すことができる

来週は背景画像をやる

資格試験(サーティファイ)について
最短明日受験することができる
訓練を半分くらい終了したときくらいを目処に受験したい人は受けるといいと思う

コメント

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