ウェブデザイン職業訓練【6周目】

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

1日目

背景画像を指定するbackground-imageプロパティ
値:url(パス)
cssから考えたパスを記述する

背景画像の繰り返しを指定するbackground-repeatプロパティ
値:
repeat・・・(デフォルト)縦にも横にも繰り返す
repeat-x・・・横に繰り返す
repeat-y・・・縦に繰り返す
no-repeat・・・1度だけ表示
背景画像の表示位置をしていする
backguround-position
値:
top,center,bottom
left,center,right
〇〇pxなど(数値プラス単位 水平位置→垂直位置の順で入力)
左右位置を先に記述したほうがいい(テキストでは水平位置→垂直位置で指定と書いてある)
高さの指定はheightではなくpaddingの方が文字サイズに合わせて自動で調整されるので良い
値は左右の位置指定から書く
キーワード指定はどちらからでも良いが、数値だと先に書いたほうが左右位置と認識されるため
水平方向しか書かなかった場合は垂直方向は自動的にセンターになる
background関連の一括指定
background種類
 image
 repeat
 position
 color
例)
background: url(img/main-img.ipg) no-repeat left top #fff;

backgroundプロパティ・・・image repeat position colorをまとめて指定できる 順不同
背景画像と背景色なら画像のほうが前面に来る
下に一括指定を記述してしまうと上書きされてしまう

背景画像のサイズを指定するbackground-sizeプロパティ
backgroundによる一括指定はできない
画像のアスペクト比は変えない
値:pxや%は変わってしまう
〇〇px,〇〇%
テキストでは、アス比が変わらないものは以下の2つ
cover・・・ボックス全体に表示する、幅か高さがはみ出る、余白ができない
contain・・・画像全体を表示する、余白ができる

太字の指定をするfont-weightプロパティ
値:
normal・・・通常
bold・・・太字

斜体の指定をするfont-styleプロパティ
値:
normal
italic・・・斜体
※メイリオは強制解除

今後のカリキュラムについてPCスペックが足りなくなるリスクがある
ポートフォリオについて訓練終わるまでにできていなかったら就活は無理

スクールのPCスペック
CPU:AMD E2-9000e RADEON R2, 4 COMPUTE CORES 2C+2G 1.5GHz
メモリ:4.0GB
HDD:500GB
GPU(オンボード):AMD Radeon(TM)R2 Graphics

2日目

ポートフォリオサイトにのせるコンテンツ
・作品(WEB・・・サーバーにアップする、印刷やイラスト・・・画像)
テーマ、コンセプト、ターゲット、時間
なぜがないと作品は成り立たない(なぜなぜ分析をする)
時間は〇〇日というより〇〇時間と伝えた方がベター
テーマ・コンセプト(マーケティングでやりたい人市場調査、競合分析、ペルソナ設定、カスタマージャーニーマップ、自社分析、カンプ作成、)
・プロフィール
勉強したこと、書籍、作成で心がけていること、
・コンタクトフォーム

