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

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

1日目

午前中は先週にやったfloat課題の解説

floatやpositionなどを使う

要素の幅が100%→中身の幅になる
中身(文字や画像)がづくなければ横並びになるときもある

中身が多いときは幅を指定する
しっかりと計算しやすくするために指定する

要素と要素を重ねる事ができるpositionプロパティ
positionプロパティの指定
値:relativ(レラティブ)・・もともとの位置から移動
  absolute(アブソリュート)・・上下左右の四角を基準位置にする
  fixed・・固定
  sticky(ステッキー)・・ある位置まで来たら固定その後また動き出す
top、bottom、left、rightプロパティで位置を指定する
top:100px;(上から下に100px)
relativeは要素が移動しても元々あった位置のスペースを開ける
absoluteは移動した要素分下の要素が上がってくる
positionで移動した要素の空白は空けないほうが良い

absoluteを使う

ウインドウの四角を基準にするのでコンテンツ量の変化に合わせて指定し直す

親要素にposition: relative;をかける、基準位置がウインドウ→親ボックスになる

2日目

質問に回答
ポートフォリオの中身がないのでどっちから作ったほうが良いのか
こういう質問をする人は中身から作ったほうが良い
直すことになるから
履歴書的な作品になるから自分のことは決めきれないから
お店のサイトは客観的に見れるからおすすめするのは中身から
自分の知っていること(好きなこと)をやったほうが良い
時間かかったとしても楽しい方を作っていったほうが良い
それすら思いつかない人は、模写を練習としてやっていくのもいいが、クラウドワークスなどでコンペ作品などを見る、自分の作品をエントリーして実際にためす

ハローワークの求人は4件までしか出せない
企業名を公開していない場合は申込みをすると教えてくれる
ハローワークですすめるけど、間違っている場合も多い

求人を頻繁に出す企業はやめる人が多いのか?
YES、ダメなのかとなると合う合わないがあるので違う
こっちも選んでいる側なので、対等に話す

授業の進行を待っていほしい場合は伝える、わからないから

positionを使う
動かしたい(重ねたい要素)に
position: relativeまたはabsoluteを指定
topかbottom、leftかrightプロパティで位置を指定する
relative元あった位置が基準
absolute親要素が基準
基本は下にあるものが上に来てほしいことと、コンテンツ量によって自動で調整されてほしいからabsoluteを使う
absoluteを使った場合は親要素にrelativeをかける

課題で練習
positionをかけた要素の重なり順を変更する
positionをかけた要素同士だとHTML内で後に書かれてる要素が上に重なる
z-indexプロパティ・・重なり順を変更する
値:数値のみ・・大きいほうが上になる
デフォルトはゼロ

午後から解説
position: fixed;を使う
・幅がコンテンツ(中身)の幅になる
floatと同じ 幅を指定する
・浮いた分下の要素が上がってくる
absoluteと同じ 上がってきた分下げる

1.下にある要素にpadding-top
ボックス自体は下に入り込んでいる
2.親要素からのpadding-top
fixedをかけた要素の位置をちゃんと書く

浮くと親というのがなくなる
100%にすると親が基準になるからややこしい
ヘッダーを最前面に表示したい場合は、先生は1000とか大きい数字を書いてあげる
スクロールを考慮するから
親要素よりも子要素が必ず上に来る
htmlの仕組みのせいで親が1なら子に10や100と言っても順位が変わらず
fixedでしたの要素が上と重なるのはabsoluteと同じ
言わなければleftゼロ
containerにpaddingを指定するよりも、wrapに指定するほうが良い、その場合はposition: fixedの位置をtopゼロを指定してあげると

position:stickyを使う・・指定したところで固定になる

始め動いていて固定top:00px;のように固定する場所を指定
始め固定で途中からスクロールする
bottom:00px;と書くとその位置で固定従来の位置までスクロールしたときに動き出す
スクロール 固定 スクロール
動いてほしい要素までをなどでボックスにするtop:00px;の指定になる

3日目

来週以降の授業予定
テストについて、席替えについて
質問への回答
ベンダープレフィックスは記述する必要がないのでは?
新しいプロパティや値に未対応なブラウザのために書いておく記述
ブラウザごとに決められた接頭辞をつけた記述を足す
なんでもつければいいわけではない
先生は良くないけど必要のないベンダープレフィックスを書いてしまっているものもある
今はほとんどいらない

間違いの探し方について
コメントアウトで1つづつ見ていく
デベロッパーツール(開発者ツール)
htmlやcss、JavaScriptなどブラウザで読み込んでいる内容を表示できる
win:f12、ctrl+shift+i
mac:command+option+i
html css JavaScriptの個別の見方、読み込み速度について、
レスポンシブデザインの表示デモを確認
styleを使ったcssの変更方法
ブラウザ内での扱いを変えるdisplayプロパティ
値:block・・・ブロックレベル
inline・・・インライン
inline-block・・・横に並びつつ幅などの指定ができる
flex・・・flexboxを適用させる
font-size : 0;はSEO的にダメ

午後から
flexboxを使う
flexbox・・・display:flex;を記述して横ならびにするflexは指定した要素の子要素を強制的に横一列に並べる
幅の指定をしていたとしても、親要素が狭くなったときには、その分小さくして横ならびにする
①親要素にdisplay:flex;と記述
親をflexコンテナ子をflezアイテムとし、アイコンをコンテナ内で横並びにする
②コンテナ用アイテム用のCSSが使える

flexコンテナ用CSS

並ぶ方向を指定するflex-direction
値:row・・左から右(デフォルト)
row-reverse・・右から左
column・・上から下
colmun-reverse・・下から上

水平方向の揃えを指定するjustify-contentプロパティ
値:flex-start・・左揃え(デフォルト)
center・・中央揃え
flex-end・・右揃え
両端揃え:space-between・・要素の間に余白
space-around・・要素の間まわりに余白

折り返しを指定するflex-wrapプロパティ
値:no-wrap・・折り返さない(デフォルト)
wrap・・折り返す
wrap-reverse・・折り返した上で下から上に
flexboxfroggyによる学習
インターネットエクスプローラを使ったデベロッパーツール
バージョンを落として操作

コメント

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