1限目~2限目：レイアウト系のプロパティについて
3限目：ボーダー／パディング／マージンのプロパティについて
4限目：その他のプロパティについて
5限目：本日の講義のまとめ
今日教わったこと
▼レイアウト系プロパティ
これも浮かせて無理やりどこかへ動かしているもの。むやみに使うと修正が大変なので本当にポジションでしかできないのか一旦考えた方がいい。親でなくその上の階層に位置が指定されてるならそっちを基準する。
・position(配置方法。以下の中から使う)/top/left/bottom/rightプロパティ（要素の配置方法）
よくあるページの上部に戻れるやつに使う。最低2方向指定する(上下左右)。
・static：初期値。これだとtop等は適用されない。
・relative：相対位置。本来あるべき場所から見てどこへ動くか。
これにした上でtop、left等を指定する。親要素の中の本来あるべき場所を基準にする。
・absolute：絶対位置。特に親要素をしていないなら表示されている画面の右上を基準に指定されたtop、
left等の位置へ行く。親要素がいる場合、親にstatic以外の要素を入れてあげれば
親の中で動く。浮いてるので動いた先で別の要素を押し出したりせず重なってる。
・fixed：絶対位置になる+スクロールしても位置が固定されたままになる。濱屋の右下のロケット的な。
・sticky：条件を満たすと位置が固定される。ここまでスクロールしたら など。
・z-indexプロパティ（重なりの順序方法）
だいたいpositionとセットで使う(浮いてるやつ対象)。0を基準として数が大きい方が優位。-の値は奥に行って、+の値は前に行く。positionが初期値(static)になってる場合は適用されないので注意。
▼ボーダー系プロパティ
1つ指定すると「上下左右」、2つ指定すると「上下」と「左右」の順、3つ指定すると「上」と「左右」と「下」の順、4つ指定すると「上」と「右」と「下」と「左」の順で指定する(パディングと一緒)
リボンを作れたりするので検索してみるとよき。
・border-styleプロパティ（ボーダースタイル）
→線のスタイルを指定。実線か二重線か点線か線無しかなど。重なった場合hidden(無し)が優先される。
・border-colorプロパティ（ボーダー色）
・border-widthプロパティ（ボーダー幅）
・borderプロパティ（ボーダー一括指定）
→一括できるけど上下左右を別々にすることはできないので注意。間は半角を空けて指定する。
・border-top/-bottom/-left/-rightプロパティ（ボーダー上下左右一括指定）
→上の線、下の線、左の線、右の線単位で一括指定できる。間は半角を空けて指定する。
▼その他のプロパティ
・border-radiusプロパティ（ボーダーの丸み）
角丸。ボーダーの外側の輪郭。1つだけでなく4つそれぞれ指定することもできる。
その場合は中心を基準にして半径の寸法を「左上の水平方向」・「右上の水平方向」・「右下の水平方向」・「左下の水平方向」・「/」・「左上の垂直方向」・「右上の垂直方向」・「右下の垂直方向」・「左下の垂直方向」の順でスペースで区切って指定する。楕円じゃなくて正円なら/区切り以降はいらない。
丸やボタンっぽい楕円など色々作れるしジェネレーターもあるのでググるがよし。
・box-shadowプロパティ（ボックスの影）
「水平方向の影のオフセット距離」・「垂直方向の影のオフセット距離」・「ぼかしの距離」・「広がりの距離」・「色」・「inset(ボックスの内側)」の順に半角スペースで区切って指定できる。
「,」で区切って続けて書くことで重ねて書くこともできる。その場合前に書いてある方が上の順番でレイヤーが重なってる感じ。
・contentプロパティ（挿入コンテンツ）
::before疑似要素や::after疑似要素だけに使える。追加されるものはインライン要素。文字を追加するなら”か””で囲う。画像ならurl(”か””)で。
疑似要素→HTML上には書いてないけどCSS上で疑似的に付け足すもの。beforeやafterは対象のタグの中身の前と後ろどっちに疑似的に追加するか指定するもの。装飾的に使うことが多い。
(例：ひし形追加してそのひし形に色付けてね→HTMLで指定できなくもないけどpの中身をspanで区切ってそのspanに対して色をCSSで指定ってなるので面倒)
・object-fitプロパティ（画像トリミング）
画像や動画の実際のサイズと表示させたいサイズが違う場合、はめ込み方法を指定する。微調整程度に使った方がいい。あまりにもサイズが違うものを無理やり当てはめるのは表示時間的にもよくない。
・contain：縦横比は維持したまま拡大縮小して全体をはめ込む。場合によっては余白が生まれる。
・cover：縦横比は維持したまま拡大縮小し、縦が合った時点ではめ込んで余白が生まれないようにする。
・fill：初期値。縦横比を無視して拡大縮小してはめ込む。
・none：拡大縮小しない。
・scale-down：仮にnoneかcontainが使われたと想定してサイズが小さい方を採用して表示する。
・object-positionプロパティ（画像の配置位置指定）
object-fitと一緒に使うことが多い。初期値は「50%(横方向) 50%(縦方向)」
横方向：left、right、centerのみもしくは配置場所+数値数値（単位付き）
縦方向配置位置：top、bottom、centerのみもしくは配置場所+数値数値（単位付き）
▼FTP
自分のPCで作ったデータをサーバーへアップロードするためのもの。
訓練校で借りたものは修了後3カ月で消えるので必要なら自分で借りる(無料のもある)
その場合はホスト名、ユーザー名、パスワードのメモを忘れない。
・ホストの設定名：任意の分かりやすい言葉を設定
・ホスト名：指定のもの
・ユーザー名：指定のもの
・パスワード：設定したもの。
接続できた場合、
左側にあるもの→デスクトップ上にあるもの
右側→今現在サーバー上に置いてあるもの。今自分がどこの階層を操作しているのか必ず見る。
▼▼▼絶対に触らない▼▼▼
・「.user.ini」：サーバーを制御しているファイルなので絶対に触らない。
・「portfolio」：Wordpress上で作ってるデータが入っていて変にいじるとデータが消える可能性もあるので絶対に触らない。
▲▲▲絶対に触らない▲▲▲
・アップロードする時はドロップするか青↑をクリック
・作ったフォルダを丸っとアップロードするとフォルダ名がURLになる。それぞれのフォルダの中にindex.htmlがある。（ブラウザは自動的に「index.html」を探してくれる）
・テラパッドでHTMLファイルを作成して保存するとき、初期設定は拡張子が「HTM」なので気を付ける。
・成績考査用のLPサイトのフォルダ名は「lp」で統一。
・FTPを終了するときは接続→切断→接続→終了で。直接×でも消せるけどバグの元になるのであんまりよくない。
▼その他のお話
・WordPressのバックアップの取り方
All-in-One WP Migration→エクスポート→エクスポート先→ファイル→ダウンロードすると拡張子が「.wpress」のファイルが生まれる。
もし表示がうまくいかず、バックアップの所に①が増えてるだけだったらそこへアクセスして3点のメニューからダウンロードを選べばダウンロードフォルダに入るはず。
※プラグインはある程度有効インストール数がいっててレビューが良いものを選ぶ。何でもかんでもインストールしない。また、容量を圧迫するのでテーマと同じく使わないものは消した方がいい。
・CSSはキャッシュ持ちがち。
困った時はデベロッパーツールを開いた状態で長押しして「ハード再読み込み」で更新すると1から読み込みなおしてくれる。それでも変わらなければ保存してないとか記載がおかしいとか。
・HTMLは親子関係がわかるようにインデントを分けるようにした方がいい。複数やるときはドラッグで選んだ状態でtab。戻すときはShift+tab
・HTMLで画像を張り付けた時にファイル名を一部大文字にしてしまったとしても、PC上のプレビューでは見れる。PC上では大文字小文字を見分けないため。
ただ、サーバー上では大文字小文字を見分けるため、そんな間違いをするとそんなファイル無いので表示できませんになる。日本語のファイル名もサーバー上だと文字化けするかもだからNG。半角英数字にする。
～今日の通所BGM～
まだフジファブリックの気分が続いていました。
最近めっきり冬めいてきたので、冬に聴きたくなるこのアルバムを聴いてました。
別にこれは四季シリーズじゃないはずなのですが、何か冬に聴きたくなります。ストックホルムで収録されたという先入観があるからそう思わせるんですかね。
それはともかくとして、私はフジファブリックの中だとこのアルバムが一番好きです。
曲が好みなものばっかりっていうのもそうなんですが、今までの楽曲を経て新しいものが生まれつつあってこれから化けていく感じがして、どうなってしまうのかワクワクします。まぁもうその先を知っているんですが…
このアルバム聴いていると、もし志村が生きていたら今頃どんなとんでもなく良い曲を生み出していたんだろうと思わずにはいられなくて、だからこそ冬に聴きたくなるのかなと何か今そう思いました。
冬はセンチメンタルになる季節ですね。
コメント