レイアウトのためのCSS
・floatプロパティ・・・ボックスを横に並べる
・positionプロパティ・・・自由な配置ができボックスを重ねることもできる
・flexbox・・・サイトの幅が変わったとしても柔軟な対応ができる
floatプロパティ・・・ボックス同士を横に並べるので、しっかりとボックスモデルを理解する
1.ボックスの幅を計算する
2.floatプロパティを記述する(値:none、left、right)
3.clearプロパティを使う・・・上の要素にfloatを使うと下の要素すべてが回り込もうとするので解除する必要がある(値:left、right、both)
{widthを指定浮き上がる感じなので、移動はする
2つのブロックに同じright値を指定すると右並び(右から1・2と)になる
clearは上にかけた要素

フロートの課題に2時間使って終了

3日目

課題の解説
flortは親要素にかけることを意識する
navとsectionにwidthを設定した理由
浮かせて並べるため、通常横に並ばないため(今回はなぜか並んだ)

すべてleftで指定する人もいる
記述は横から決めていく、縦の余白は後でOK
拡張性を考慮する場合コンテンツ部分をdivで囲ってしまったほうが良い

記述の不足分
メニューの間隔margin-bottom:10px
section h2{margin: 10px 0;
font-size:120%;
font-weight normal;}
section p{line-height:1.5;}

上にある要素にfloatがかかっている場合、下の要素にclearをかけていても下の要素からのmargin-topだけは上の要素に潜り込んでしまう
上の要素からのmargin-bottomで対応する

画像の下には余白ができる理由:画像がベースラインで揃えられているため
インライン要素の上下位置を指定するvertical-alignプロパティ
本来は表のセル内で使うことが多い
値:top、bottom、middle、text-top、text-bottom

実体参照文字・・・機種によって表示できないような文字をコードで記述する

午後から課題の作成

floatの親つぶれ
親要素の高さは子要素に依存する
floatで子要素が浮く
親要素は子要素がなくなったと認識する
高さがなくなる

解決方法
①.floatをかけた要素と同じ親要素内でclearをかける
②.親要素にheightの指定をして高さを確保する
③.親にもfloatをかける

4日目

前日の続き
クリアをかけるだけのdivは使わないようにする
height指定するデメリット・・・自動ではないので変更時に融通が利かない
親要素に指定するデメリット・・・marginが効かなくなる、回り込みしてしまう
④.overflow:hidden;をつぶれた親要素に記述する
scroll(縦横両方出る)、auto(はみ出したときだけやる)、記述は対象のボックスに記述する、clearをかける必要がない
⑤.clearfixを使う・・・疑似要素を使う、直の親用にかける、記入順は順不同
例)
.clearfix: after{
content: “”;
display: block;
clear:both;
}
clearはブロックレベル要素にしか使えない

やるのは1か5
clearfix専用のクラスを作ってやる
htmlのクラスを増やす記述は半角スペース
CSSに先に記述してしまう

3限目課題の実習
4限目課題の解説
li横並びは、それぞれに20%の幅をもたせて均等に配置する
私の間違い→footerの高さをmarginでとってしまった

マウスオーバーしたときの装飾・・・カーソルを乗せたときに変化させることでリンクであることをわかりやすくする、リンクでもないのに変化させるとわかりずらくなる
擬似クラス
a:link・・・通常時「a{}と同じ」
a:visited・・・リンク先に訪問済み
a:hover・・・カーソルが乗ったとき
a:active・・・ボタンを押している間
a:〇〇で2点
省略はOK順番を変えるのはダメ(動作の順になっている)

text-decorationプロパティ
値:
none・・なし
underline・・・下線
overline・・・上線
など
下線を調整しやすいのはborder-bottom

opacityプロパティ・・・不透明度を指定
値:0~1
rgbaとの違い
rgbaは背景だけ不透明度を下げることができる
オパシティはできない

transitionアニメーションの一括指定のプロパティ
値:0.5s秒数必須 ほかにもある
a:につけるときとaにつけるときで違う点に注意
a:は最初の反応はゆっくりだけど戻るときは早い

明日はposition
復習
HTMLとCSSのタグをすべて書き出す
Flexboxなど

5日目

質問への回答
HP制作を受注した場合の期間について(どのくらいで完成させるか)

フリーランスとしての仕事の受注について
時給換算で考えて金額を決める
実際の価格
バナー3~5千円、トップページ一枚5万、他ページ1万

ランディングページとは、
当初:本サイトに誘導するための広告ページ
1ページで完結するサイト
LPを作る=画像をつくる

運営をしていくことを考慮していない事がある
文書構造をしっかりしていくなどSEOを意識した作りにしなくて良い
ほとんどが画像で作られてある

リストの装飾を変更するlist-style-typeプロパティ
値:
none・・・無し
disc・・・黒丸(ulのデフォ)
circle・・・白丸
decimal・・・数字(olのデフォ)
など

リストマーカーを画像にするlist-style-imageプロパティ
値:url(パス);

list-style-position:inside
marginを消しても枠内に収めることができる

flort: none;とclear:left;の違い

4・5限目は課題作成
6限目はアイスブレイク

コメント

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